Component Wizard Settings

When creating a new component in the Component Wizard, there is a Behaviors item with no default settings.

In this series, we will review the differences one by one.

Select Page as a data source

For the first time, check the Select Page as a data source item at the top.

We will check the settings of the created components.

Rendering differences

The difference is that Can select page as a data source in Experience Accelerator is checked by default.

There is no other difference: the only standard Headless SXA component that checks this box is the Title component.

Check the difference in operation

Now let's check the differences in the behavior of these checkboxes. First, there is no difference in behavior when placing components. Unchecked content, as well as checked, will have the data source set for the item on the page.

There was no difference in the Experience Editor.

To see the differences in coding, we will now compare the code of the standard Title and Page Content components.

First is the Title component that is being checked, but an excerpt of the code shows that the data is retrieved as follows

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 = '#';
    }
  }

Checking the datasource using Visual Studio Code, the following data is being processed.

What is the source of this data? Actually, the Title component contains the following settings in the GraphQL part.

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
	}
  }
}

On the other hand, the code for PageComponent is as follows, which directly implements the component using the props data.

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;

The Title component uses the data source values processed by GraphQL and renders them based on the retrieved values.

Summary

We confirmed by looking at the Title and Page Component code that the way data is handled changes when using this checkbox. If you prefer to implement components using GraphQL, please refer to the components in this Title.

Tags

• XM Cloud
• Headless SXA