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

In your Uniform project, navigate to Canvas > Component Library.
Click the red (+) button.
Enter the following values:
Component Name Default Body
Public ID defaultBody
Component Icon menu-boxed
Click Parameters.
infoParameters 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.
Click the red (+) button.
Enter the following values:
Parameter Name Content ID
Public ID contentId
Type Text Required Yes infoWhen a business user adds this component to a composition, they will be required to set a value for this parameter.
Click OK.
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.

Click the red (+) button.
Enter the following values:
Component Name Default Page
Public ID defaultPage
Component Icon file-document
Composition Component Yes infoThis component is marked a composition component because you want a business user to be able to create a composition based on it.
Click Slots.
infoAdding 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.
Click the red (+) button.
Enter the following values:
Slot Name body
Public ID body
Minimum 1
Maximum 1
Allowed Components Default Body, Personalization Click OK.
Click Save and close.
Create composition
Now you need to create a composition that represents the home page.
Click Compositions.
Click the red (+) button.
Enter the following values:
Select a composition type Default Page Name Home Page
Click Create.
For the Slug, enter
/
infoThe 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.
dangerEnsure 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.
Click the green (+) button.
Click Default Body.
Enter the following values:
Content ID home
Click Save.
About this stepAt this point you have created a "preview" version of the composition. For more information on composition state, see the glossary.
Click < Compositions in the upper left-hand corner.