Now Experience UI Builder Gets More than an Interface Lift in ServiceNow Quebec

One of the main highlights promoted by ServiceNow for its latest release, the Now Experience UI Builder is the big news our team is most excited about in Quebec.

The new web interface enables anyone to build new pages or customize existing pages for workspace and portal experiences using a vast library of ServiceNow design components and/or custom components. As an interface builder, the platform allows users to preview what the final interface will look like, as you build new pages or customize existing pages for web-based workspace and portal experiences. You can build pages using Components and custom web components.

UI Builder Key Features

  • Create pages for workspace or portal experiences. Create or customize pages for workspace and portal experiences. A page is a collection of components that make up a workspace or portal UI. For example, you can create a page to solve employee software issues at your company.
  • Create a variant of a page. Create variants of pages to target experiences for different audiences. For example, you can create a home page for agents, and a variant for managers at the same URL.
  • Work with viewports. Work with specialized components that let you extend your experience without owning the parent page. For example, you can replace a tab on the default workspace with a custom page variant. The default Workspace page would be updated with new features, but your custom tab page would remain intact.
  • Connect data to your components. Bind data to your components using data resources to dynamically display your data from tables, records, or other elements on your page. Data resources let you reuse your components.
  • Modify the layout of a page. Create any type of page design by changing the layout of the page. You can use CSS to change how components are displayed on a page.
  • Add styling to your component. Use CSS to change the visual style of a component in your workspace or portal experience. For example, you can add a background color to a container component.
  • Apply a theme to your experience. Add a few theme changes to match the user experience to your company branding without needing to rebuild components.
  • Add event mapping to add actions to your page. You can choose from four event types: component, page, data resource, or declarative action. For example, you can add a button component to a page and then use event mapping to define what happens when a user clicks a button.

Working in the UI Builder

ServiceNow’s UI Builder provides everything firms need to deliver an optimal experience to their users. Whether organizations are using it to create a page for a workspace or a portal web experience, this new tool has limitless opportunities. The basic “creating a page for employee expense reports” is just one of the ways in which firms can utilize the UI Builder. With Quebec, you can build out the functionality within each page by adding components that you need for your user experience. This could include customized elements like buttons, sidebars, navigation, and data visualizations. UI Builder comes with a standard library of components for you to add. Layouts of the components are also customizable. For example, you can use themes to make a page match your company’s styles and standards. All you have to do is configure your themes via the Now Platform Lists and Forms by using JSON-formatted CSS. One of the most powerful updates to the UI Builder isn’t just the look and feel, but the ability to connect your company data to your components. These data resources dynamically display data from tables, records, or other elements on a page.

Add Event Mapping to a Component

Event mapping is an important process within UI Builder. When you build pages with components, you need those pages to actually perform actions for users. For example, you can map a button to an event handler to perform a button action when a user selects that button. Another example may be adding a data resource such as a form. You could set up an event handler to notify a user when the page succeeds in loading the form. UI Builder is as powerful as you need it to be: You can build simple web experiences, or you can create complex data-driven experiences.

Ready to Learn More?