XM Cloud のコンポーネントが利用するフォルダの設定 : Haramizu.com

今回はみたまま編集ツールである Pages および Experience Editor でコンポーネントを置いた時に関連するフォルダの設定について確認をします。

今回利用するサンプルのコンポーネントは、前回の記事で作成したコンポーネントをそのまま利用します。

Image コンポーネントの値を確認

画像を配置するコンポーネントを Drag & Drop で置いたとき、そのアイテムの下作成された Data フォルダの下に作成をするか、もしくはサイト全体の Data の下に作成をしているフォルダの下にアイテムを作成します。

この動きを制御しているのが、Editor Options の下にある Datasource location の項目になります。Image コンポーネントは以下のようになっています。

ここで記載されている Image Folder の定義はどこにあるでしょうか？これは、/sitecore/templates/Feature/JSS Experience Accelerator/Media/Image Folder のパスに作成されています。

同様の動きを Sample に対して用意をする際には、Sample のアイテムを保存するフォルダのテンプレートを用意して、それをフォルダとして利用できるようにする手続きが必要となります。

Sample Folder の作成

まず Sample のアイテムを保存することができる Folder テンプレートを作成します。今回は /sitecore/templates/Feature/Sites/Data Source の下で、New Template をクリックします。

Experience Editor の Builder Options のタブを開いて、Standard values のボタンをクリックして __Standard Values のアイテムを作成します。そして、この __Standard Values のアイテムに対して、Configure - Insert Option から Assign をクリックし、Standard アイテムのテンプレートおよびフォルダ自らを追加できるようにします。

最後に、この作成したテンプレートを利用して、サイトの直下にある Data フォルダに Sample フォルダを作成します。

レンダリングを更新する

すでに Sample Folder のテンプレート並びにフォルダ自体が出来上がっているので、以下のコードを Sample のレンダリング、Editor Options の中にある Datasource Location のフィールドに設定をします。

動作確認

実際にページでコンポーネントを配置したあと、Datasource の確認をします。Data フォルダに入っている Sample 1 を指示していることが分かります。

続いて Editor Options の中にある Open Properties after Add の項目を Yes とし、Experience Accelerator の中にある IsAutoDatasourceRendering の項目を削除してみます。これでコンポーネントを配置したときにどのアイテムを選択するか、その際にアイテムを作成する先のフォルダの指定が表示されます。

まとめ

今回はコンポーネントを配置したときに、そのコンポーネントが必要とするアイテムの保存場所を指定する項目、Datasource Location に関して確認をしました。Data にデフォルトの値を作成する以外にも、先にダイアログを指定して、アイテムを別途作成するなどもこれで可能になります。