umbraco-dashboard

Umbraco ダッシュボード

これは何ですか？

ダッシュボードは、Umbraco のバックオフィスセクションに表示され、情報や機能を提示するカスタマイズ可能なコンポーネントです。ツリーで選択された項目の「エディター」、または項目が選択されていない場合は既定のセクション情報を表示します。ダッシュボードは条件を使用して、バックオフィス内のどこでいつ表示されるかを制御します。

ドキュメント

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

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/dashboard
• 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
• チュートリアル: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-custom-dashboard

リファレンス例

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

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/

この例は、データバインディングにプロパティデータセットを使用するダッシュボードを示しています。本番環境のパターンとしてこれを研究してください。

関連する Foundation スキル

ダッシュボードを実装する際にこれらの基礎的な概念を説明する必要がある場合は、以下のスキルを参照してください：

• Umbraco Element / UmbElementMixin: ダッシュボード要素を実装するとき、UmbElementMixin、UmbLitElement、または基底クラスのパターンを説明するとき

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

• Context API: コンテキストの消費（consumeContext）を実装するとき、コンテキストを提供するとき、または UMB_NOTIFICATION_CONTEXT などのサービスにアクセスするとき

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

• ローカライゼーション: 翻訳を実装するとき、localize.term() を使用するとき、または多言語サポートを追加するとき

  • 参照スキル: umbraco-localization

• 状態管理: リアクティブな状態を実装するとき、オブザーバブル、UmbState、または @state() デコレーターを使用するとき

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

• 条件: 表示制御、セクション制限、または条件付きレンダリングを実装するとき

  • 参照スキル: umbraco-conditions

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのセクションですか？どのような機能ですか？誰がアクセスできますか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + 実装を作成します
4. 説明 - 作成された内容とテスト方法を示します

最小限の例

マニフェスト (umbraco-package.json)

{
  "type": "dashboard",
  "alias": "my.dashboard",
  "name": "My Dashboard",
  "element": "/App_Plugins/MyDashboard/dashboard.js",
  "meta": {
    "label": "My Dashboard",
    "pathname": "my-dashboard"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "Umb.Section.Content"
    }
  ]
}

実装 (dashboard.js)

import { LitElement, html, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

export default class MyDashboardElement extends UmbElementMixin(LitElement) {
  render() {
    return html`
      <uui-box headline="My Dashboard">
        <p>Dashboard content goes here</p>
      </uui-box>
    `;
  }

  static styles = css`
    :host {
      display: block;
      padding: var(--uui-size-space-4);
    }
  `;
}

customElements.define('my-dashboard', MyDashboardElement);

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