Tailwind Logo

Check the behavior of the LinkList component

XM Cloud

Published: 2024-03-05

In this article, we will check how the LinkList component, a component of Headless SXA, is defined.

Creation of content tree for testing

This time, the content is empty, but we will create the following content tree with items that are set to the title of the page and the title used in Navigation.

linklist01.png

This item is used to create one linked list.

linklist02.png

Place the LinkList component on the empty top page. You will get the items under the tree and see the list displayed.

linklist03.png

Check the source code of the component

If you check the code of this component, you will see that it is working as described in the file src\components\LinkList.tsx. The main movement of the code is as follows

TypeScript
export const Default = (props: LinkListProps): JSX.Element => {
  const datasource = props.fields?.data?.datasource;
  const styles = `component link-list ${props.params.styles}`.trimEnd();
  const id = props.params.RenderingIdentifier;

  if (datasource) {
    const list = datasource.children.results
      .filter((element: ResultsFieldLink) => element?.field?.link)
      .map((element: ResultsFieldLink, key: number) => (
        <LinkListItem
          index={key}
          key={`${key}${element.field.link}`}
          total={datasource.children.results.length}
          field={element.field.link}
        />
      ));

As for the value returned, if datasource is specified, the above list is output, and in that case, the link items are processed using LinkListItem.

TypeScript
    return (
      <div className={styles} id={id ? id : undefined}>
        <div className="component-content">
          <Text tag="h3" field={datasource?.field?.title} />
          <ul>{list}</ul>
        </div>
      </div>
    );

Note that if the data source is empty, the code just displays "Link List" using the H3 tag Link List.

The definition of LinkListProps used in this default is also described above.

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

Now, where does this component get its data from? This is described in the component's rendering process.

Check rendering

The item that defines the actual rendering is /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Navigation/LinkList. If you look at the GraphQL section of this item, you will see that the code is listed.

linklist04.png

What kind of data will be returned when this GraphQL code is executed? In this case, datasource and languge are defined as Query variables as follows. datasource is the item ID of the list.

JSON
{
  "datasource": "BEB9BDAF-1A60-411B-BF6A-4D092E13533C",
  "language": "en"
}

When executed, it returns Json data.

linklist05.png

If we extract a portion, we can see that the Json contains the items to be specified when linking.

JSON
"results": [
          {
            "field": {
              "link": {
                "value": {
                  "text": "",
                  "anchor": "",
                  "linktype": "internal",
                  "class": "",
                  "title": "",
                  "target": "|Custom",
                  "querystring": "",
                  "id": "{38808F0C-E1E0-4CA1-A47A-FAE136F485BC}",
                  "href": "/resources/DAM"
                }
              }
            }
          },

In other words, props: LinkListProps uses the data source, and const list = datasource.children.results for the list, which uses the Json data in results.

Summary

In this article, we have shown how to use Headless SXA components to configure components using Sitecore data. We confirmed that it is possible to create a component by specifying the settings, data source, etc. for such a process when you want to process data other than what you have on the page.

Tags