1. Adding dynamic content to a component

Get your content from external data sources

This topic describes how to add external data sources to the Component builder so you can use external data as content for your component.

Components using data from external data sources get staged with their data to be used in Pages.

Add an external data source using the Component builder

Mapping data to a component within the Component builder teaches components to recognize a data source's structure. The sample JSON provides the structure that the components are taught to recognize.

To add an external data source to the Component builder:

  1. On the Data Sources tab, click Add Data source.

  2. Enter a unique name and description for the data source.

  3. To populate the data source field with structured sample data, click one of the following options:

    • Paste raw JSON - paste a raw JSON file.

    • Fetch from URL - enter the URL endpoint where you want to retrieve the data from and click Fetch.

    • GraphQL - enter the URL where you want to retrieve the data from and click Fetch.

    The data is retrieved with any key-value-pairs in Params, Header, or Body and shown as a tree on the right.

  4. If the data tree shows the correct structure and fields, to finish adding the data source, click Save.

Screenshot of the Data Sources page

When a webpage is loaded, the page builder fetches updated data and feeds it with the same structure as previously mapped to the components. When embedding components using data sources in other page builders, you can decide what to do with the data.

Add an external data source using the Content Editor

You can also add a data source in the Component builder using the Content Editor.

To add a data source:

  1. In the Content Editor, in the left-hand pane tree, click the Settings folder of the site for which you want to add the data source.

  2. In the editor view, in the Site Configuration section, in the FEaaS component editor script URL field, paste the URL of your data source.

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