外部コンポーネントの設定

初期化

createExternalRoot関数はHTMLElement(コンテナパラメータ)を受け取り、コードのマウントに使用できます。外部コンポーネントを初期化するには、render関数の外側に以下の初期化ロジックをコンポーネントのルート内に配置してください。

export default function createExternalRoot(rootElement) { console.log("Initializing component");

return { render(props) { console.log("Rendering component");

rootElement.innerHTML = "Hello world"; }, unmount() { rootElement.innerHTML = ""; }, }; }

レンダリング

render関数はContent Hubのdiv内の外部コンポーネントの内容をレンダリングし、外部コンポーネントのUIをドキュメントオブジェクトモデル(DOM)にマウントします。この関数は以下のデータを含むオブジェクトを受け取ります。

• name - ストリング。

• theme - フォントや色などのスタイリングプロパティを提供するマテリアルユーザーインターフェーステーマオブジェクト。

• client - 事前認証済みのJavaScript SDKクライアントの複雑なJSONのシリアライズおよびデシリアライズ機能の問題があるため、クエリクライアント を使用する際には独自のクライアントインスタンスを作成することをお勧めします。クライアントにアクセスするには、バンドル内にnpm: @sitecore/sc-contenthub-webclient-sdkを組み込み、createExternalRootに渡される2つ目の引数を使って認証済みクライアントインスタンスを作成します。 createExternalRootの新しい署名は以下の通りです:

  createExternalRoot( container: HTMLElement, clientBuilder: (constructor: typeof ContentHubClient) => IExtendedContentHubClient )

  !注すべてのクライアントを正しくインスタンス化できるわけではないことに注意してください。例としてentityFactoryクライアントがあります。このクライアントを使用するには、以下の手順を行ってください。

  await client.entityFactory.createAsync("definitionName");

• config - 外部コンポーネントに渡される オプション設定 (デフォルトは空のオブジェクト)。

• api - 読み取り専用値 (ExternalApi)。

• entity - entity | null。

• user - 次の節で説明する構造を持つ読み取り専用値(ExternalUser)。

• options - 次の節で説明する構造を持つオブジェクト。

• icon - Content HubのアイコンやHTML要素に追加するメソッドを持つオブジェクト。

!重要themeを直接顧客のMaterial UIコンポーネントに渡さないでください。Material UIバージョンはContent Hubで使われているものと異なる可能性があり、完全に互換性がない場合があります。代わりに、スタイリングにはCSS変数を使用してください。

もっと小さい束のサイズを選びましょう

外部コンポーネントバンドルにJSのSDKを含める際にバンドルサイズを小さくするために、clientBuilderから返される認証済みクライアントを使って希望するサブクライアントをインスタンス化してください。例えば、この方法は束ね手が到達不能なコードを特定・削除するのを防ぎます。

const client = clientBuilder (ContentHubClient); // Cannot be tree-shaken. await client.querying.queryAsync(...);

以下の例のクライアントの特定の部分、例えばqueryClientだけが必要だと束ね業者に伝えるために、以下の手順を行ってください。

const queryClient = new QueryingClient (clientBuilder ()); // Can be tree-shaken. await queryClient.queryAsync(...);

引数なしでclientBuilderを呼び出すと、アプリケーションがすでに使用している認証済みインスタンスが返されます。

ユーザーオブジェクトの構造

userオブジェクトは以下のデータを持っています。

export interface ExternalUser { id: number; userName: string; userGroups: Array; privileges: Array; identifier: string; userAvatar?: string; } オプションオブジェクトの構造

オプションオブジェクトには以下のデータがあります。

/** * Id of the entity in the current context. */ entityId?: number;

/** * Culture in the current context. */ culture?: CultureInfo;

/** * Indicates if the page is wrapped in a modal. */ isInModal?: boolean;

/** * Indicates if editing is active in the current context. * */ isEditing?: boolean;

/** * The editing mode for the current context. * * "readonly" | "edit" | "inherit" * * @defaultValue `"inherit"` */ editingMode?: EditingMode;

/** * Indicates if the component is currently rendered inside a sidebar. */ isInSidebar?: boolean;

