1. Adding content to a page

Assign a data item from an external data source

In the page builder, Sitecore components contain unassigned data items that need to be linked to external data sources, such as data that is fetched from a URL, GraphQL or included in a JSON. The configuration options on the right can guide you through the steps of setting up an external data source as a data item for your component.

A component can be configured to accept an array of data in the Component builder. This configuration lets you choose specific data, or limit how many items are fetched from the data source.

Additional options are available when the component has been configured to accept an array of data as data source

Assign a data item from a registered data source

In Components, you can add an external data source to your project using the Data Sources tab, or by registering the data source. These data sources are available to use when assigning a data item to a component in the page builder.

To assign a data item from a data source registered in the Component builder:

  1. In Pages, on the relevant webpage, click the component to which you want to assign a data source, then click on ..

  2. In the right-hand pane, click Data item. The indicator at the top of the configuration panel shows the two-step process of selecting a source, then an item.

  3. Click the desired data source, then click Next.

  4. Click the item to use.

    Note

    When using an array, you can use all items of the array, or limit the selection to a definite number of items, or specify which items to use depending on their rank in the array.

  5. Click Complete.

Fetch the data item from a JSON object

To use a JSON object as an external data source:

  1. In the page builder, open the webpage where the component that needs to be assigned a data source is located.

  2. Click on the component, then click on .

  3. In the right-hand pane, the Data sources overview shows the data currently selected.

  4. To change the data, click Customize .

  5. In the Data drop-down menu, click Paste JSON.

  6. Paste a JSON that contains the data you want to use.

Fetch the data from a URL

To use an external data source stored on a URL:

  1. In the page builder, open the webpage where the component that needs to be assigned a data source is located

  2. Click on the component, then click on .

  3. In the right-hand pane, the Data sources overview shows the data currently selected.

  4. To change the data, click Customize .

  5. In the Data drop-down menu, click Fetch from URL.

  6. In Method, click GET.

  7. In the Retrieve data field, enter the URL where the data source is located, then click Fetch.

  8. On the Params, Headers, and Body tabs, you can check that the data item you need are included as key and value pairs. You can delete unnecessary data, or add key-value pairs when it is missing.

  9. When you are done, click Save.

Fetch the data from GraphQL

To use a GraphQL query as external data source:

  1. In the page builder, open the webpage where the component that needs to be assigned a data source is located

  2. Click on the component, then click on .

  3. In the right-hand pane, the Data sources overview shows the data currently selected.

  4. To change the data, click Customize .

  5. In the Data drop-down menu, click Fetch from GraphQL.

  6. In Method, click POST.

  7. In the Retrieve data field, enter the URL where the data source is located, then click Fetch.

  8. On the Params and Headers tabs, you can check that the data item you need are included as key and value pairs. You can delete unnecessary data, or add key-value pairs when it is missing.

  9. On the Body tab, check that the data item you need are included as query and variables.

  10. When you are done, click Save.

If you have suggestions for improving this article, let us know!