Visual 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 visual editor, while seeing what the user will see.

With the visual 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 visual 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.

Edit compositions#

The Uniform visual editor provides the tools marketers need for creating seamless experiences, and constantly improving them through optimization and learning. It combines access to all enterprise content sources with a live preview so teams know exactly what will be published, in a navigable workspace.

Editing compositions within Canvas is done in four main areas:

• Header: Contains the composition name, slug or node information, management controls, and status information
• Side rail: Allows you to open different panels to explore details and resources related to the currently opened composition.
• Preview panel: Holds the preview of the page and some display controls
• Property panel: Contains controls for component parameters and personalization

Header#

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

1. Breadcrumb: If a project map is configured for the project, a path to the composition with the ability to open another composition.
2. Validation errors: Any errors that will prevent publishing are listed here.
3. Locales: An indicator of which locale is being previewed with the ability to switch to other configured locales.
4. State: An indicator of whether the composition is draft or published, and the last time it was saved or published.
5. Composition name: edit the name by typing in the text field provided.
6. 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.
7. 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.
   • 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.

Side rail#

The side rail sits to the left of the screen and allows you to view details and resources connected to the current composition.

It contains five elements:

Element	Icon
Structure	The structure icon in the side rail.
Data resources	The data resources icon in the side rail.
Source	The source icon in the side rail.
Composition history	The history icon in the side rail.
Locale management	The locales icon in the side rail.
Properties	The properties icon in the side rail.

Structure#

In the structure section shows the hierarchy of slots and components.

You can:

• Reorder components by dragging and dropping elements, depending on the configuration of the composition or the roles and permissions applied.
• Expand or collapse hierarchical sections, such as if you have slots within a component, making it easier to focus on specific sections.

An example view of the structure element.

Data resources#

The data resources section provides features to manage your data sources and data types from within your composition.

An example view of the data resource element.

Source#

The source element shows you the references of your composition as JSON data. You can see composition data:

• As it will be saved as JSON.
• As it would be returned for use in a consuming application, with data resources, patterns, and pattern overrides applied.
• The comparison of current edits with the last published version.

An example view of the source element.

Composition history#

Here you can see drafts and published versions of your composition. If you make several changes within the same day, those updates will be collected together as the number of versions created on the day. Selecting a revision will load the composition as "read only" with the references as they were at that point in time. You can:

• See what was changed, when, and by whom.
• Restore this version (which will create a new version with the associated references).
• Go back to the current version.

Data is saved for the last 30 days.

This is useful when there are multiple people collaborating on a single composition, or previous version data needs to be reviewed. You should note that this isn't a full audit feature. Uniform does track the references that are saved as JSON. It doesn't save the data coming from external sources. If you're reviewing a pattern, only the references will be saved.

An example view of the history element.

Locales#

Locales that are applied to the current composition are listed, as well as any that are available to be added. If you add a new locale, you have the option to copy content from an existing locale or start from scratch. If you choose to copy an existing locale, Uniform will copy both the content and existing localization containers.

The ability to manage locales within the composition.

Properties#

Within the properties section of the structure panel you will see some basic information about your composition, including the:

• Composition slug
• Composition ID
• Created, modified, and last published dates

An example view of properties element.

Preview panel#

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

• Toggle between editing and preview modes.
• 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.

Editing & Preview mode#

At the top-left corner of the preview panel are buttons that allow users to toggle between two preview modes;

• Editing mode – enables visual editing and inline editing, helping users to quickly update content and manipulate components from within preview panel.
• Preview mode – removes the Uniform editing UI from the preview panel and enables page interactions in order to provide a clean preview experince for reviews and testing.

Preview panel in "editing mode"

Preview panel in "preview mode"

Property panel#

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.

Navigate the editor#

While the visual editor is comprised of separate sections, they work together seamlessly to orient authors. As composition authors navigate through components in the preview panel, the selected item is highlighted. A tool bar also appears with which you can:

• Select the parent component
• See the icon, component title, and the type of the component
• Select the component directly above or below the selected component
• Insert a component before or after the component
• Insert a component into the slot (if the component is configured with slots)
• Convert to pattern
• Duplicate or delete the component

You can also leverage content optimization tools from the highlighter, including:

• Personalize the component.
• Test variants of the component
• Localize the component.

As you select composition elements from the structure or preview panels, the corresponding parameter is highlighted in the property panel.

A component is selected in the preview panel.

A parameter of the selected component is selected for inline editing. The corresponding area in the property panel.

Add components#

Click the in either the structure or the preview panel to add a component to a composition. This will open the insert component dialog.

The dialog for inserting a component.

Authors can browse components allowed in the slot and permissions by:

• Searching by keyword by typing into the search box
• Choosing from the list provided, which contains:
  • Built-in components: Uniform components that control visibility of the components they contain: personalization, localization, testing, and loops.
  • Suggested components: A blend of components recently used (by the current user), brand new components, and recently updated components. This may not display if there are fewer than four components available.
• A-Z, which shows all components available in the current slot.
• Filter by category: Components can be categorized by editing the component. Categories are managed by editing components as well.

Dive deeper#

Learn more about how to work with the visual workspace: