For this exercise you will extend how Uniform can reuse a page component from your front end. During the lesson you will:
- Register a new composition component in the Uniform component library.
- Update your the component source is to reuse an existing component with Uniform.
- Define a new slot name for the component in the component library.
- Configure the slot in Uniform (allowed components).
- Add a component to the new slot.
Add component to Uniform component library#
In Uniform, navigate to Experience > Components.
Locate the Page component in the component library.
Duplicate the component Page by clicking the ••• and selecting "Duplicate."
Enter the following values:
Field Value Component Name
articlePage[This will be auto generated]
Click the slot Page Content.
Click on the slot name to open the editing modal. Change the name of the slot to
About this step
This change makes it easier for the editor to build the composition by showing a more descriptive name in Canvas.
The public ID value won't change, but this is intentional. The front-end application is already configured to handle a slot named
pageContentso no code changes are required.
Under Allowed Components select only the following components:
Component name Breadcrumbs Call to Action Card Block Container Content Featured Callout Grid Hero Image Rich Text Video Player A/B Test Localization Loop Personalization
Click the arrow on the "Save and close" button and select Save.
Configure composition defaults#
- Click Composition Settings.
- Click + Edit Defaults.
- In the slot ARTICLE CONTENT, remove any existing components. Then, add the following components:
Component type Hero Content
- Select the hero component to open the editing panel. Update the following values:
Field Value Title
- Select the content component to open the editing panel. Enter "Article Body" in the Text field.
- Click Accept and close.
- Click Save and close on the component.
Add new composition#
Now you can add a new composition using the composition component you created.
In Uniform, navigate to the project map.
Add a new child node under the
Field Value Name
A History of Coffee
Path Segment Static Node type
Click Save & open Canvas.The newly created composition open for editing in Canvas.
About this step
Notice that the slot ARTICLE CONTENT is pre-populated with the components you added to the composition defaults.
You will also notice that when you go to add a new component to the slot, the options are limited to the component types you assigned earlier.
Add "A History of Coffee" in the required Page title field.
Click Save or Publish.