Define layout

Goals

Uniform enables you to define the layout for a digital experience (like a web page, email message or screen in a mobile app), using a no-code tool. This involves the following:

• Understand basic Uniform terminology related to layout management.
• Define components that represent the layout.
• Create a composition that lets you specify the components that make up a web page.

Overview

Business users configure Uniform personalization using a no-code tool called Uniform Canvas. Canvas enables business users to work with components, which represent anything that is displayed by the front-end. When configuring personalization, business users specify which components to use and the conditions under which those components are used.

What is Uniform Canvas?

Uniform Canvas lets business users control layout without having to get into front-end design. You can think of Canvas as "layout as a service". The business user can control which components are used and what content is available to those components, but leaves the responsibility for how those components are built in the hands of the front-end developer.

Define components

With Uniform, personalization involves using the dimensions Uniform has collected about the visitor and determining the appropriate components to use when rendering the front-end.

Components must be defined in Canvas before personalization instructions can be assigned to them.

info

The components you create in Canvas are the components in your application. What you create in Canvas is just a representation of the application components that business users can interact with. As you will see later, the name of the Canvas component gets mapped to the implementation of the component that is built by a front-end developer.

tip

You only need to create components in Canvas for components you want business users to be able to control. In this tutorial, there is nothing in the navigation or footer components for the business user to control, so you do not need to create components for them in Canvas.

Default Body

The default body component represents most of the content that is displayed on the page. It includes everything in the main tag.

A business user will be able to personalize this component by specifying different content depending on whether the visitor has viewed the Architecture page.

1. In your Uniform project, navigate to Canvas > Component Library.

   

2. Click the red (+) button.

3. Enter the following values:

   Component Name	Default Body
   Public ID	defaultBody
   Component Icon	menu-boxed

   

4. Click Parameters.

   
   info

   Parameters allow business users to set values that are passed to the component. They give the user the ability to control the component, but within the limits specified by the parameter settings.

5. Click the red (+) button.

6. Enter the following values:

   Parameter Name	Content ID
   Public ID	contentId
   Type	Text
   Required	Yes

   
   info

   When a business user adds this component to a composition, they will be required to set a value for this parameter.

7. Click OK.

   

8. Click Save and close.

   

Default Page

The default page component is a composition component. This component represents a page on the site that a business user can add a Default Body component to.

1. Click the red (+) button.

2. Enter the following values:

   Component Name	Default Page
   Public ID	defaultPage
   Component Icon	file-document
   Composition Component	Yes

   
   info

   This component is marked a composition component because you want a business user to be able to create a composition based on it.

3. Click Slots.

   
   info

   Adding a slot will enable the business user to configure personalization. A slot is like a variable spot on a page. Uniform determines which components to inject into the slot based on a combination of the configuration set by the business user and what is known about the visitor.

4. Click the red (+) button.

5. Enter the following values:

   Slot Name	body
   Public ID	body
   Minimum	1
   Maximum	1
   Allowed Components	Default Body, Personalization

   

6. Click OK.

   

7. Click Save and close.

   

Create composition

Now you need to create a composition that represents the home page.

1. Click Compositions.

2. Click the red (+) button.

3. Enter the following values:

   Select a composition type	Default Page
   Name	Home Page

   

4. Click Create.

   

5. For the Slug, enter /

   
   info

   The slug is the value the front-end logic will use to retrieve the details about the composition. Don't be confused by the value being /. The value could just as easily have been "home" or "home page". As long as the front-end logic uses the same value, the slug can be whatever you want.

   danger

   Ensure that there are no other published compositions with the same slug. There may have been one created with the slug "/" when you created your account.

6. Click the green (+) button.

   

7. Click Default Body.

   

8. Enter the following values:

   Content ID

   home

   

9. Click Save.

   About this step

   At this point you have created a "preview" version of the composition. For more information on composition state, see the glossary.

10. Click < Compositions in the upper left-hand corner.