Tailwind Logo

スタンダードバリュー - その2 レイアウトの設定

Experience Manager (XM)

公開日: 2022-04-22

前回はカスタムのルートアイテムを作成しました。テンプレートを作成しただけではページの表示はできないため、レイアウトを割り当てる必要があります。今回はレイアウトを作成して、実際に編集、プレビューができるように作業を進めて行きます。

レイアウトを作成する

今回のプロジェクトでは、/sitecore/layout/Layouts/Project/sitecoredemo-jp の下には1つのレイアウトが用意されています。

layout01.png

新しいレイアウトの作成手順を確認するために、新規作成をします。上記の画面で JSS Layout のボタンをクリックして新しい Base Layout を作成します。作成したレイアウトに対して、プレースホルダーを設定してください。今回は以前と同じく3つの項目を設定しておきます。

layout02.png

続いて前回作成をしたサンプルのアイテムを利用してレイアウトのテストを進めて行きます。アイテムを選択して、プレゼンテーション にある 詳細 をクリックしてください。

layout03.png

レイアウトのダイアログが開きます。

layout04.png

デフォルトデバイスの編集ボタンをクリックすると以下のダイアログに切り替わります。レイアウトに関しては先ほど作成をしたレイアウトを指定します。

layout05.png

続いて プレースホルダー設定 に切り替えます。ここで追加ボタンをクリックすると以下のダイアログが表示され、プレースホルダーのキーおよび設定を入れることができます。ここでは jss-main を追加します。

layout06.png

今回の仕上がりは以下のようになります。

layout07.png

これでレイアウトの設定が完了です。サンプルのアイテムを指定して、エクスペリエンスエディターで開くと以下のように表示されます。

layout08.png

レイアウトの割り当てが出来ました。毎回アイテムを作るたびにこの作業をするのは大変です。ということでスタンダードバリューに設定していきます。

スタンダードバリューに設定する

前回作成をしたテンプレートは以下のパスになります。

  • /sitecore/templates/Project/sitecoredemo-jp/Pages/Home

このアイテムを選択して、ビルダーオプション のスタンダードバリューを選択します。スタンダードバリューのアイテムを選択している状態で、上記で設定をしたレイアウトの手順を同じように設定してください。

layout09.png

続いて、今回のホームアイテムには必ず Hero のコントロールを設定したいと思います。スタンダードバリューのアイテムの プレゼンテーション - 詳細 を開きます。

layout10.png
共有のレイアウト のタブを開いている状況で、デフォルトデバイスの 編集 をクリックしてください。ダイアログが表示されたところで、コントロールタブに切り替えます。layout11.png

追加ボタンをクリックすると、レンダリングの選択、下にプレースホルダーの指定が可能な項目があります。ここでは Hero コントロールを指定、 jss-main のプレースホルダーを指定します。また、選択後にプロパティ ダイアログ ボックスを開く のチェックをして 選択 ボタンをクリックします。

layout12.png

ダイアログが切り替わり、データソースを指定することが可能となります。データソースとしてすでに用意されているものを今回は指定しました。

layout13.png

テストとして新しいアイテムを作成します。前回と同じ手順で Home Test 2 という新しいアイテムを作成して、エクスペリエンスエディターを開いてページが表示されればレイアウトを割り当てることができたことになります。

layout14.png

まとめ

前回作成をしたテンプレートを利用して、レイアウトを割り当てることでエクスペリエンスエディターで編集することができるようになりました。アイテムとしてデータを持つだけであればこの設定は不要ですが、ページとして管理するためにはレイアウトの設定が必要となります。

参考情報

関連タグ