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.