umbraco-header-apps

Umbraco ヘッダーアプリ

これは何ですか？

ヘッダーアプリは、Umbraco の上部ナビゲーションバーに表示される単一目的の拡張機能で、ユーザープロフィールのアバターとグローバル検索の隣に配置されます。ドキュメントへのクイックリンク、ツール、カスタムのインタラクティブ機能など、Backoffice にグローバルにアクセス可能な機能を提供します。ヘッダーアプリは、シンプルなリンク、またはモーダルを開いたりアクションを実行したりするカスタムのインタラクティブコンポーネントにすることができます。

ドキュメント

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

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

関連する Foundation スキル

ヘッダーアプリを実装する際にこれらの基盤となる概念を説明する必要がある場合は、以下のスキルを参照してください：

• Umbraco Element: インタラクティブなヘッダーアプリを実装する場合、UmbHeaderAppButtonElement やカスタム要素について説明する場合

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

• Context API: ヘッダーアプリからコンテキストアクセス、モーダル、通知、サービスを実装する場合

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

• Controllers: コントローラー、アクションハンドラー、クリックハンドラー、またはヘッダーアプリの動作を実装する場合

  • 参照スキル: umbraco-controllers

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - 何をしますか？シンプルなリンクですか、それともインタラクティブですか？どのアイコン／ラベルですか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + 要素（インタラクティブな場合）を作成します
4. 説明 - 作成した内容とテスト方法を示します

最小限の例

シンプルなリンクヘッダーアプリ（umbraco-package.json）

{
  "type": "headerApp",
  "alias": "My.HeaderApp",
  "name": "My Header App",
  "kind": "button",
  "meta": {
    "label": "Documentation",
    "icon": "icon-help",
    "href": "https://docs.umbraco.com/"
  }
}

インタラクティブなヘッダーアプリのマニフェスト（manifest.ts）

export const manifests = [
  {
    type: "headerApp",
    alias: "My.Interactive.HeaderApp",
    name: "My Interactive Header App",
    element: () => import('./header-app.element.js'),
    meta: {
      label: "Tools",
      icon: "icon-tools"
    }
  }
];

インタラクティブなヘッダーアプリの要素（header-app.element.ts）

import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/header-app';

@customElement('my-header-app')
export class MyHeaderAppElement extends UmbHeaderAppButtonElement {

  #onClick() {
    // Handle click - open modal, navigate, etc.
    console.log('Header app clicked!');
  }

  render() {
    return html`
      <uui-button
        @click="${this.#onClick}"
        label="${this.manifest?.meta?.label}"
        compact
      >
        <uui-icon name="${this.manifest?.meta?.icon}"></uui-icon>
      </uui-button>
    `;
  }
}

export default MyHeaderAppElement;

一般的なユースケース

• クイックリンク: 外部ドキュメント、ヘルプリソース、または管理ツール
• グローバルアクション: 検索、通知、またはシステム全体の操作
• カスタムツール: 外部サービスやカスタム機能との統合

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