New UI Builder features in Vancouver make it easier to build web pages in your apps!

[Dawn Jurek]

Are you building your own web pages in the Now Platform®, or would you like to?

UI Builder provides a WYSIWYG (what you see is what you get) interface for building web pages, for both low-code and pro-code developers.

ServiceNow designers, developers, and program managers are working hard to elevate your experience with UI Builder. In this article, we show you the new layout and stage improvements, and components available in the Vancouver release that you can leverage to accelerate your page development. 

 

Layout and stage improvements

The stage is where you build your pages in UI Builder, by setting up the layout of the page and adding components via the toolbox.

We've re-engineered the toolbox to infer what you should add to your page next—a layout section or a component—and give you information about these elements before you add them.  

Next, we've enhanced column layouts to adjust automatically when you add or remove columns, and to maintain their proportions.

With improvements we've made to configuration options, you can access them when needed. This gets them out of the way while still allowing you easy access to margin, padding, border, background, and shadow settings. 

And finally, we've added on-stage navigation, so you can quickly select any component on the stage.

Check out this video to see these features in action:

Component bundles

Components are the elements that make up UI Builder pages. They include core parts like buttons and labels, as well as more complex experience elements like lists and forms. 

Component bundles are preconfigured sets of components that can give you a jump start on building your pages. In the following video, we show you how to add these components to your page. Then we dive into the Split view component to see what it's made of and how to configure it. 

Date-time components

When users need to select a date, time, or both, date-time components offer several options. You can capture these data with fields that support single date-time values or a range of values. Configuration options help you limit what users can enter for date-time fields, for example, by hiding certain dates or setting the first day of the week. Here, we give you the rundown on all the date-time options available in the Vancouver release. 

Popover components

A popover is a container that floats over other content when you click a component on a page. You can set up a popover component to display a value, tool-tip, or anything else relevant to that element. In this video, we show you how to add a popover component as well as the configuration options for these components.

So whether you're new to UI Builder or a seasoned pro, these upgrades can help you build better pages quicker! See the Builder library to learn about other builder tools on the Now Platform®.

For more information:

UI Builder (Product documentation)

UI Builder courses (Now Learning)

UI Builder content (Developer site)

Builder library (Product documentation - list of all builder tools on the Now Platform)

Working in UI Builder (ServiceNow Support YouTube channel video playlist)