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 Experience > Components.
2. Select the component Page.
3. Click > Duplicate.
4. Enter the following values:

   Field	Value
   Component Name	Article Page
   Public ID	articlePage

5. Click Slots.
6. Click the slot Page Content.
7. 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.

   When you change the slot name, the public ID value won't change. This is intentional. The front-end application is already configured to handle a slot named pageContent so no code changes are required.

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

9. Click OK.
10. On the button Save and close, click and then Save.

Configure composition defaults#

1. Click Composition Settings.
2. Click + Edit Defaults.
3. In the slot ARTICLE CONTENT, remove any existing components.
4. Add the following components:

   Component type
   Hero
   Content

5. Select the Hero component.
6. Enter the following values:

   Parameter	Value
   Display Variant	Background Image
   Title	Article Title
   Title Style	H2
   Description	Article abstract

7. For the parameter Image, click Edit.
8. Click Add New.
9. Click Uniform Asset Library > Custom.
10. For the field URL, enter the following value:
    https://res.cloudinary.com/uniformdev/image/upload/v1685477686/JavaDrip/Flavor_Ratios.jpg

    CopyCopied!
11. Click Done.
12. Select the Content component.
13. Enter the following values:

    Parameter	Value
    Text	Article Body

14. Click Accept and close.
15. Click Save and close on the component.

Add new composition#

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

1. Navigate to Experience > Project Map.

2. In the row for the node Articles, click > Add child node.

3. Enter the following values:

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

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

5. Enter the following values:

   Parameter	Value
   Page title	A History of Coffee

6. Click Publish.