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#

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. 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.
   • 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
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.

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

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.

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 available components by:

• Searching by keyword by typing into the search box
• Choosing from the "quick insert" list, which contains:
  • Built-in components: Uniform components that are part of every project and are available on all compositions.
  • Recently used components: Up to three most recent components used in a slot with the same slot ID.
  • New: The most recently used components.
• Viewing all, which shows all components available in the current slot.
• Filtering 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 editor: