The Now Experience UI Builder is a platform
application, released in Quebec, that allows you to build web-based Workspace and portal
experiences one page at a time. It has a modern layout system that removes
many of the limitations from the legacy layout engine. If you can do it in CSS, you can likely do
it in UI Builder – giving you full control over how data is displayed. The application is activated on zboot, so
there’s no need to install a plugin. Before you start building your first experience,
there are seven tasks we think you should know how to do. Create a new page, name it, and customize
a path. By default, this new page contains one slot. Apply a layout to the slot. Layouts are made of up one or more containers
in various configurations. We’ll stick with the one-container layout. Add components to the container like an activity
stream, button, or calendar. Bind an event to a component. The majority of the components when added
to the stage are in an unconfigured state. Binding is what happens when you configure
the component to react to an event. For example, a button that triggers a pop-up
modal to prompt the user for a confirmation before an action is executed. Like requesting approval to delete a record. Show different content for different groups
of people within your organization through variants. A variant is simply a page duplication with
the same path, allowing you to make changes to the duplicated page. You can then assign audiences and control
who sees which variation. Your audiences can be comprised of allow and
deny lists that include Role and Domain. If the UX Framework User Criteria plugin is
enabled, audiences can also target role, group, user, company, department, location, script. This prevents rebuilding a page from scratch. Then, assign an audience to it. Add tabs to a component sidebar. The tab set component is a viewport component
which essentially lets you create a page within a page if you’re in the “manage content”
mode. Build each tab just like you would in a normal
page or experience. Tabs can have their own variants and you can
assign specific audiences. Let’s build a new tab. Name it, apply a layout if needed, assign
an icon, and click done. Now add components to the tab and save. When we go back to the stage, we can see the
new tab created. It’s also listed in the configuration panel. Make pages dynamic with data binding. Meaning, show current data at runtime using
URL parameters, like a table, to fetch data from the back end of your instance. To do this, enable dynamic data binding for
the table and specify the at-syntax. There’s a second way to bind data and that’s
through data resources. First, let’s add a container – this gives
you more control over how the data is displayed. Then add a component. We’ll add a text component, change its formatting,
and bind the text to a property within a data resource. Specifically, we’ll bind it to a property
that displays the date and time. Immediately, the text dynamically changes. You’ve seen this quick start video, but
there’s still lots to learn around how to actually complete each of these tasks as well
as other tasks. You can learn more by reading the product
documentation and visiting the developer portal. When you’re confident in completing the
tasks, have a vision for the experience you want to deliver, and know which components
to add … you’re ready to build your first page! For more information, see our product documentation,
knowledge base, or podcast. Or ask a question in the ServiceNow Community.