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:
- Configure a pattern and add data resources.
- Learn how to use overrides for letting editors make changes.
- Update a composition with the pattern.
In Uniform, navigate to Experience > Components.
Open the component Hero.
Click Patterns.The screen where you can create a pattern.
Click Add pattern.
Enter the following value for the name:Hero - Contentful Article
Set the following parameter values:
Parameter name Value Display Variant Background Image Presentation settings > Text color variant Dark
Add data resource to pattern#
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.
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.
For the field Name, enter the following value:Single Article Content
Expand Advanced Options.
Set the following values:
Field Value Description Overridable True This allows the editor to select whichever article they want when the pattern is added to a slot. Use as default False 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.
Click Save.The data resource has been connected to the pattern.
Click > to close the data resources drawer.
Map component parameters to data resource#
In the right column, find the parameter Title and click the icon to the right of the parameter field. Select Insert dynamic token.
Select the data to map to from your CMS.
Golden Ratio article > fields > title.Selecting the title in the data resource.
Repeat these steps to connect the following parameters:
Parameter name Data resource value path Description Golden Ratio article > fields > description Image Golden Ratio article > fields > thumbnail > fields > file > url
Click Save.The pattern with data connections.
Configure override settings#
Click Overrides.Overrides are located in the right panel.
In the section Variant Override allow overrides.
In the section Parameter Overrides, turn on the following parameters:
Parameter name Enabled? Eyebrow text True Title False Title Style True Description False Image False Primary Button Copy True Primary Button Link True Primary Button Style True Primary Button Animation Type False Secondary Button Copy True Secondary Button Link True Secondary Button Style True Secondary Button Animation Type False Object Fit False Overlay Color False Overlay Opacity False Full Height False Text Color Variant False Container Variant False Background Type False Padding Top False Padding Bottom False Margin Bottom False Margin Top False Animation Type False Duration False Delay False Animation Order False Animation Preview False
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.
In the upper left-hand corner, click < to return to the Hero component settings.
Update the composition#
In Uniform, open the project map.
Navigate to Home > Articles > The Golden Ratio of Coffee.
In the left column, select the Hero component.The hero component has been selected in Canvas.
In the left column, click ••• on the hero component.The component edit menu has been opened.
In the left column, click Remove.The confirmation message for removing a component.
Click Delete.The component is no longer present in the left sidebar.
Above the component Breadcrumb, add a new component.Selecting the new component with a pattern.
Click the hero pattern you just added.The component with pattern data is part of the composition.
In the right column, in the section Pattern Data, click Select.
Click THE GOLDEN RATIO of COFFEE.The specified article is selected.
Click Save.The parameters that were mapped to the data resource in the pattern are now populated using the article that was selected.
Publish the composition.