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:

• Understanding the basic Uniform terminology related to layout management.
• Defining components that represent the layout.
• Creating a composition that lets you specify the components that make up a web page.

Overview

Once the Uniform application is configured, business users can add data and content to experiences using a no-code tool called Uniform Canvas. Uniform compositions leverage components, which represent anything that is displayed by the front-end. Users specify which components to use and the conditions under which those components are used. Variation options include A/B testing, classification, and personalization.

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

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

Components need only be defined in the app for content or data that business users should be able to control. For example, there is nothing in the navigation or footer components in this tutorial for the business user to control, so components do not need be created for them.

Default Body

This tutorial includes a component type called "Default Body." This component type is represents most of the content that will make up a web page. It includes everything present within the 'main' tag in the Body.jsx file in the code base.

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
   • 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: ticked
   
   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

Now we will create another component type which will represent an element that a business user can use to create experiences: a composition component. In this tutorial, this component represents a page on the site that a business user can add a Default Body component to.

1. In your Uniform project, navigate to Canvas > Compositions. Click the red (+) button.

2. Enter the following values:

   • Component Name: Default Page
   • Component Icon: file-document
   • Composition Component: ticked
   
   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

   Slots represent areas in which components can be placed. Uniform determines which component to insert into a slot based on configurations set by the business user.

4. Click the red (+) button.

5. Enter the following values:

   • Slot Name: body
   • Minimum: 1
   • Maximum: 1
   • Allowed Components: Default Body
   
   info

   These settings ensure that:

   • At least 1 component is entered into the slot
   • No more than 1 component is entered into the slot
   • The only component type that is entered is the Default Body

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 in the list on the left.

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.

6. Click the green (+) button in the body slot to add a component.

   

7. Click Default Body.

   

8. Enter the following values:

   • Content ID: home
   

9. The Save button also acts as a drop-down. Click the ⌵ icon to activate the dropdown.

   

10. Click Save > Save and publish.

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