Content Hubユーザー
ページ
ページコンポーネント
外
外部コンポーネントを構成する

外部コンポーネントを構成する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JavaScriptバンドルをアップロードする前に、インターフェースに次の機能が含まれていることを確認してください。

renderは、コンポーネントがレンダリングされ、データとインタラクションのオプションを持つパラメータとして1つのオブジェクトを受け取るときに実行されます。
unmountこれは、コンポーネントがアンマウントされたときに実行されます。

メモ

初期化する

createExternalRoot関数はHTMLElement(コンテナパラメータ)を受け取り、コードのマウントに使用できます。Externalコンポーネントを初期化するには、次の初期化ロジックをコンポーネントのルート内、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関数は、Externalコンポーネントの内容をin Content Hubのdiv内にレンダリングし、外部コンポーネントのUIをドキュメントオブジェクトモデル (DOM) にマウントします。この関数は、次のデータを含むオブジェクトを受け取ります。

name -糸。
theme - マテリアルユーザーインターフェーステーマオブジェクトフォントや色などのスタイル設定プロパティを提供します。
client - 複雑なJSONをシリアル化および逆シリアル化する事前認証済みJavaScript SDKクライアントの機能に問題があるため、クエリクライアントを使用する場合は、独自のクライアントインスタンスを作成することをお勧めします。クライアントにアクセスするには、バンドルに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をお客様のマテリアルUIコンポーネントに直接渡さないでください。マテリアル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<string>;
    privileges: Array<string>;
    identifier: string;
}

optionsオブジェクトには、次のデータがあります。

/**
       * 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<number>>;
permissions: Record<string, Optional<boolean>>;
renditions: Record<string, Array<string | URI>>;
setPropertyValue("M.Localization.Entry.Template", "some value", "en-US");
setRelatedIds("AssetMediaToAsset", [45], 0)

使用可能なオブジェクトとメソッドには、次のものがあります。

システムプロパティ

このオブジェクトは、現在のエンティティのシステムプロパティを保持します。

{
  createdBy: 6,
  id: 120,
  identifier: "kadu7AeZQym6hlFnp_mP8A",
  ...
}

プロパティ

このオブジェクトは、現在のエンティティのプロパティを保持します。

{
 Title: {
  Invariant: "title"
 },
 FileName: {
  Invariant: "file name"
 },
 Description: {
  "en-US" : "English description",
  "nl-BE" : "Dutch description"
 }
 ...
}

関係

このオブジェクトは、現在のエンティティのプロパティを保持します。

{
  AssetMediaToAsset: [1029],
  AssetToAssetSelfRelation_0: [],
  AssetToAssetSelfRelation_1: [33322],
  MasterFile: [35687],
  ...
}

権限

このオブジェクトは、現在のエンティティのアクセス許可を保持します。

{
  addtocollection: true,
  addversion: true,
  approve: true,
  archive: true,
  ...
}

レンディション

このオブジェクトは、現在のエンティティのレンディションを保持します。

{
  bigthumbnail: ['https://localhost:5009/api/delivery/local-62f30fcc…id=6&rendition=bigthumbnail&signature=tpUrpTdJwxE']
  created_by: ['https://localhost:5009/api/delivery/local-d25e003a…d=35781&rendition=thumbnail&signature=yDa_TROvvnw']
  downloadAlternative: ['https://localhost:5009/api/delivery/local-6e770863…ndition=downloadAlternative&signature=OoDGgd7aMw8']
  downloadOriginal: ['https://localhost:5009/api/delivery/local-6e770863…&rendition=downloadOriginal&signature=V-BQoLc6jTI']
  downloadPreview: ['https://localhost:5009/api/delivery/local-01d326bd…6&rendition=downloadPreview&signature=aXPZQVw1kBE']
  ...
}

setPropertyValue (プロパティ値)

これは、エンティティのプロパティの値を変更または設定する方法です。プロパティの名前、値、およびオプションのカルチャを受け取ります。

setPropertyValue("M.Localization.Entry.Template", "some value", "en-US");

アイコンコンポーネント

これは、Content Hubで使用されるSVGアイコンを読み込む方法です。アイコンは、render関数が受け取るメインオブジェクトに渡されるオブジェクトです。このオブジェクトには、insertContentHubIconInElementというメソッドがあり、アイコンをレンダリングするにはアイコン名とHTMLElementが必要です。

icon: { insertContentHubIconInElement: (icon: string, htmlElement: HTMLElement) => Promise<void> };

setRelatedIdsの

これは、エンティティのリレーションの値を変更または設定する方法です。リレーション名、entityIdsの配列、およびオプションのリレーションロールを受け取ります。

 setRelatedIds("AssetMediaToAsset", [45], 0)

setRelatedIdsメソッドに渡すことができるリレーションの役割は数値です。

Parent = 0,
Child = 1

大事な

Externalコンポーネントが詳細ページで使用されていない場合、エンティティはnullされます。カスタムコードでは、プロパティが存在し、nullされていないことを確認します。

APIオブジェクト

apiオブジェクトには、Search、Selection、およびDetailsコンポーネントと対話し、通知を表示するメソッドがあります。

```json
api:{
    search: {
      updateQuery: (searchIdentifier: string, query: string) => void;
      addFilters: (searchIdentifier: string, filters: Array<FieldFilterRequestResource>) => void;
      updateFullTextFilter: (searchIdentifier: string, text: string) => void;
      clearFullTextFilter: (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<number>, selectionPoolIdentifier: string, subPoolId?: number) => void;
     removeFromSelection: (ids: Array<number>, selectionPoolIdentifier: string, subPoolId?: number) => void;
     clearSelection: (selectionPoolIdentifier: string, subPoolId?: number, definitionNames?: Array<string>) => void;
    },
    details: {
      setEntitySource: (identifier: string, entityId: number) => void
    }
  }

次の方法では、フィルターを追加または削除できます。

updateQuery: (searchIdentifier: string, query: string) => void; - Searchコンポーネント識別子と新しいクエリをパラメータとして受け取り、更新されたクエリで新しい検索リクエストをトリガーします。
addFilters: (searchIdentifier: string, filters: Array FieldFilterRequestResource>) => void; - パラメータとして、Searchコンポーネント識別子と設定するフィルタの配列を受け取り、更新されたフィルタを使用して新しい検索リクエストをトリガーします。
updateFullTextFilter: (searchIdentifier: string, text: string) => void; - Searchコンポーネント識別子と新しいテキスト値をパラメータとして受け取り、更新された全文検索フィルタを使用して新しい検索リクエストをトリガーします。
clearFullTextFilter: (searchIdentifier: string) => void; - Searchコンポーネント識別子をパラメータとして受け取り、空の全文検索フィルタで新しい検索要求をトリガします。
getEventSearchIdentifier: (searchIdentifier: string) => string; - Searchコンポーネント識別子をパラメータとして受け取り、SEARCH_FINISHED eventにサブスクライブしたときにチェックする識別子を返します。
activate(searchIdentifier: string): void - 指定した識別子でSearchコンポーネントをアクティブ化し、検索要求の送信を開始します。
addListener: (searchIdentifier: string, eventName: SearchEvent, listener: SearchEventListener) => DisposeSearchEventListener - 外部ユーザーは、リッスンしているイベントが発生したときに実行されるリスナーを追加できます。現在利用可能なイベントはBEFORE_SEARCHのみです。このイベントのリスナーは、{ searchRequest: SearchRequest } 形式のペイロードオブジェクトを受け取り、リスナー内のコードによってこのSearchRequestを変更します。リスナーからfalseが返されると、検索要求はキャンセルされます。 addListenerメソッドは、ユーザーが必要なときに呼び出すことができる破棄関数を返します。このdisposeメソッドが呼び出されると、追加されたリスナーが削除されます。

Selectionコンポーネントでは、次の方法を使用できます。

addToSelection: (ids: Array number>, selectionPoolIdentifier: string, subPoolId?: number) => void; - 追加するエンティティidsの配列、選択プールの識別子、およびアセットの選択を表すオプションのsubPoolIdを受け取ります。
removeFromSelection: (ids: Array number>, selectionPoolIdentifier: string, subPoolId?: number) => void; - 削除するエンティティidsの配列、選択プールの識別子、およびアセットの選択を表すオプションのsubPoolIdを受け取ります。
clearSelection: (selectionPoolIdentifier: string, subPoolId?: number, definitionNames?: Array string>) => void; - 選択プールの識別子、アセットの選択を表すオプションのsubPoolId 、および選択をクリアする定義名のオプションの配列を受け取ります。定義名が渡されない場合は、すべての選択がクリアされます。

手記

subPoolIdプロパティを指定しない場合、項目は識別子selectionPoolIdentifierで標準プールに追加されます。

このメソッドは、指定されたエンティティを読み込みます。

setEntitySource: (identifier: string, entityId: number) => void - 最初の引数として詳細コンポーネント識別子を、2番目の引数としてエンティティIDを受け入れます。戻り値はありません。詳細コンポーネントのエンティティソースがFrom eventに設定されている場合、コンポーネント識別子を使用して外部コンポーネントからsetEntitySourceメソッドが実行されるたびに、指定したエンティティがロードされます。

次の方法は、エンティティを再ロードするために使用されます。エンティティが現在詳細コンポーネントで編集されている場合、リロードは行われません。リロードを強制するには、メソッドに2番目のブールパラメーターを追加します。

reloadEntity: (entityId: number, forceReload?: boolean) => Promise<void>; - 次の例に示すように、特定のエンティティが編集中にリロードを強制する( trueに設定されている場合)。
context.api.details.reloadEntity(<ENTITY_ID>, true)

次のNotifierイベントを使用できます。

notifySuccess - 通知に表示するテキストを受け取ります (例: Entity saved)。
notifyError - 通知に表示するテキストを受け取ります (例: Save failed)。
notifyWarning- 通知に表示するテキストを受け取ります (例: Download partially created)。
notifyInfo - 通知に表示するテキストを受け取ります (例: Saved search results changed)。

この記事を改善するための提案がある場合は、お知らせください!

外部コンポーネントを構成する

初期化する

レンダ

エンティティ プロパティ

システムプロパティ

プロパティ

関係

権限

レンディション

setPropertyValue (プロパティ値)

アイコンコンポーネント

setRelatedIdsの

APIオブジェクト

エンティティプロパティ