Create a composition component

For this exercise you will extend how Uniform can reuse a page component from your front end. During the lesson you will:

Add component to Uniform component library#

1. In Uniform, navigate to Content > Components.

2. Duplicate the component Page by clicking the ••• and selecting "Duplicate."

3. Enter the following values:

   Field	Value
   Component Name	Article Page
   Public ID	articlePage

4. Click Slots.

5. Click the slot Page Content.

6. Click on the slot name to open the editing window. Change the name of the slot to Article Content.

   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 pageContent so no code changes are required.

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

8. Click OK.

9. Click the arrow on the "Save and close" button and select Save.

Configure composition defaults#

1. Click Composition Defaults.
2. Click + Edit Defaults.
3. In the slot ARTICLE CONTENT, add the following components:

   Component type
   Hero
   Content

4. Select the hero component to open the editing panel. Update the following values:

   Field	Value
   Title	Article Title
   Description	Article abstract
   Title Style	H2
   Image	https://res.cloudinary.com/uniformdev/image/upload/v1685477686/JavaDrip/Flavor_Ratios.jpg

5. Select the content component to open the editing panel. Enter "Article Body" in the Text field.
6. Click Accept and close.
7. Click Save and close on the component.

Add new composition#

Now you can add a new composition using the composition component you created.

1. In Uniform, navigate to the project map.

2. Add a new child node under the Articles node:

   Field	Value
   Name	A History of Coffee
   Path Segment	Static
   Node type	Composition
   Composition	Article Page

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