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:
- Configure a Data Source for the Composition (page).
- Select an entry from the Single Source data type.
- 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.
Add data resource to composition#
In Uniform, open the project map.
Navigate to Home > Articles > The Golden Ratio of Coffee.
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.
Click Add a data resource.
For the field Data Type, select Single Article under Contentstack.
From the list of articles, select the article THE GOLDEN RATIO of COFFEE.
For the field Name, enter the following value:Golden Ratio article
Click Save.The screen after adding a data resource.
In the upper right-hand corner, click > to close the data resources drawer.
Map component parameters to data resource#
Open the structure panel and select the Hero component.
In the right column, find the parameter Title and click the icon to the right of the field. Select Insert dynamic token. Make sure you also remove any content that was present in the field.The open data mapping drawer.
Select the data to map to from your CMS.
Golden Ratio article > fields > titleThe fields available to connect to.
Click Connect.The value of the article title from Contentful is now displayed in the Hero component.
Repeat these steps to connect the following parameters. Remember to remove any existing content in each field:
Parameter name Data resource value path Description Golden Ratio article > fields > description Image Golden Ratio article > fields > thumbnail > fields > file > url
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.
Select the Content component from the structure panel.The value of the article title from Contentful is now displayed on the page.
Remove the existing content from the Text field. Connect the following parameter:
Parameter name Data resource value path Text Golden Ratio article > fields > content > content > 1 > content > 1 > value Contentful Content Golden Ratio article > fields > content (object with 3 properties)
Click Connect.The paragraphs from the article text from Contentful are now displayed in the Content component.
Publish the composition.