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. In Uniform, open the project map.

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

  3. In the side rail click the data resources icon, or in the upper right-hand corner next to the publish button, click ••• > Manage data resources.

  4. Click Add a data resource.

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

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

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

  8. Click Save.

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

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

  1. Open the structure panel and select the Hero component.

  2. In the right column, find the parameter Title and click the icon to the right of the field. Select Insert dynamic token.

    open-mapping-drawer
    The open data mapping drawer.

  3. Select the data to map to from your CMS.

    map-title-parameter
    The fields available to connect to.

  4. Click Connect.

    title-parameter-connected
    The value of the article title from Contentful is now displayed in the Hero component.

  5. Repeat these steps to connect the following parameters:

    Note that when there is a data resource connected to a parameter, the icon to the right of the parameter field is filled in purple.

  6. Select the Content component from the structure panel.

    content-component-selected-contentful
    The value of the article title from Contentful is now displayed on the page.

  7. Remove the existing content from the Text field. Connect the following parameters:

  8. Click Connect.

    content-component-connected-contentful
    The paragraphs from the article text from Contentful are now displayed in the Content component.

    How to handle rich text from an external system like Contentful is covered in the composition section

  9. Publish the composition.

Last modified
Next
Operationalize external data