You are viewing content included in the Next Experience Center of Excellence
This article discusses the key highlights in the San Diego family release for the Next Experience UI Framework. Any store release highlights will have a separate article.
Next Experience UI |
The Next Experience UI is a new feature in the platform as of the San Diego release, for more information on Next Experience UI see our Next Experience Center of Excellence article and the Product Documentation San Diego Release Notes.
UI Builder |
This article highlights UI Builder features introduced in the San Diego release, for a more comprehensive list visit the product documentation.
New Flexbox/Grid Layouts
UI Builder uses an updated layout system in San Diego that provides better performance and simplifies page customization. The new layout system lets you configure Flexbox and CSS Grid layouts without editing layout code and layouts no longer use slots. The new layout system features a simplified content tree and a new styling panel for layout configuration and component styling.
Users have the option to upgrade to the new layout system for existing and custom pages using the built-in upgrade wizard. All newly created page variants use the new layout system.
The legacy UI Builder 12-column/row-column layout is also available, though it is recommended to use Flexbox and CSS Grid.
Product Documentation:
Component Styling without CSS Code
The following styling options are exposed in UI Builder with form controls instead of writing CSS code when using the new Flexbox/Grid Layout:
- Alignment
- Height and Width
- Margins
- Padding
- Background
- Border
- Shadow
Default variables may be pre-loaded and support theme variables for sizing, spacing, colors, and more.
Custom CSS values can be used in place of theme variables within the form controls, or users can use the Advanced CSS editor option by toggling View and edit CSS in the styles tab of the configuration panel.
JSON Editor
Enables users to set component configurable properties that are defined in JSON with a user-friendly UI. Users can view all available properties without referencing product documentation. Prior to the San Diego release of UI Builder, users had to configure JSON options within configurable component properties with raw JSON. This feature also assists in clarifying to users which properties are configurable within the schema.
Component Formula Editor
The UI Builder component formula editor is located in the configuration panel and is used to bind or modify formulas. You can enter text, data bindings, and/or formulas. Formulas can consist of any combination of the three input types. The component formula editor supports logical, arithmetic, comparison, negation, and functional transform types.
Each function added to the component formula editor auto-completes. The component formula editor displays a label for each input of the function so you know what parameters each function requires. For an extensive list on the functions that UI Builder component formula editor supports see the product documentation below.
Product Documentation:
Repeater Component
Repeat a component or multiple components with results from a data resource. Prior to the San Diego release, each component that shares data from a data resource would need to be configured to receive results from a data resource individually.
Product Documentation:
New Components
For more information on new components, page templates, and changes visit the product documentation below.
- Audio Player
- Calendar Report
- Carousel
- Checklist
- Digital signature
- Document display
- Node Map
- Task Planner
Product Documentation:
