1. Components

コンポーネント内で動的プレースホルダーを使う

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

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

動的なプレースホルダーを使って、ページ上の各コンポーネントごとにユニークなプレースホルダーキーを作成できます。場合によっては、例えばColumn Splitterコンポーネントに列を追加する場合など、単一のコンポーネント内で複数のプレースホルダーキーが生成されることもあります。

このウォークスルーでは、動的プレースホルダーを使用するようにコンポーネントを設定する方法について説明します:

  1. コンポーネントアイテムにIsRenderingsWithDynamicPlaceholdersプロパティを追加します。

  2. IDynamicPlaceholderベーステンプレートを、興味のあるコンポーネントのRendering Parametersテンプレートに追加してください。

  3. プレースホルダー設定項目で、ワイルドカードを使ってプレースホルダーキーを定義します。

  4. プレースホルダー設定の項目をコンポーネントにLinkしてください。

  5. コンポーネントTSXファイルで、プレースホルダーキーの値をプレースホルダー設定項目で定義されているものと一致するように設定します。

コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加します

動的なプレースホルダーやその中のコンポーネントの解決を可能にするために、コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加してください。

コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加するには:

  1. コンテンツツリーで /sitecore/Layout/Renderings/Feature/Headless Experience Acceleratorに移動し、興味のあるコンポーネントをクリックしてください。

  2. Other propertiesフィールドでIsRenderingsWithDynamicPlaceholdersプロパティを入力し、その値をtrueに設定します。

  3. 変更を保存してください。

IDynamicPlaceholderベーステンプレートをレンダリングパラメータテンプレートに追加します

IDynamicPlaceholderベーステンプレートをコンポーネントのレンダリングパラメータテンプレートに追加すると、DynamicPlaceholderIDという新しいパラメータが付与されます。このパラメータは、プレースホルダーキーにIDを動的に割り当てます。

IDynamicPlaceholderベーステンプレートを追加するには:

  1. コンテンツツリーでRendering Parametersフォルダに移動し、レンダリングパラメータテンプレートを選択します。

    注記

    フォルダの場所はインスタンスによって異なる場合がありますが、通常は /sitecore/Templates/Featureで見つかります。

  2. Contentタブで/Templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parametersへ移動してください。

  3. IDynamicPlaceholderアイテムをダブルクリックしてSelectedセクションに移動します。以下のスクリーンショットは、組み込みのContainerコンポーネントのレンダリングパラメータテンプレートを示しています。

    The IDynamicPlaceholder base template

ワイルドカードを使ってプレースホルダーキーを定義します

プレースホルダーキーの定義の一部としてワイルドカードを使います。その結果、コンポーネントのインスタンスがプレースホルダーに追加されるたびに、DynamicPlaceholderIDパラメータは一意なIDを生成し、プレースホルダーキー値で使われたワイルドカード(例えばmyrendering-1、myrendering-2、など)を動的に置き換えます。

プレースホルダーキーの定義:

  1. コンテンツツリーで、動的プレースホルダーを有効にしたいコンポーネントのプレースホルダー設定項目に移動します。コンポーネントがどこに保管されているかによって、設定項目は以下のいずれかの場所にあるかもしれません。

    • /sitecore/Layout/Placeholder Settings/Feature.

    • /sitecore/Layout/Placeholder Settings/Project.

    注記

    設定項目がまだ存在しない場合は、作成してコンポーネントの名前を付けてください。

  2. 設定項目をクリックし、Placeholder KeyフィールドでコンポーネントTSXファイルで定義されたコンポーネント名を入力し、その後に -{*}を入力します。例えばmyrendering-{*}。

  3. 変更を保存してください。

プレースホルダー設定の項目をコンポーネントにLinkしてください

プレースホルダー内のコンポーネントをレンダリングするには、レイアウトサービスを通じてプレースホルダー設定の項目をコンポーネントとリンクしてください。

プレースホルダー設定項目をコンポーネントにリンクするには:

  1. コンテンツツリーでsitecore/Layout/Renderings/Featureに移動し、コンポーネントが入っているフォルダを開き、そのコンポーネントをクリックします。

  2. Layout Service Placeholders欄で、以前設定したプレースホルダー設定項目に移動します。

  3. プレースホルダー設定項目をダブルクリックしてSelectedペインに追加してください。

コンポーネントTSXファイルでプレースホルダーキーを定義します

コンポーネントTSXファイルでプレースホルダーコンポーネントを定義する際、Placeholder Keyフィールドの名前をphKey定数に渡す必要があります。ワイルドカードの代わりに、レンダリングパラメータの動的プレースホルダーIDを使う必要があります。

コード例:

const phKey = `myrendering-${props.params.DynamicPlaceholderId}`;
<Placeholder name={phKey} rendering={props.rendering} />
この記事を改善するための提案がある場合は、 お知らせください!