umbraco-notifications

Umbraco 通知

これは何ですか？

通知は、Context API を介して利用される UMB_NOTIFICATION_CONTEXT を通じて、Umbraco バックオフィスでユーザーにフィードバックを提供します。peek() メソッドは、さまざまな種類（positive、negative、warning）の一時的なトーストスタイルの通知を表示します。通知は UI に一時的に表示され、自動的に消えるため、操作の確認やエラーメッセージに最適です。

ドキュメント

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

• Context API: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api
• Consume Context: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api/consume-a-context
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どの種類ですか？ 成功/エラー/警告？ シンプルな内容ですか、カスタム内容ですか？
3. コードを生成 - 最新のドキュメントに基づいて通知の使用法を実装します
4. 説明 - 作成された内容と、通知がいつ表示されるかを示します

最小限の例

基本的な通知

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyElement extends UmbLitElement {
  #notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;

  constructor() {
    super();

    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
      this.#notificationContext = context;
    });
  }

  showSuccess() {
    this.#notificationContext?.peek('positive', {
      data: { message: 'Operation completed successfully!' }
    });
  }
}

通知の種類

// Success notification
this.#notificationContext?.peek('positive', {
  data: { message: 'Saved successfully!' }
});

// Error notification
this.#notificationContext?.peek('danger', {
  data: { message: 'Something went wrong!' }
});

// Warning notification
this.#notificationContext?.peek('warning', {
  data: { message: 'Please review your changes.' }
});

見出し付きの通知

this.#notificationContext?.peek('positive', {
  data: {
    headline: 'Success!',
    message: 'Your document has been published.'
  }
});

コントローラーでの使用

import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyController extends UmbControllerBase {
  async performAction() {
    try {
      // Do something
      const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
      context?.peek('positive', {
        data: { message: 'Action completed!' }
      });
    } catch (error) {
      const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
      context?.peek('danger', {
        data: {
          headline: 'Error',
          message: error.message
        }
      });
    }
  }
}

通知付きのボタン

import { html } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyElement extends UmbLitElement {
  #notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;

  constructor() {
    super();
    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
      this.#notificationContext = context;
    });
  }

  #onClick() {
    this.#notificationContext?.peek('positive', {
      data: { message: 'Button clicked!' }
    });
  }

  render() {
    return html`
      <uui-button @click=${this.#onClick}>
        Click me
      </uui-button>
    `;
  }
}

通知付きの非同期操作

async saveData() {
  try {
    const response = await fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify(this.data)
    });

    if (response.ok) {
      this.#notificationContext?.peek('positive', {
        data: {
          headline: 'Saved',
          message: 'Your changes have been saved.'
        }
      });
    } else {
      this.#notificationContext?.peek('danger', {
        data: {
          headline: 'Save Failed',
          message: 'Could not save your changes.'
        }
      });
    }
  } catch (error) {
    this.#notificationContext?.peek('danger', {
      data: {
        headline: 'Error',
        message: 'An unexpected error occurred.'
      }
    });
  }
}

アクションハンドラーでの通知

import { UmbMenuItemAction } from '@umbraco-cms/backoffice/menu';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyAction extends UmbMenuItemAction {
  async execute() {
    const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);

    context?.peek('positive', {
      data: { message: 'Action executed!' }
    });
  }
}

通知による検証

validateAndSave() {
  if (!this.title) {
    this.#notificationContext?.peek('warning', {
      data: {
        headline: 'Validation Error',
        message: 'Title is required.'
      }
    });
    return;
  }

  if (this.title.length < 3) {
    this.#notificationContext?.peek('warning', {
      data: {
        message: 'Title must be at least 3 characters.'
      }
    });
    return;
  }

  this.save();
}

通知の種類

positive - 成功メッセージ（緑）

peek('positive', { data: { message: 'Success!' } })

danger - エラーメッセージ（赤）

peek('danger', { data: { message: 'Error occurred!' } })

warning - 警告メッセージ（オレンジ/黄）

peek('warning', { data: { message: 'Please review!' } })

主要な概念

UMB_NOTIFICATION_CONTEXT: 通知用のグローバルコンテキスト

peek() メソッド: 一時的な通知を表示

トーストスタイル: 自動的に消える UI 通知

データ構造:

• headline（オプション） - 太字のタイトルテキスト
• message（必須） - 通知の本文テキスト

コンテキストの利用: 購読には consumeContext() を、一度だけの使用には getContext() を使用します

ユースケース:

• 保存の確認
• エラーメッセージ
• 検証の警告
• 操作のフィードバック
• 操作のステータス

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