umbraco-package-view

Umbraco パッケージビュー

これは何ですか？

パッケージビューは、Umbraco にインストールされたパッケージ用のカスタム UI パネルを提供します。これらはパッケージセクションに表示され、パッケージ開発者がパッケージ専用の設定ページや情報ページを作成できるようにします。ユーザーがインストール済みのパッケージをクリックすると、パッケージビューがモーダルまたはパネルとして表示されます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Umbraco Element: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/umbraco-element

関連する Foundation スキル

• Umbraco Element: UI コンポーネントを作成するための基底クラス

  • 参照スキル: umbraco-umbraco-element

• Modals: パッケージビューはモーダルコンテキストで表示されます

  • 参照スキル: umbraco-modals

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのパッケージですか？どのような設定オプションがありますか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + 要素を作成します
4. 説明 - 何が作成されたか、どのようにテストするかを示します

最小限の例

マニフェスト (manifests.ts)

import type { ManifestPackageView } from '@umbraco-cms/backoffice/packages';

export const manifests: Array<ManifestPackageView> = [
  {
    type: 'packageView',
    alias: 'My.PackageView',
    name: 'My Package View',
    element: () => import('./my-package-view.element.js'),
    meta: {
      packageName: 'My Package',
    },
  },
];

Lit を使用した要素の実装 (my-package-view.element.ts)

import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';

@customElement('my-package-view')
export class MyPackageViewElement extends UmbModalBaseElement {
  override render() {
    return html`
      <umb-body-layout headline="My Package">
        <uui-box>
          <h2>Package Configuration</h2>
          <p>Configure your package settings here.</p>

          <uui-form>
            <uui-form-layout-item>
              <uui-label slot="label">Setting 1</uui-label>
              <uui-input></uui-input>
            </uui-form-layout-item>
          </uui-form>
        </uui-box>

        <div slot="actions">
          <uui-button @click=${this.#onClose} label="Close"></uui-button>
          <uui-button look="primary" @click=${this.#onSave} label="Save"></uui-button>
        </div>
      </umb-body-layout>
    `;
  }

  #onClose() {
    this.modalContext?.reject();
  }

  #onSave() {
    // Save logic here
    this.modalContext?.submit();
  }
}

export default MyPackageViewElement;

バニラ JS 要素 (my-package-view.js)

const template = document.createElement('template');
template.innerHTML = `
  <umb-body-layout>
    <h1 slot="header">My Package</h1>

    <uui-box>
      <p>Package information and settings</p>
    </uui-box>

    <uui-action-bar slot="footer-info">
      <uui-button look="primary" type="button">Close</uui-button>
    </uui-action-bar>
  </umb-body-layout>
`;

export default class MyPackageViewElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.shadowRoot.querySelector('uui-button').addEventListener('click', this.onClick.bind(this));
  }

  onClick() {
    this.modalContext.close();
  }
}

customElements.define('my-package-view', MyPackageViewElement);

インターフェースリファレンス

interface ManifestPackageView extends ManifestElement {
  type: 'packageView';
  meta: MetaPackageView;
}

interface MetaPackageView {
  packageName: string;  // Must match the package name in umbraco-package.json
}

パッケージの統合

パッケージビューは、meta.packageName を umbraco-package.json 内のパッケージ名と一致させることでリンクされます：

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Package",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "packageView",
      "alias": "My.PackageView",
      "name": "My Package View",
      "element": "/App_Plugins/MyPackage/my-package-view.js",
      "meta": {
        "packageName": "My Package"
      }
    }
  ]
}

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。