Composition

Contextual editing

Uniform provides the layer in a composable stack where users build experiences. As part of Canvas, users can leverage data from integrated systems to create compositions. Authors create, edit, and publish compositions from the contextual editor, while seeing what the user will see.

With the contextual editor you can:

  • Preview content at different screen sizes (for example, desktop and mobile)
  • Understand the effects of changes made to the experience
  • Preview variants when adding personalization, localization, or A/B testing to an experience

Note that contextual editing differs from in-line editing. With the preview seen in Uniform, editors can decide which system to update. Updates to core content should be made in the system of record. Changes to variable content (personalized, localized, or test variants) should be made in a system like Uniform to prevent pollution of the content model.

The updates to content made in Uniform don't affect core content managed in different systems.

tip

Looking for developer information? This page focuses on what contextual editing is and how to use the interface. Technical folks may be more interested in:

Editing compositions within Canvas is done in four main areas:

  • Header: Contains the composition name, slug or node information, management controls, and status information
  • Structure panel: Shows the content hierarchy of slots and components that make up the composition
  • Preview panel: Holds the preview of the page and some display controls
  • Property panel: Contains controls for component parameters and personalization
The general layout of the contextual-editing window

Main attributes of the composition are managed within the header. This includes:

  1. Composition name: edit the name by typing in the text field provided.
  2. Slug or node information ("attached to"):
    • If the composition is attached to a node in a project map, the name of the node will be displayed. Clicking on the name will open an editing panel where you can either add a new node, select an existing node from the tree, or detach the node. Clicking the copy icon will copy the full URL of the node.
    • If there is no project map node associated with the composition, the composition slug is displayed. The slug can be updated by typing in the text field provided.
  3. Management controls: Editing a composition will active the Save button. Next to the button are three dots •••. Clicking the dots opens a menu of management options:
    • Manage data resources: This option opens a panel where data resources can be added, edited, or removed. <!-- add link to more info on "data resources" -->
    • View source: This shows the API result that would come back for the composition in real time, including unsaved changes.
    • Copy preview URL: This copies the preview URL configured in Settings > Canvas settings onto your clipboard.
    • Properties: Selecting this option displays the slug and the composition ID. Both can be used when manipulating the composition in a front-end application.
    • Duplicate: Click this to create a duplicate composition that will appear in your project.
    • Edit component definition: This link will take you to the component definition in your component library.
    • Delete: This deletes the composition.

The structure panel:

  • Sits to the left of the screen (in larger view ports) or just under the header (in smaller view ports). This shows a hierarchical representation of the elements of the experience.
  • As you select elements within the content structure, relevant details of each component appear within the property panel. The preview will also move to show the corresponding element.
  • Depending on the configuration of the composition or the roles and permissions applied, components can be reordered by dragging and dropping elements.
  • Hierarchical sections can be expanded and collapsed, making it easier to focus on specific sections.

The elements shown in the structure panel are:

  • Slots: A slot is a named part of a component which can have child components added to it, as permissions and configurations allow.
  • Components: A components can represent almost anything you see a digital experience or anything used to control what you see.
  • Patterns: A reusable component instance that can be referenced on one or more compositions.

The preview panel sits in the middle of the screen (in larger view ports). Authors can:

  • Toggle between full-width or mobile views.
  • Refresh the view to show the most recent updates from source systems.
  • Open the preview in its own browser tab or window.

The preview panel can also be closed by clicking on the "X." If closed, the two side panels fill the window. Clicking the “|O|” icon will re-open the preview.

The property panel is to the right (in larger view ports) or below the composition structure (in smaller view ports).

There are two tabs in the panel. The content tab orients the author showing which component is currently being edited. Clicking the “•••” on the active component opens a menu where authors can:

  • Convert the component to a pattern (if it's not already)
  • Edit pattern or copy pattern (if it's already)
  • Duplicate the component
  • Remove the component

Variants

Variants can also be managed in the property panel. If there are multiple variants for the component, they can be selected and previewed. Clicking the “•••” to manage display variants or the “+” to add a display variant will take authors to the component library to edit the component variations.

Parameters

Authors can also manage parameters associated with the component from the property panel. Parameters will be specific to the integrations, data source, data type, and elements associated with the composition.

Learn more about how to work with our contextual editor:

Last modified
Next
Activate contextual editing