Uniform compositions

A composition is a set of components that define an instance of a layout.

Create a composition#

To create a composition, you choose what to base it on in the Add composition modal.

1. Navigate to the Experience > Compositions tab menu.

2. Click the Add composition button. This opens the Add composition: Choose type modal.

   

   The Add composition modal lists every composition type and composition pattern you can start from.

3. Choose what to base the composition on:

   • Select a composition type card to start from a blank composition. Composition types are the components that are marked as composition components in the component library. In all other ways, a composition component is identical to a "regular" component.
   • Select a composition pattern card to start from a pre-assembled composition pattern. Pattern cards show a pattern icon and their publish status.

4. Use the sidebar and toolbar to find the right type or pattern:

   Control	Description
   Search	Filter the grid by keyword across the name and public ID.
   All	Show every composition type and pattern you can create.
   Patterns By Type	Filter the grid to a single composition type and its patterns. The parent composition type is also included.
   Categories	Browse composition types and patterns grouped by their assigned category.
   Sort	Order the grid A-Z or by Recently updated.
   Suggested (From Filters)	Surfaces composition types that match the filters currently applied to the compositions list.

Uniform creates the composition as a draft and opens it in the visual editor. New compositions start with a default name (such as "Page composition") that you can change at any time.

Name and slug#

Every composition has a name, and can also have a slug:

• The name is a label for the composition. It doesn't affect how the composition is used — for example, if the composition represents a web page, the name doesn't become part of the page URL. It does, however, help you find the composition when you search and filter the compositions list.
• The slug is a human-readable identifier for the composition, useful when a composition needs to be fetched programmatically. It gives you a stable, readable value to query by instead of the composition ID. Whether the slug is required, optional, or hidden depends on the composition type's slug settings.

You can edit the name from the composition header, and the slug from the Properties panel in the visual editor, at any time after the composition is created. When you create a composition through a project map node, its initial slug matches the path segment of that node.

Open a composition#

There are several ways to open a composition, allowing users to access them in the most convenient way for you.

From project map node#

If a project map is configured for the project, you can:

1. Go to Experience > Compositions, then select Project map under Manage in in the sidebar.
2. Click on the name of a node or the and select Open in Canvas.

From composition landing page#

Use the main navigation and go to Experience > Compositions. This is also available from any landing page within the content section.

From another composition#

To stay within your editing flow, you can switch to editing a different composition without leaving the visual editing experience.

With a composition open in the visual editor, click Open… in the top navigation bar, next to Composition editor. Hovering over the button shows the tooltip Open a different composition. (The button isn't shown when you're editing a composition pattern.)

Use the Open option in the top navigation bar to switch compositions.

Clicking Open… opens the Open composition modal, which offers several ways to find and switch to another composition.

The Open composition modal for switching to a different composition.

• Search by keyword using the search field at the top of the sidebar.
• Switch between the two views under Views in the sidebar:
  • Project map browses compositions through your project map tree. This view is only available when a project map is configured for the project.
  • All shows a flat, paginated list of every composition, with the most recently updated first.
• In the All view, each row shows the composition's name, type, publish status, and when it was last modified. Use the pager and the Results per page control (10, 25, or 50) to move through long lists.

The composition you currently have open is marked current and can't be reselected. Selecting another composition opens it in the editor in place. If the current composition has unsaved changes, your browser prompts you to confirm before switching.

Manage a composition#

You can manage component settings from the components list but if you want to manage the information of an instance of a component, that's done within the composition.

1. Navigate to Experience > Compositions.
2. Select which composition you would like to work with. You will be taken to the visual editing view of your composition. From here you can:
   • Enter data into the parameters of compositions
   • Connect the component to external data
   • Configure preview for visual editing.

Delete a composition#

1. Navigate to the Experience > Compositions tab menu.
2. Find the composition you want to delete and click > Delete.

Duplicate a composition#

When you duplicate a composition, you create a new composition with all the same settings as the original composition, with the following exceptions:

• The composition name gets " (copy)" added to the end.
• The slug gets "-copy" added to the end.
• The composition state is set to "draft."

The following steps describe how to duplicate a composition.

1. Navigate to the Experience > Compositions tab menu.
2. Find the composition you want to duplicate and click > Duplicate.