Operationalize external data

While Uniform Mesh lets you configure your project to access multiple external data sources, making these connections each time you create a composition can be a burden for authors.

Enable your authoring teams to stay focused on creating compelling experiences, by defining a pattern that's then referenced by other compositions to keep those data resource connections consistent and ready for your content authors.

During this lesson you will:

Create pattern#

1. In Uniform, navigate to Content > Components.

2. Open the component Hero.

3. Click Patterns.

   

   The screen where you can create a pattern.

4. Click Add pattern.

5. Enter the following value for the name:

   Select a tabContentfulContentstack

6. Set the following parameter values:

   Parameter name	Value
   Display Variant	Background Light Image

7. Click Save.

Add data resource to pattern#

1. 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.

2. Click Add a data resource.

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

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

   About this step

   When you added a data resource to the composition, you were selecting the article to connect a specific article to the composition. In this example, you are adding a data resource to the pattern. This allows you to see real content when you map the fields from the article to the parameters on the component, but when an editor goes to use the pattern, they're able to select any article they want.

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

   CopyCopied!Wrap

6. Click Advanced Options.

7. Set the following values:

   Field	Value	Description
   Overridable	On	This allows the editor to select whichever article they want when the pattern is added to a slot.
   Use as default	Off	This prevents the article selected in the data resource configuration (such as THE GOLDEN RATIO of COFFEE) from being automatically selected by default when the pattern is added to a slot.

8. Click Save.

   

   The data resource has been connected to the pattern.

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

Map component parameters to data resource#

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

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

   Select a tabContentfulContentstack

3. Click Connect.

4. Repeat these steps to connect the following parameters:

   Select a tabContentfulContentstack

5. Click Save.

   

   The pattern with data connections.

Configure override settings#

1. Click Overrides.
   

   Overrides are located in the right panel.
2. In the section Variant Override allow overrides.
3. In the section Parameter Overrides, turn on the following parameters:

   Parameter name	Enabled?
   Eyebrow text	Yes
   Title	No
   Title Style	Yes
   Description	No
   Image	No
   Primary Button Copy	Yes
   Primary Button Link	Yes
   Primary Button Style	Yes
   Secondary Button Copy	Yes
   Secondary Button Link	Yes
   Secondary Button Style	Yes
   Object Fit	No
   Overlay Color	No
   Overlay Opacity	No

   About this step

   These parameters aren't mapped to the data resource. You must enable overrides in order for the editor to be able to set these values.

4. Click Publish....
5. Click Publish.
6. In the upper left-hand corner, click < to return to the Hero component settings.

Update the composition#

1. In Uniform, open the project map.

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

3. In the left column, select the Hero component.

   

   The hero component has been selected in Canvas.

4. In the left column, click ••• on the hero component.

   

   The component edit menu has been opened.

5. In the left column, click Remove.

   

   The confirmation message for removing a component.

6. Click Delete.

   

   The component is no longer present in the left sidebar.

7. Above the component Breadcrumb, add a new component.

   

   Selecting the new component with a pattern.

8. Click the component you just added.

   

   The component with pattern data is part of the composition.

9. In the right column, in the section Pattern Data, click Select.

10. Click THE GOLDEN RATIO of COFFEE.

    

    The specified article is selected.

11. Click Save.

    

    The parameters that were mapped to the data resource in the pattern are now populated using the article that was selected.

12. Publish the composition.