Help
Join the Community
-
Documentation
Find detailed info about ServiceNow products, apps, features, and releases.
-
Impact
Drive a faster ROI and amplify your expertise with ServiceNow Impact.
-
Partner
Grow your business with promotions, news, and marketing tools for partners.
-
Store
Download certified apps and integrations that complement ServiceNow.
Our team is very excited to discuss new features available for UI Builder with the Tokyo release. We've summarized the release notes here, for more information see the UI Builder release notes / Next Experience Components release notes and associated product documentation. We're also highlighting new Tokyo features for Next Experience and it's related technologies on our Next Experience Academy series, which airs every third Wednesday of the month at 12pm EST. Keep an eye out for more Tokyo related content during the Tokyo General Availability launch and for more articles on our Center of Excellence site as we highlight Tokyo features.
Page Creation
We've made it easier to create pages from templates in UI Builder by providing a visual experience of the templates that are available. Prior to Tokyo, page templates were selectable in a list, but there were no visual indicators of what a page would offer until it was selected for usage. Builders will now see a screenshot of the template and a description of what the template offers. Our new page templates that utilize the presets and controllers technology will be visible in the top section by default, but our legacy templates can also be used as well.
Presets and Controllers
Presets and controllers allow builders to more easily configure components within UI Builder pages. Presets are used to define complex business logic such as data resource bindings, client scripts, page state bindings, and events; that are used to configure page elements. Prior to Tokyo these configurations had to manually be configured by builders.
Most presets will have a related controller that exposes the data referenced by the preset's property values and event configurations. When a preset-enabled component is added to a page in UI Builder, and the preset's parent controller is on the page and configured, the component will auto-wire using the preset's definition so that the new page element "just works." Any property value or event defined by a preset can be overridden by builders at any time.
Controllers encapsulate functionality spread across data resources, client scripts, and more into a single place, pre-configured for a specific use-case. They are not as flexible or open-ended as other data resources but provide a simple way to handle common data retrieval tasks. There are two types of controllers:
- Data Controllers - contain data resources and can be manually added to a page.
- UI Controllers - Are added to pages when using page templates and cannot be added manually.
The new Record Page Template uses presets and controllers, and more out-of-the-box page templates will utilize presets and controllers in future releases. For more information see the presets and controllers product documentation.
We've also badged components that are associated with controllers on the current page to make it easier for builders to find them. Components that have the green badging available will be able to utilize the presets functionality on the current page to have the component auto-wire or "just work".
New Record Page Template
The Standard Record Page template is a new template that utilizes presets and controllers to wire data to components and automatically applies test values so that you don't need to define a test value manually. This template is upgrade safe and reduces time to create record pages. We've also introduced new 404 and Blank page templates that utilize presets and controllers as well.
Event Flow Mapping
We've simplified event mapping in Tokyo with the following changes:
- Source events are no longer added by default and must be explicitly added.
- When browsing source events, we now expose a description of the source event when available.
- New card treatment of event mapping with additional metadata for certain event handlers.
- In the edit mode for an event, there is a compact view of the event mapping popover to allow builders to focus and modify only the configuration of the selected event mapping, and provides the ability to delete the mapping directly from the popover.
- Support for Preset event mappings. Presets can set event mappings as well as component properties, when an event mapping is derived from a preset, there will be a Preset badge added to indicate that the mapping differs from that of a standard mapping. Preset event mappings cannot be deleted, but can be disabled from the event mapping popover, and a custom event mapping can be used.
Layout System
In San Diego, we released a new performant layout system that utilizes CSS Flexbox and Grid for UI Builder pages. The new layout system provides a simplified content tree, new styling panel, new UI for configuring CSS Flexbox or Grid layouts without having to edit code, as well as an enhanced UI for component styling.
Variant Layout System Color Coding
In Tokyo we've added color coding in the page management panel to easily identify which layout system your page variant is using.
- No color = variant is on the new layout system
- Red color = page variant can be updated to the new layout system
- Orange color = page variant has been updated but not committed. The variant will remain read-only until the builder chooses to either keep the new layout system or revert to the old system via the layout wizard.
Component Tree Drag and Drop
It's easier to move components around on the page via the Content Tree in Tokyo as well. This is especially helpful if you have nested components within a container, as it can be difficult to move the components on the stage. You can now drag a component from one container to another in the content tree and see the change reflected on the stage in UI Builder.
Container Styling
Enhancements have been made to container styling when using the new layout system. Containers are components that are represented as a single item in UI Builder that have internal and external layers that work to control the proportions of the components inside of the container. The external layer controls how the container responds to other elements on the page, and the internal layer wraps the components and controls how they behave. In Tokyo you can now edit the CSS for both of the layers for use cases in which you need to control how the internal layer relates to the external layer.
CSS Grid Area Editing (Pre-Release)
There is a pre-release feature for developers to opt-in to via the Developer menu in UI Builder for the CSS Grid Area Editor. This feature will be available by default in future releases. CSS Grid is powerful but can be complex, the goal of this pre-release feature is to unlock the power of grid areas for everyone. Grid areas are:
- One or more grid cells that make up a rectangular area on the grid.
- Created when you place an item using line-based placement or when defining areas using named grid areas.
- Grid areas must be rectangular in nature; it is not possible to create a T- or L- shaped grid area. Learn more about Grid areas.
Tabs and Viewports
We've added new functionality in Tokyo to the tabs component which enhances the user experience and helps you to configure tabs more easily. When creating a new tab you can select one of the following tab types:
- Empty container tabs - Start with an empty container and configure static content inline on the page.
- Repeater tabs - Use the repeater functionality to repeat a tab based upon an array of data.
- Related list tabs - Create a related list tab with data bindings already configured.
- Page Collection tabs - Link or render any page within an experience easily inside a tab.
You can now utilize vertical as well as horizontal tabs on your page within the configuration for the tabs component. The Tab position property has options for Top (horizontal) or Start (Vertical Left) or End (Vertical Right). For more information on the Tabs component see the product documentation or the Developer site component library.
Builders can now add a viewport tab, and choose from a list of available viewports within the scope without navigating to classic environment forms and lists. In Tokyo:
- Viewports can be reused across multiple pages in multiple experiences
- Viewport extensibility is supported for both Tabs and Viewport modals
- UI Builder doesn't render the page collection, the builder can go to the extension point editor and to add and edit a page in the configured page collection tab.
JSON Editor
JSON Editor is a user-friendly interface that we released in San Diego to assist users in editing JSON properties in components. We've made some updates in Tokyo to make editing JSON code even easier such as:
|
|
Table Builder
If you have App Engine Studio with the Table Builder plugin installed you can now access Table Builder within UI Builder when adding a form component to a page. When configuring the form component, select the Edit form views link to launch the Forms tab in Table Builder. Table Builder will open in a new browser tab and not within UI Builder. For more information see the product documentation.