/** * Indicates if the component is currently rendered inside a tabs component. */ isInTab?: boolean;

!注外部ページコンポーネントの実装例は、始めるための参考までに用意されています。

エンティティの性質

entityプロパティはconfigおよびthemeオブジェクトと同じレベルで渡されます。以下の情報で構成されています。

systemProperties: SystemProperties; properties: Record<string, Record<CultureInfo, unknown>>; relations: Record<string, Array>; permissions: Record<string, Optional>; renditions: Record<string, Array<string | URI>>; setPropertyValue("M.Localization.Entry.Template", "some value", "en-US"); setRelatedIds("AssetMediaToAsset", 45, 0)

利用可能なオブジェクトとメソッドには以下が含まれます:

• systemProperties
• 性質
• 関係
• 許可
• 演奏
• setPropertyValue
• アイコン
• setRelatedIds

APIオブジェクト

apiオブジェクトは**、Search**、選択、詳細コンポーネントとやり取りし、通知を表示するメソッドを保持しています。

api:{ search: { updateQuery: (searchIdentifier: string, query: string) => void; addFilters: (searchIdentifier: string, filters: Array) => void; updateFullTextFilter: (searchIdentifier: string, text: string) => void; clearFullTextFilter: (searchIdentifier: string) => void; clearAllFilters: (searchIdentifier: string) => void; getEventSearchIdentifier: (searchIdentifier: string) => string; }, notifier: { notifySuccess: (message: string) => void; notifyError: (message: string) => void; notifyWarning: (message: string) => void; notifyInfo: (message: string) => void; }, selection: { addToSelection: (ids: Array, selectionPoolIdentifier: string, subPoolId?: number) => void; removeFromSelection: (ids: Array, selectionPoolIdentifier: string, subPoolId?: number) => void; clearSelection: (selectionPoolIdentifier: string, subPoolId?: number, definitionNames?: Array) => void; }, details: { setEntitySource: (identifier: string, entityId: number) => void } }

以下の方法でフィルターを追加または削除できます:

::::タブ:::tab{title="Search"}

• updateQuery: (searchIdentifier: string, query: string) => void; - パラメータとして Search コンポーネント識別子と新しいクエリを受け取ります。更新されたクエリで新しい検索リクエストをトリガーします。
• addFilters: (searchIdentifier: string, filters: Array FieldFilterRequestResource>) => void; - パラメータとして Search コンポーネント識別子と設定すべきフィルター配列を受け取ります。更新されたフィルターで新しい検索リクエストをトリガーします。
• clearAllFilters: (searchIdentifier: string) => void; - 外部の Search コンポーネントで追加された視覚的検索フィルターを含むすべてのフィルターを消去します。
• updateFullTextFilter: (searchIdentifier: string, text: string) => void; - パラメータとして Search コンポーネント識別子と新しいテキスト値を受け取ります。更新された全文フィルターで新しい検索リクエストをトリガーします。
• clearFullTextFilter: (searchIdentifier: string) => void; - パラメータとして Search コンポーネント識別子を受け取ります;空の全文フィルターで新しい検索リクエストをトリガーします。
• getEventSearchIdentifier: (searchIdentifier: string) => string; - パラメータとして Search コンポーネント識別子を受け取ります; SEARCH_FINISHEDイベントに加入した際に識別子を返して確認します。
• activate(searchIdentifier: string): void - 指定された識別子で Search コンポーネントを起動し、検索リクエストの送信を開始する。
• addListener: (searchIdentifier: string, eventName: SearchEvent, listener: SearchEventListener) => DisposeSearchEventListener - 外部ユーザーがリスナーを追加でき、そのリスナーは聞いているイベントが発生したときに実行されます。現在利用可能なイベントは BEFORE_SEARCHのみです。このイベントのリスナーは { searchRequest: SearchRequest } という形のペイロードオブジェクトを受け取り、リスナー内のコードがこの SearchRequestを修正します。 false がどのリスナーから返されると、検索リクエストはキャンセルされます。 addListener メソッドは、ユーザーが必要に応じて呼び出せるディスポーズ関数を返します。このディスポスメソッドは呼び出すと、追加されたリスナーを削除します。