Tailwind Logo

XM Cloud のコンポーネントウィザードの設定 - その １ Select Page as a data source

XM CloudHeadless SXA

公開日: 2024-10-03

このブログでも何度か紹介をしているコンポーネントウィザードですが、実際の設定の違いを確認していきたいと思います。今回は未設定のコンポーネントと Select Page as a data source を設定した場合の違いです。

コンポーネントウィザードの設定

コンポーネントウィザードでコンポーネントを新しく作成する場合、Behaviors という項目がありデフォルトで何も設定されていません。

xmcsxacompwiz01.png

今回のシリーズではひとつづつ違いを確認していきます。

Select Page as a data source

まず初回は一番上にある Select Page as a data source の項目をチェックします。

xmcsxacompwiz02.png

作成されたコンポーネントの設定を確認していきます。

レンダリングの違い

設定の違いとしては、Experience Accelerator における Can select page as a data source がデフォルトでチェックされています。

xmcsxacompwiz03.png

これ以外の違いはありません。Headless SXA のコンポーネントで標準のコンポーネントでこのチェックボックスをチェックしているのは Title コンポーネントだけです。

動作の違いを確認

ではこのチェックボックスの動作の違いを確認していきましょう。まずコンポーネントを配置する際の動作に関しては、違いはありません。チェックをしていないコンテンツ、およびしている場合も同様に、ページのアイテムに対してデータソースが設定されます。

xmcsxacompwiz04.png

Experience Editor での違いはありませんでした。

それではコーディングにおける違いを確認するために、標準で提供されている Title コンポーネントおよび Page Content のコンポーネントのコードを比べてみたいと思います。

まずチェックされている Title コンポーネントですが、コードを抜粋すると以下のようにデータを取得しています。

TypeScript 
export const Default = (props: TitleProps): JSX.Element => {
  const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
  const { sitecoreContext } = useSitecoreContext();
  const text: TextField = datasource?.field?.jsonValue || {};

  const link: LinkField = {
    value: {
      href: datasource?.url?.path,
      title: datasource?.field?.jsonValue?.value,
    },
  };

  if (sitecoreContext.pageState !== 'normal') {
    link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
    if (!text?.value) {
      text.value = 'Title field';
      link.value.href = '#';
    }
  }

Visual Studio Code を利用して datasource をチェックすると、以下のようなデータの処理が行われています。

xmcsxacompwiz05.png

このデータソースは何を利用しているのでしょうか？実は、Title コンポーネントは GraphQL の部分で以下のような設定が含まれています。

GraphQL 
query TitleQuery($datasource: String!, $contextItem: String!, $language: String!) {
  datasource: item(path: $datasource, language: $language) {
	url {
	  path
	  siteName
	}
	field (name: "Title"){
	  jsonValue
	}
  }
  contextItem: item(path: $contextItem, language: $language) {
	url {
	  path
	  siteName
	}
	field (name: "Title"){
	  jsonValue
	}
  }
}
xmcsxacompwiz06.png

一方、PageComponentのコードは以下のようになり、propsデータを使ってコンポーネントを直接実装している。

TypeScript 
export const Default = (props: PageContentProps): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();
  const id = props.params.RenderingIdentifier;

  if (!(props.fields && props.fields.Content) && !sitecoreContext?.route?.fields?.Content) {
    return (
      <div className={`component content ${props.params.styles}`} id={id ? id : undefined}>
        <div className="component-content">
          <div className="field-content">[Content]</div>
        </div>
      </div>
    );
  }

  const field = (
    props.fields && props.fields.Content
      ? props.fields.Content
      : sitecoreContext?.route?.fields?.Content
  ) as RichTextField;

Title コンポーネントでは GraphQL で処理をしたデータソースの値を利用して、取得した値を元にレンダリングをしている、という違いが判りました。

まとめ

このチェックボックスを利用する場合、データの処理の方法が変わることを Title および Page Component のコードを見て確認をしました。GraphQL を利用してコンポーネントを実装したほうが良い場合、この Title のコンポーネントを参考にしてみてください。

関連タグ