umbraco-property-editor-ui

Umbraco プロパティエディター UI

これは何ですか？

プロパティエディター UI は、ユーザーが Umbraco バックオフィスでコンテンツデータを入力・管理するために操作する視覚的なコンポーネントです。これはプロパティエディターの片方の半分であり、UI（クライアント側の TypeScript）は、データストレージを定義するスキーマ（サーバー側の C#）とペアになります。

ドキュメント

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

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/property-editors
• チュートリアル: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-property-editor
• 設定: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

リファレンス例

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

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/property-editor/

この例では、設定を備えた完全なプロパティエディター UI の実装を示しています。本番環境のパターンについては、これを参考にしてください。

関連する Foundation スキル

• Umbraco Element: UmbElementMixin を使用して UI 要素を実装する場合

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

• 状態管理: リアクティブな値の更新を実装する場合

  • 参照スキル: umbraco-state-management

• ローカライズ: ラベルに多言語サポートを追加する場合

  • 参照スキル: umbraco-localization

ワークフロー

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

最小限の例

マニフェスト（umbraco-package.json）

WARNING: 以下の propertyEditorSchemaAlias は、組み込みスキーマである Umbraco.Plain.String を使用しています。 MyPackage.CustomSchema のようなカスタムエイリアスを使用する場合、サーバー上に対応する C# の DataEditor が 必ず 必要です。そうでない場合、データ型を作成するときに 404 エラー が発生します。

{
  "name": "My Property Editor",
  "extensions": [
    {
      "type": "propertyEditorUi",
      "alias": "My.PropertyEditorUi.Custom",
      "name": "My Custom Editor",
      "element": "/App_Plugins/MyEditor/editor.js",
      "elementName": "my-editor-ui",
      "meta": {
        "label": "My Custom Editor",
        "icon": "icon-edit",
        "group": "common",
        "propertyEditorSchemaAlias": "Umbraco.Plain.String"
      }
    }
  ]
}

要素の実装（editor.ts）

import { LitElement, html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-editor-ui')
export default class MyEditorElement extends UmbElementMixin(LitElement) implements UmbPropertyEditorUiElement {
  @property({ type: String })
  public value = '';

  #onChange(e: Event) {
    const input = e.target as HTMLInputElement;
    this.value = input.value;
    this.dispatchEvent(new UmbChangeEvent());
  }

  render() {
    return html`
      <uui-input
        .value=${this.value || ''}
        @change=${this.#onChange}
      ></uui-input>
    `;
  }

  static styles = css`
    :host {
      display: block;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    'my-editor-ui': MyEditorElement;
  }
}

設定あり

import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-editor-ui')
export default class MyEditorElement extends UmbElementMixin(LitElement) implements UmbPropertyEditorUiElement {
  @property({ type: String })
  public value = '';

  @state()
  private _maxChars?: number;

  @state()
  private _placeholder?: string;

  @property({ attribute: false })
  public set config(config: UmbPropertyEditorConfigCollection) {
    this._maxChars = config.getValueByAlias('maxChars');
    this._placeholder = config.getValueByAlias('placeholder');
  }

  render() {
    return html`
      <uui-input
        .value=${this.value || ''}
        .placeholder=${this._placeholder || ''}
        .maxlength=${this._maxChars}
        @change=${this.#onChange}
      ></uui-input>
    `;
  }
}

マニフェストでの設定

{
  "type": "propertyEditorUi",
  "alias": "My.PropertyEditorUi.Custom",
  "name": "My Custom Editor",
  "element": "/App_Plugins/MyEditor/editor.js",
  "elementName": "my-editor-ui",
  "meta": {
    "label": "My Custom Editor",
    "propertyEditorSchemaAlias": "Umbraco.Plain.String",
    "settings": {
      "properties": [
        {
          "alias": "maxChars",
          "label": "Maximum Characters",
          "propertyEditorUiAlias": "Umb.PropertyEditorUi.Integer"
        },
        {
          "alias": "placeholder",
          "label": "Placeholder Text",
          "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox"
        }
      ],
      "defaultData": [
        { "alias": "maxChars", "value": 100 }
      ]
    }
  }
}

組み込みスキーマエイリアス（安全なデフォルト）

マニフェスト内の propertyEditorSchemaAlias は、サーバー上に 存在するスキーマを参照する必要があります：

部分	場所	言語
プロパティエディター UI	クライアント	TypeScript
プロパティエディタースキーマ	サーバー	C#

• 組み込みスキーマ（以下に記載）は常に利用可能です - シンプルなストレージのニーズにはこれらを使用してください
• カスタムスキーマ には C# の DataEditor クラスが必要です - カスタムの検証・変換が必要な場合にのみ必要です

これらの組み込みスキーマは常に利用可能です：

スキーマエイリアス	保存するもの	ユースケース
Umbraco.Plain.String	string	シンプルなテキスト値
Umbraco.Integer	int	数値、評価、カウント
Umbraco.Decimal	decimal	価格、パーセンテージ
Umbraco.Plain.Json	object	複雑な JSON データ
Umbraco.DateTime	DateTime	日付と時刻
Umbraco.TrueFalse	bool	トグル、チェックボックス
Umbraco.TextBox	string	検証付きテキストボックス
Umbraco.TextArea	string	複数行テキスト

トラブルシューティング

以下を含む一般的な問題については、TROUBLESHOOTING.md を参照してください：

• データ型を作成するときの 404 エラー
• Umbraco.Plain.Json で値が永続化されない

UUI コンポーネントの問題（combobox、input など）については、UUI-GOTCHAS.md を参照してください。

---

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