Use external data

In this lesson, you’ll walk through using the headless data source with components on a page. For this exercise you'll swap out the static Uniform content on the Article Page for the actual entries in the CMS. During the lesson you will:

Goals

  1. Configure a Data Source for the Composition (page).
  2. Select an entry from the Single Source data type.
  3. Map fields from the entry to parameters of the component.

This section is important for learning purposes. It helps you to understand the basic building blocks for using external data. However, the steps in this section don't necessarily reflect how a real-world solution is implemented. That's covered in the following section on operationalizing external data.

  1. Navigate to Experience > Project Map.

  2. Navigate to Home > Articles > The Golden Ratio of Coffee.

  3. In the side rail, click .

  4. Click Add a data resource.

  5. For the field Data Type, select Single Article.

  6. From the list of articles, select the article THE GOLDEN RATIO of COFFEE.

  7. For the field Name, enter the following value:

    Golden Ratio article

  8. Click Save.

    golden-ratio-article-data-resource-contentful
    The screen after adding a data resource.

  9. In the upper right-hand corner of the data resources drawer, click to close the drawer.

  1. Click the Hero component.

  2. For the parameter Title, clear the value.

  3. Click next to the parameter.

    click-title-chip
    Clicking the button displays a popup menu.

  4. Click Insert dynamic token.

  5. Select the following field from your external system:

    Golden Ratio article > fields > title

    title-selected-contentful
    The title field is selected.

  6. Click Connect.

    title-parameter-connected
    The article title from the external system is displayed in the Hero component.
  1. For the parameter Description, clear the value.
  2. Map the parameter to the following field from your external system:

    Golden Ratio article > fields > description

  1. For the parameter Image, click Edit.
  2. Click .
  3. Click Done.
  4. Click > Connect to a custom URL...
  5. Click > Insert dynamic token.
  6. Select the following field from your external system:

    Golden Ratio article > fields > thumbnail > fields > file > url

  7. Click Connect.
    image-mapped-contentful
    The image assigned to the Contentful article is displayed.

    If you get an error message about the value not being a valid image URL, click in the URL field before the purple text and enter https:. After you do this, the image should appear properly.

  8. Click Done.
  9. Publish the composition.
Last modified
Next
Core concepts