umbraco-manifest-picker

Umbraco マニフェストピッカー

これは何ですか？

<umb-input-manifest> コンポーネントは、Umbraco 拡張機能レジストリに登録された拡張機能を選択するためのピッカー UI を提供します。ユーザーは任意の拡張機能タイプ（ワークスペース、ダッシュボード、プロパティエディターなど）から選択でき、選択されたマニフェストを返します。これは、ユーザーが他の拡張機能を参照する必要がある構成 UI に役立ちます。

ドキュメント

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

• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

リファレンス例

Umbraco のソースには動作する例が含まれています：

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/manifest-picker/

この例では、ユーザーがタイプ別に拡張機能を閲覧して選択できるダッシュボードを実演しています。

関連する Foundation スキル

• 拡張機能レジストリ: 拡張機能がどのように登録されるかを理解するため

  • 参照スキル: umbraco-extension-registry

• Umbraco Element: ピッカー UI を作成するため

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

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どの拡張機能タイプを選択しますか？選択をどのように使用しますか？
3. ファイルを生成 - マニフェストピッカーを備えた element を作成します
4. 説明 - 作成された内容と選択の仕組みを示します

---

基本的な使用方法

import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components';

@customElement('my-manifest-picker-example')
export class MyManifestPickerExampleElement extends UmbLitElement {
  @state()
  private _selectedManifest = '';

  #onChange(event: { target: UmbInputManifestElement }) {
    const selectedManifest = event.target.value;
    this._selectedManifest = selectedManifest?.value ?? '';
  }

  override render() {
    return html`
      <uui-box>
        <umb-property-layout label="Select a workspace">
          <div slot="editor">
            <umb-input-manifest
              .extensionType=${'workspace'}
              @change=${this.#onChange}
            ></umb-input-manifest>
          </div>
        </umb-property-layout>

        ${this._selectedManifest
          ? html`<p>Selected: <code>${this._selectedManifest}</code></p>`
          : ''}
      </uui-box>
    `;
  }
}

---

動的な拡張機能タイプの選択

import { html, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';

interface Option {
  name: string;
  value: string;
  selected: boolean;
}

@customElement('my-extension-browser')
export class MyExtensionBrowserElement extends UmbLitElement {
  #options: Option[] = [];

  @state()
  private _selectedExtensionType = 'dashboard';

  @state()
  private _selectedManifest = '';

  constructor() {
    super();

    // Build list of available extension types from registry
    this.observe(umbExtensionsRegistry.extensions, (extensions) => {
      const types = [...new Set(extensions.map((x) => x.type))];
      this.#options = types.sort().map((x) => ({
        name: x,
        value: x,
        selected: x === this._selectedExtensionType,
      }));
    });
  }

  #onTypeSelect(event: UUISelectEvent) {
    this._selectedManifest = '';
    this._selectedExtensionType = event.target.value as string;
  }

  #onManifestChange(event: { target: UmbInputManifestElement }) {
    const selectedManifest = event.target.value;
    this._selectedManifest = selectedManifest?.value ?? '';
  }

  override render() {
    return html`
      <uui-box>
        <umb-property-layout label="Extension Type">
          <uui-select
            slot="editor"
            label="Select type"
            placeholder="Select type..."
            .options=${this.#options}
            @change=${this.#onTypeSelect}
          ></uui-select>
        </umb-property-layout>

        ${when(
          this._selectedExtensionType,
          () => html`
            <umb-property-layout
              label="Select Extension"
              description="Pick a ${this._selectedExtensionType}"
            >
              <div slot="editor">
                <umb-input-manifest
                  .extensionType=${this._selectedExtensionType}
                  @change=${this.#onManifestChange}
                ></umb-input-manifest>
              </div>
            </umb-property-layout>
          `,
          () => nothing
        )}

        ${when(
          this._selectedManifest,
          () => html`
            <umb-property-layout label="Selected Manifest">
              <div slot="editor">
                <code>${this._selectedManifest}</code>
              </div>
            </umb-property-layout>
          `,
          () => nothing
        )}
      </uui-box>
    `;
  }
}

---

すべての拡張機能タイプの取得

import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';

// In your element constructor
this.observe(umbExtensionsRegistry.extensions, (extensions) => {
  // Get unique extension types
  const types = [...new Set(extensions.map((x) => x.type))];
  console.log('Available types:', types);

  // Filter by type
  const dashboards = extensions.filter((x) => x.type === 'dashboard');
  console.log('Dashboards:', dashboards);

  // Get extension by alias
  const specific = extensions.find((x) => x.alias === 'Umb.Dashboard.Welcome');
  console.log('Specific extension:', specific);
});

---

一般的な拡張機能タイプ

タイプ	説明
dashboard	セクションのダッシュボード
workspace	エンティティのワークスペース
workspaceView	ワークスペース内のビュー
workspaceAction	ワークスペースのアクションボタン
propertyEditorUi	プロパティエディター UI
propertyEditorSchema	プロパティエディターのスキーマ
entityAction	コンテキストメニューのアクション
tree	ナビゲーションツリー
treeItem	ツリー項目のレンダラー
section	バックオフィスのセクション
sectionView	セクションのビュー
headerApp	ヘッダーバーのアプリ
modal	モーダルダイアログ
condition	拡張機能の条件

---

UmbInputManifest のプロパティ

プロパティ	型	説明
extensionType	string	選択する拡張機能のタイプ
value	ManifestBase | undefined	選択されたマニフェスト

---

イベント

イベント	詳細	説明
change	{ target: UmbInputManifestElement }	選択が変更されたときに発火します

---

選択されたマニフェストデータへのアクセス

#onManifestChange(event: { target: UmbInputManifestElement }) {
  const manifest = event.target.value;

  if (manifest) {
    console.log('Alias:', manifest.alias);
    console.log('Name:', manifest.name);
    console.log('Type:', manifest.type);
    console.log('Full manifest:', manifest);
  }
}

---

ユースケース

1. 構成画面 - ユーザーが表示するダッシュボード/ワークスペースを選択できるようにします
2. 拡張機能の管理 - 登録された拡張機能を閲覧して検査します
3. 動的ルーティング - ナビゲーションのターゲットを構成します
4. 条件の構成 - 適用する条件を選択します
5. パッケージ開発 - 拡張機能の登録をテストします

---

ベストプラクティス

1. 選択をクリア - タイプが変わったときに _selectedManifest をリセットします
2. undefined を処理 - プロパティにアクセスする前に value が存在するか確認します
3. プロパティレイアウトを使用 - 一貫したスタイルのために <umb-property-layout> でラップします
4. フィードバックを表示 - 選択を確認するために選択されたマニフェストのエイリアス/名前を表示します
5. タイプを並べ替え - 使いやすさのために拡張機能タイプのオプションをアルファベット順に並べ替えます

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