umbraco-tree-item

Umbraco ツリーアイテム

これは何ですか？

ツリーアイテムは、Umbraco バックオフィス全体のツリー構造においてエンティティがどのようにレンダリングされるかを定義します。これらはサイドバーやナビゲーションツリー内のアイテムの視覚的表現と動作を制御します。ツリーアイテムはエンティティタイプに関連付けられており、特定のエンティティタイプに対して追加情報、アイコン、カスタムレンダリングを表示するようにカスタマイズできます。

ドキュメント

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

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/tree
• 基盤: 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

カスタムツリーアイテムコンテキストを使用する場合

ほとんどのツリーアイテムは kind: 'default' を使用し、カスタムコンテキストは必要ありません。カスタムコンテキストを作成するのは以下の場合のみです:

• カスタムアイコンロジック - アイテムの状態に基づく動的なアイコン
• カスタムラベルまたはバッジ - 追加の視覚情報
• 特別なレンダリング - 特定のエンティティタイプに対する独自の動作
• 追加のアイテム動作 - クリックハンドラー、ドラッグアンドドロップなど

標準的なツリーアイテムのみが必要な場合は、カスタムコンテキストなしで kind: 'default' を使用してください。

関連する基盤スキル

• ツリー: ツリーアイテムはツリー構造内で動作します

  • 参照スキル: umbraco-tree
  • 重要: ツリーストアは Umbraco 14 で非推奨となり、Umbraco 18 で削除されました。詳細はそのスキルを参照してください

• リポジトリパターン: ツリーデータを読み込む場合

  • 参照スキル: umbraco-repository-pattern

• コンテキスト API: ツリーコンテキストにアクセスする場合

  • 参照スキル: umbraco-context-api

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのエンティティタイプですか？どのようなカスタムレンダリングですか？
3. ファイルを生成 - マニフェスト + オプションの element/context を作成します
4. 説明 - 何が作成されたか、どのようにテストするかを示します

最小限の例

基本的なマニフェスト (manifests.ts)

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'treeItem',
    kind: 'default',
    alias: 'My.TreeItem',
    name: 'My Tree Item',
    forEntityTypes: ['my-entity-type'],
  },
];

コンテキスト付きのカスタムツリーアイテム

import { MY_ENTITY_TYPE, MY_ROOT_ENTITY_TYPE } from '../entity.js';

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'treeItem',
    kind: 'default',
    alias: 'My.TreeItem.Custom',
    name: 'My Custom Tree Item',
    forEntityTypes: [MY_ENTITY_TYPE, MY_ROOT_ENTITY_TYPE],
    api: () => import('./my-tree-item.context.js'),
  },
];

ツリーアイテムコンテキスト (my-tree-item.context.ts)

import { UmbDefaultTreeItemContext } from '@umbraco-cms/backoffice/tree';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UmbTreeItemModel, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree';

export class MyTreeItemContext extends UmbDefaultTreeItemContext<
  UmbTreeItemModel,
  UmbTreeRootModel
> {
  constructor(host: UmbControllerHost) {
    super(host);
  }

  // Override to customize icon
  override async getIcon() {
    const item = this.getTreeItem();
    if (item?.hasChildren) {
      return 'icon-folder';
    }
    return 'icon-document';
  }

  // Override to add custom labels/badges
  override async getLabel() {
    const item = this.getTreeItem();
    return item?.name ?? 'Unknown';
  }
}

export { MyTreeItemContext as api };

ツリーアイテムを含む完全なツリー

import { MY_ENTITY_TYPE, MY_ROOT_ENTITY_TYPE } from './entity.js';
import { MY_TREE_ALIAS, MY_TREE_REPOSITORY_ALIAS } from './constants.js';

export const manifests: Array<UmbExtensionManifest> = [
  // Tree definition
  {
    type: 'tree',
    kind: 'default',
    alias: MY_TREE_ALIAS,
    name: 'My Tree',
    meta: {
      repositoryAlias: MY_TREE_REPOSITORY_ALIAS,
    },
  },
  // Tree item for the entities
  {
    type: 'treeItem',
    kind: 'default',
    alias: 'My.TreeItem',
    name: 'My Tree Item',
    forEntityTypes: [MY_ROOT_ENTITY_TYPE, MY_ENTITY_TYPE],
  },
];

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

interface ManifestTreeItem extends ManifestElementAndApi<UmbControllerHostElement, UmbTreeItemContext> {
  type: 'treeItem';
  forEntityTypes: Array<string>;  // Entity types this tree item renders
}

一般的なエンティティタイプ

ツリーアイテムを持つ組み込みのエンティティタイプ:

• document - コンテンツノード
• document-root - コンテンツルート
• media - メディアアイテム
• media-root - メディアルート
• member - メンバー
• data-type - データタイプ
• document-type - ドキュメントタイプ
• template - テンプレート

種類

kind: 'default' は標準のツリーアイテムレンダリングを使用します。特殊なレンダリングのためにカスタムの種類を作成できます。

ベストプラクティス

• 異なるエンティティタイプには適切なアイコンを使用する
• 非同期データの読み込み状態を考慮する
• パフォーマンスのためにツリーアイテムを軽量に保つ
• 型安全性のためにエンティティタイプの定数を使用する

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