---
title: "Assign a data item from an external data source"
slug: "assign-a-data-item-from-an-external-data-source"
abstract: "Components can include unassigned data items that you want to link to an external data source. This includes data that is fetched from a URL, GraphQL or from a JSON file."
---

# Assign a data item from an external data source

In 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](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/set-a-repeater-for-an-array.html "Set a repeater for 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](https://doc.sitecore.com/api/markdown-image/sai/en/users/sitecoreai/images/limitandspecify.jpg)

## Assign a data item from a registered data source

In the Components builder app, you can [add an external data source](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-external-data-sources.html "Get your content from external data sources") 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 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 :mdiTextSearch:.
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 :mdiTextSearch:.
3. In the right-hand pane, the **Data sources** overview shows the data currently selected.
4. To change the data, click **Customize** :mdiCloudRefreshOutline:.
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 :mdiTextSearch:.
3. In the right-hand pane, the **Data sources** overview shows the data currently selected.
4. To change the data, click **Customize** :mdiCloudRefreshOutline:.
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 :mdiTextSearch:.
3. In the right-hand pane, the **Data sources** overview shows the data currently selected.
4. To change the data, click **Customize** :mdiCloudRefreshOutline:.
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**.