Upgrading layouts in UI Builder

Upgrade layouts created in Quebec and Rome to the new layout system.

The UI Builder layout system was enhanced and updated in the San Diego release. This new layout system features a simplified content tree and a new styling panel for layout configuration and component styling. All newly created page variants use the new layout system. You have the option to upgrade to the new layout system for existing and custom pages.

The new layout system includes the following:

• A simplified content tree
• Improved styling panel for layout configuration and component styling
• Low-code UI for configuring CSS Flexbox and Grid layouts.
• Enhanced UI for component styling
• Updated layouts do not require slots

Things to look for after upgrading layouts

Variants and pages are upgraded individually.

A page/variant is made up of a layout, components, and subcomponents, that are wrapped in a container within a layout with data resources, event bindings, and composition. Only the layout of your page is upgraded when upgrading to the new layout system, so there is no impact to your data, components, or component styling.

All slots in the old layout system are migrated during the upgrade process to the new layout. The upgrade process changes how the component containers are structured on your page.

While component styling is not impacted, there may not be a one-to-one style migration of how components were positioned. Complex pages can have visual misalignments that occur through the upgrade process as styles are merged from slots to containers. Some issues must be resolved manually.

Upgrade your layout to the new layout system

Upgrade your UI Builder pages to the new layout system.

Before you begin

Role required: ui_builder_admin

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience with the page you want to upgrade.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Select the page that you want to upgrade.
   

   You can find page variants that can be upgraded to the new layout system tagged with a red dot.

   Note:

   Legacy pages created using the pre-Quebec row/column layout system are not upgradable and must be rebuilt with the new layout system.
4. Select the Update layout button.
   
   UI Builder begins updating your page layout to the new layout system. A notification appears when the process is complete.
5. You can compare your old layout to the upgraded layout by selecting compare the two layout versions in the Layout needs review before you can edit notification.
   
   Two browser tabs open, one displaying your current layout and one displaying the upgraded layout.
6. Select Keep new if you would like to update the page to the new layout system, or select Use old if you would like to keep the page layout as it was.
   A modal appears asking you to confirm your selection.
7. Select Keep new to complete the upgrade to the new layout system, or select Use old to reverse the upgrade process and return the page to the old layout system.
   
8. The page reloads with the changes applied.
9. View and test your page by selecting the Preview button ().