Headless SXA - コンポーネントウィザードを利用する

公開日 :

Sitecore のコンポーネントを作成することで、簡単にドラッグ＆ドロップのコンポーネントを作成することができます。今回はこのコンポーネントを作るときに便利なウィザードを紹介します。以前に紹介している手順は以下の通りです。

ウィザードを利用する準備

レンダリングを利用してコンポーネントを作成しますが、その受け皿となるフォルダを事前に用意しておくことで、既存のコンポーネントと分けて管理することができます。今回は Demo というフォルダを以下のように作成していきます。

  • /sitecore/layout/Renderings/Feature/Demo

  • /sitecore/system/Settings/Feature/Demo

  • /sitecore/templates/Branches/Feature/Demo

  • /sitecore/templates/Feature/Demo

上記の各機能に対して、Demo という同じ名前のフォルダを用意することで、ウィザードが必要なデータを配置していきます。

ウィザードの利用

今回は Headless SXA のコンポーネントを作成していくため、以下の手順で進めていきます。まず、/sitecore/layout/Renderings/Feature/Demo のフォルダで右クリックをして、 Insert - Component のメニューを選択してください。

random desc

すぐにダイアログが表示されます。今回は、Test というコンポーネント名とします。

random desc

続いてデータソースの画面に切り替えます。この画面では Rendering template を Templates/Foundation/JavaScript Services/Json Rendering に変更してください。

random desc

完了すると、以下のようにレンダリングのアイテムが作成されています。

random desc

作成されたレンダリングの定義で、Experience Accelerator のグループにある Other Properties に IsAutoDatasourceRendering の項目を追加して true を設定してください。

random desc

これで必要なアイテムの準備ができました。

コンポーネントの作成

今回は最もシンプルなコンポーネントとして、以下のファイルを Next.js の Components のフォルダに作成します。作成をするのは今回作成をしたコンポーネントの名前と同じファイルで作成します。

import React from 'react';
import { Field, Text } from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
  TestText: Field<string>;
}

type TestProps = {
  params: { [key: string]: string };
  fields: Fields;
};

export const Default = (props: TestProps): JSX.Element => {
  return (
    <div className={`component myrendering ${props.params.styles}`}>
      <div className="component-content">
        <div>
          <strong>テスト：</strong>
          <Text field={props.fields.TestText} />
        </div>
      </div>
    </div>
  );
};

このコードは、TestText というデータをテンプレートから取得する形になります。このフィールドはウィザードで作成した際には作成されていないため、ウィザードが作成した /sitecore/templates/Feature/Demo/Data Source/Test にフィールドを追加します。

random desc

これでコンポーネントの準備が完了しました。

サイトで使えるようにする

コンポーネントを作成したあと、どのサイトで利用できるのかを定義する必要があります。今回はサンプルのサイトの、Presentation - Available Rendergins に Demo というグループを作成して、作成したコンポーネントを利用できるように追加します。

random desc

追加をした後、Experience Editor を開くとコンポーネントが表示されているのがわかります。

random desc

実際にドラッグ＆ドロップでコンポーネントを設定すると、見たまま編集が有効になったコンポーネントを展開することができました。

random desc

まとめ

今回はウィザードを利用して、最小限の手順でコンポーネントが有効になる手順を紹介しました。これにより、画面上での動作確認をするための手順を簡単にすることができ、あとはデータテンプレートの拡張、コンポーネントのコードを操作、という形で作業することができるようになります。最小限の設定を素早くして、コンポーネントを効率よく開発していくには、このウィザードは非常に便利です。