umbraco-search-provider

Umbraco 検索プロバイダー

これは何ですか？

検索プロバイダーは、カスタム検索機能を Umbraco のバックオフィス検索バーに統合します。これにより、ユーザーは組み込みのコンテンツ、メディア、メンバーに加えて、カスタムデータソースを検索できます。このプロバイダーは、ユーザーのクエリに一致するページ分割された結果を返す search メソッドを実装します。

ドキュメント

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

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

関連する基盤スキル

• リポジトリパターン: 検索プロバイダーでのデータアクセス用

  • 参照スキル: umbraco-repository-pattern

• コンテキスト API: プロバイダー内でコンテキストにアクセスするため

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

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのデータを検索しますか？どのフィールドを返しますか？カスタム結果表示は必要ですか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + プロバイダークラスを作成します
4. 説明 - 作成された内容とテスト方法を示します

最小限の例

マニフェスト (manifests.ts)

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

const manifest: ManifestSearchProvider = {
  type: 'searchProvider',
  alias: 'My.SearchProvider',
  name: 'My Search Provider',
  api: () => import('./my-search-provider.js'),
  meta: {
    label: 'My Items',
  },
};

export const manifests = [manifest];

プロバイダーの実装 (my-search-provider.ts)

import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';

export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
  constructor(host: UmbControllerHost) {
    super(host);
  }

  async search(args: UmbSearchRequestArgs) {
    const { query } = args;

    // Fetch results from your data source
    const results = await this.#fetchResults(query);

    return {
      data: {
        items: results,
        total: results.length,
      },
    };
  }

  async #fetchResults(query: string): Promise<UmbSearchResultItemModel[]> {
    // Your search logic here - API call, local filtering, etc.
    const response = await fetch(`/api/my-items/search?q=${encodeURIComponent(query)}`);
    const data = await response.json();

    return data.items.map((item: any) => ({
      entityType: 'my-entity',
      unique: item.id,
      name: item.name,
      icon: 'icon-document',
      href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
    }));
  }
}

export default MySearchProvider;

検索結果アイテムモデル

// Each result must conform to UmbSearchResultItemModel
interface UmbSearchResultItemModel {
  entityType: string;    // Entity type identifier
  unique: string;        // Unique ID
  name: string;          // Display name
  icon?: string | null;  // Icon to display
  href: string;          // URL to navigate when clicked
}

リポジトリを使用するプロバイダー

import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { MyRepository } from './my-repository.js';

export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
  #repository: MyRepository;

  constructor(host: UmbControllerHost) {
    super(host);
    this.#repository = new MyRepository(this);
  }

  async search(args: UmbSearchRequestArgs) {
    const { data } = await this.#repository.search(args.query);

    const items: UmbSearchResultItemModel[] = data?.items.map((item) => ({
      entityType: 'my-entity',
      unique: item.id,
      name: item.name,
      icon: item.icon ?? 'icon-document',
      href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
    })) ?? [];

    return {
      data: {
        items,
        total: data?.total ?? 0,
      },
    };
  }
}

export default MySearchProvider;

コンテキストを使用した検索 (例: 特定の場所からの検索)

async search(args: UmbSearchRequestArgs) {
  const { query, searchFrom } = args;

  // searchFrom contains the entity to search from (if specified)
  const parentId = searchFrom?.unique;

  const results = await this.#fetchResults(query, parentId);

  return {
    data: {
      items: results,
      total: results.length,
    },
  };
}

検索リクエストの引数

プロパティ	説明
query	ユーザーが入力した検索語句
searchFrom	検索元のオプションのエンティティ (スコープ付き検索用)

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