mcpField
U
umbraco-collection-view

umbraco-collection-view

github.com/umbraco開発27390 回インストール6 週間前に更新
リポジトリ

umbraco-collection-view について

umbraco-collection-viewは、Umbracoコレクションのデータ表示をカスタマイズする開発スキルです。マニフェストとビュー要素の作成を案内し、テーブル、グリッド、カードなどのレイアウトをユーザーが切り替えられるビューを構築できます。

主な機能

  1. 01カスタムコレクションビューの開発ガイド
  2. 02テーブル・グリッド・カードレイアウト
  3. 03マニフェストとビュー要素の例
  4. 04コレクションコンテキストと項目へのアクセス
  5. 05ユーザー定義列の取得

活用シーン

  1. 01既存コレクションに独自レイアウトを追加
  2. 02コレクション項目のテーブルやカード表示を作成
  3. 03メディアなどのコレクションに切り替え可能なビューを作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-collection-view

インストール後、Claude Code で/umbraco-collection-viewを入力して読み込まれたか確認します。

詳細

Umbraco コレクションビュー

これは何ですか？

コレクションビューは、コレクション内でデータがどのように表示されるかを定義します。テーブル、グリッド、カード、または任意のカスタムレイアウトなど、エンティティリストのカスタム視覚表現を作成できます。コレクションビューは既存のコレクションまたはカスタムコレクションに追加でき、ユーザーは利用可能なビューを切り替えることができます。

ドキュメント

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

関連する Foundation スキル

  • Context API: コレクションコンテキストとアイテムデータにアクセスするため

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

  • State Management: コレクションデータの変更を購読するため

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

  • Umbraco Element: ビュー要素を実装するため

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

ワークフロー

  1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
  2. 質問する - どのコレクションですか？ テーブル、グリッド、カスタムレイアウトのどれですか？ どの列／フィールドですか？
  3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + ビュー要素を作成します
  4. 説明 - 作成された内容とテスト方法を示します

最小限の例

マニフェスト (manifests.ts)
import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestCollectionView = {
  type: 'collectionView',
  alias: 'My.CollectionView.Cards',
  name: 'Card View',
  element: () => import('./card-view.element.js'),
  meta: {
    label: 'Cards',
    icon: 'icon-grid',
    pathName: 'cards',
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'My.Collection',
    },
  ],
};

export const manifests = [manifest];
ビュー要素 (card-view.element.ts)
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-card-view')
export class MyCardViewElement extends UmbLitElement {
  @state()
  private _items: Array<any> = [];

  constructor() {
    super();

    this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
      this.observe(context.items, (items) => {
        this._items = items;
      });
    });
  }

  render() {
    return html`
      <div class="card-grid">
        ${this._items.map(
          (item) => html`
            <div class="card">
              <h3>${item.name}</h3>
              <p>${item.description || 'No description'}</p>
            </div>
          `
        )}
      </div>
    `;
  }

  static styles = css`
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--uui-size-space-4);
      padding: var(--uui-size-space-4);
    }

    .card {
      background: var(--uui-color-surface);
      border: 1px solid var(--uui-color-border);
      border-radius: var(--uui-border-radius);
      padding: var(--uui-size-space-4);
    }
  `;
}

export default MyCardViewElement;

declare global {
  interface HTMLElementTagNameMap {
    'my-card-view': MyCardViewElement;
  }
}
テーブルビューの例
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-table-view')
export class MyTableViewElement extends UmbLitElement {
  @state()
  private _items: Array<any> = [];

  constructor() {
    super();

    this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
      this.observe(context.items, (items) => {
        this._items = items;
      });
    });
  }

  render() {
    return html`
      <uui-table>
        <uui-table-head>
          <uui-table-head-cell>Name</uui-table-head-cell>
          <uui-table-head-cell>Status</uui-table-head-cell>
          <uui-table-head-cell>Updated</uui-table-head-cell>
        </uui-table-head>
        ${this._items.map(
          (item) => html`
            <uui-table-row>
              <uui-table-cell>${item.name}</uui-table-cell>
              <uui-table-cell>${item.status}</uui-table-cell>
              <uui-table-cell>${item.updateDate}</uui-table-cell>
            </uui-table-row>
          `
        )}
      </uui-table>
    `;
  }
}

export default MyTableViewElement;
組み込みコレクション用のビュー (例: Media)
const manifest: ManifestCollectionView = {
  type: 'collectionView',
  alias: 'My.CollectionView.MediaThumbnails',
  name: 'Thumbnail View',
  element: () => import('./thumbnail-view.element.js'),
  weight: 100, // Higher weight = appears first in view switcher
  meta: {
    label: 'Thumbnails',
    icon: 'icon-picture',
    pathName: 'thumbnails',
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'Umb.Collection.Media',
    },
  ],
};
ユーザー定義列へのアクセス
this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
  // Get configured columns/properties
  this.observe(context.userDefinedProperties, (properties) => {
    this._columns = properties;
  });

  // Get items
  this.observe(context.items, (items) => {
    this._items = items;
  });
});

メタプロパティ

プロパティ説明
labelビュー切り替えに表示される名前
iconビュー切り替えに表示されるアイコン
pathNameディープリンク用の URL パスセグメント

条件で使用する一般的なコレクションエイリアス

  • Umb.Collection.Document
  • Umb.Collection.Media
  • Umb.Collection.Member
  • Umb.Collection.User

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

コメント

Markdown 対応