umbraco-user-profile-app

Umbraco ユーザープロフィールアプリ

これは何ですか？

ユーザープロフィールアプリは、現在のユーザーのプロフィールセクションに表示されるカスタムビュー/タブです。ユーザープロフィール領域に、設定、アクティビティログ、連携アカウント、その他のユーザー固有の設定など、カスタム機能を追加できます。

ドキュメント

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

• 拡張機能の種類: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types
• Foundation: 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

関連する Foundation スキル

• Umbraco Element: プロフィールアプリの要素を実装するため

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

• Context API: ユーザーコンテキストにアクセスするため

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

ワークフロー

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

最小限の例

マニフェスト (manifests.ts)

import type { ManifestUserProfileApp } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestUserProfileApp = {
  type: 'userProfileApp',
  alias: 'My.UserProfileApp.Preferences',
  name: 'User Preferences',
  element: () => import('./preferences-app.element.js'),
  meta: {
    label: 'Preferences',
    pathname: 'preferences',
  },
};

export const manifests = [manifest];

プロフィールアプリの要素 (preferences-app.element.ts)

import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

@customElement('my-preferences-app')
export class MyPreferencesAppElement extends UmbLitElement {
  @state()
  private _userName?: string;

  @state()
  private _emailNotifications = true;

  @state()
  private _darkMode = false;

  constructor() {
    super();

    this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
      this.observe(context.currentUser, (user) => {
        this._userName = user?.name;
      });
    });
  }

  #handleEmailToggle() {
    this._emailNotifications = !this._emailNotifications;
    this.#savePreferences();
  }

  #handleDarkModeToggle() {
    this._darkMode = !this._darkMode;
    this.#savePreferences();
  }

  async #savePreferences() {
    // Save to local storage or API
    localStorage.setItem('myPreferences', JSON.stringify({
      emailNotifications: this._emailNotifications,
      darkMode: this._darkMode,
    }));
  }

  render() {
    return html`
      <uui-box headline="Preferences for ${this._userName}">
        <div class="preference-item">
          <uui-toggle
            label="Email Notifications"
            ?checked=${this._emailNotifications}
            @change=${this.#handleEmailToggle}
          ></uui-toggle>
          <span>Receive email notifications for content updates</span>
        </div>

        <div class="preference-item">
          <uui-toggle
            label="Dark Mode"
            ?checked=${this._darkMode}
            @change=${this.#handleDarkModeToggle}
          ></uui-toggle>
          <span>Use dark theme in the backoffice</span>
        </div>
      </uui-box>
    `;
  }

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

    .preference-item {
      display: flex;
      align-items: center;
      gap: var(--uui-size-space-4);
      padding: var(--uui-size-space-4) 0;
      border-bottom: 1px solid var(--uui-color-border);
    }

    .preference-item:last-child {
      border-bottom: none;
    }
  `;
}

export default MyPreferencesAppElement;

declare global {
  interface HTMLElementTagNameMap {
    'my-preferences-app': MyPreferencesAppElement;
  }
}

アクティビティログアプリ

@customElement('my-activity-log-app')
export class MyActivityLogAppElement extends UmbLitElement {
  @state()
  private _activities: Array<{ action: string; date: string }> = [];

  async connectedCallback() {
    super.connectedCallback();
    await this.#loadActivities();
  }

  async #loadActivities() {
    // Fetch user activities from API
    const response = await fetch('/api/user/activities');
    this._activities = await response.json();
  }

  render() {
    return html`
      <uui-box headline="Recent Activity">
        <uui-table>
          <uui-table-head>
            <uui-table-head-cell>Action</uui-table-head-cell>
            <uui-table-head-cell>Date</uui-table-head-cell>
          </uui-table-head>
          ${this._activities.map(
            (activity) => html`
              <uui-table-row>
                <uui-table-cell>${activity.action}</uui-table-cell>
                <uui-table-cell>${activity.date}</uui-table-cell>
              </uui-table-row>
            `
          )}
        </uui-table>
      </uui-box>
    `;
  }
}

連携アカウントアプリ

const manifest: ManifestUserProfileApp = {
  type: 'userProfileApp',
  alias: 'My.UserProfileApp.ConnectedAccounts',
  name: 'Connected Accounts',
  element: () => import('./connected-accounts.element.js'),
  meta: {
    label: 'Connected Accounts',
    pathname: 'connected-accounts',
  },
};

メタプロパティ

プロパティ	説明
label	プロフィールに表示されるタブラベル
pathname	ディープリンク用の URL パスセグメント

ユーザーコンテキストへのアクセス

import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
  this.observe(context.currentUser, (user) => {
    // Access user properties
    console.log(user?.name, user?.email, user?.unique);
  });
});

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