UI Builder in ServiceNow

With Travis Castleman

In this article, we're going to build a workspace experience, landing page, and go over the ServiceNow UI Builder at a very top level just to get you started. The Next Experience UI Builder is a web user interface builder. Use UI Builder to build pages for CSM Configurable Workspace, App Engine Studio generated workspaces and portals, or custom web experiences using Next Experience Components and custom web components.

Creating an Experience

The first thing we want to do is open up UI Builder, and the easiest way to do that is to either search Now Experience or UI builder. We’ll then select UI Builder. When it opens up, you will see your PDI. For this example, we're going to select Create experience. You'll see that we have fields for the following: name, app shell UI, URL path, landing path, roles, and application. We will leave Global in the application scope. We're going to give it a name, Simple workspace.

For the App shell UI, we will select Agent Workspace App Shell because that's what we want to work in. You will see it automatically populated the URL path, simple, and the landing path, home. We're not going to add any roles to this; we're going to keep it easy today. Let's select create. Again, we're not going to apply any ACL rules or anything like that for this example.

Creating a Landing Page and Variants

We now select open up experience, and you'll see there's nothing here right now, so let's go ahead and select create a page. We are going to name it Landing Page because that's what we're going to build today. You can see that it automatically gives you the path. You can also pick a template; there are a bunch of templates out there. In this case, we don't need a page template, we're going to create our own. We will select create and the first thing you'll notice is a successful page created message.

In the Success! box, we can add required parameters, optional parameters, and access controls. Required parameters are parameters that will put it in your URL, so if you're on the record page, we can give it a table parameter and a sysID parameter. This will allow us to pass in those parameters to that record page to allow you to see the table that it needs to use and its sysID of it. It will also display all the information for that record. In the case of our landing page, it's just simply a landing page, so we won't worry about the required parameters or optional parameters, for now, we'll just select done.

We now have our landing page which is the only page we have created, but we can switch pages if we were to create more. We have our variants for this page, so if we wanted to have an ITIL-specific landing page and then a major incident or HR for the landing page we can do that and use the same space, just have different variants. You can push those using audiences, which is rule and group based, or use those parameters as conditions inside your variant. For our example, we don't need a variant, we're just going to create one landing page.

Adding Components to a Landing Page

On the left-hand side, you'll see your content. When we start populating content we can add components directly on the content left-hand nav or we can hit the plus button and add components here. Once we start adding components, you'll see each component has three tabs: config, styles, and events. Your config are the properties of that component. For example, if it's a record or form component, you're going to want to know the table of the form component, the sysID of it, the view, etc.

Styles is what it says — it's styling, it's your CSS. Since we're in San Diego, we're on the Polaris theme which makes it a little easier for you to decide how you want to style things. It gives you stuff that's set as properties so you don't have to write the CSS. However, if you did want to write the CSS, it's perfectly okay to come in here and select view and edit CSS and you can style it there if you'd like.

Events are what happens when, for example, we have a button on our page and we want an event to happen when we select that button. Let’s say you select that button that we added an event to, and maybe that another event links us somewhere, maybe it opens up a Modal — whatever the case, that’s where events are handled.

Edit Experience Settings

The edit experience settings are going to have your four general topics here: general, branding and theming, side navigation, and utilities. In the general section, you have the title of your workspace; you can give it a description, and you can give it a path. With branding and theming, we are able to see which theme we are using; in this case, we are using Polaris. Next, we have side navigation, and this is going to be the navigation you see on most workspaces on the left-hand side, where you have usually your home, a navigation or list link, or notifications that you get inside your workspace while you're working on it. Then, we have utilities where we can turn on our notifications that allow users to get notifications while they're working inside this workspace, or for something that’s been assigned to them. Here, we also have the option to add global search.

Starting a Side Navigation

We are going to start with our side navigation. We're going to add a page — in this case we only have one page, so we will select our landing page. We are also going to give it the home icon; in this case, we’ll use the outline feature.

We'll give it a label of home. We do want it to be on the top, and it is going to be the first in the order, which means we'll leave it at 100. We're going to save all changes, and this will take us back to our UI Builder. We're going to hit open for now and you're gonna see there's no other content available because we haven't created any, but we do have our top header here (reference video at 6:28).

The left-hand navigation is not set here, so sometimes what you need to do is open up that config file that we opened up. You can see that there's now a UX page property under Chrome toolbar, so let's kick into that. The value here is actually JSON, which is a JavaScript object that's used to display data, pass data, and do a bunch of different things. Right now our type is set to string, so really all we need to do there is go to JSON and hit update. When we go back to our landing page, we should see on the left-hand nav here (reference video at 7:04).

Creating Another Property

We want to do one other thing, one other property here, so we are going to go ahead and grab it from another workspace that we have been working in to test things. We're going to select new, and name this chrome_tab. We’ll set JSON as our type again, and then copy and paste in the value field (reference video at 7:17).

We are also going to change the table in our value which will allow us to get our tabs at the top of the workspace. Workspaces have those nice hierarchy of tabs, where if you're in one incident, or list view, you have a tab for it. Once you come down into that record view of that incident, you have multiple layers of tabs under that including details tab or any related lists you want to use — in case you're on a change request or incident that has a CI Associated to it, you will be able to open that CI, see the details and then quickly get back to your incident to try to help alleviate that incident and solve it.

In this case, we are just going to change this to incident because that's the table we want to open when we hit the plus button on our tabs, if we want to open up a new record. In this case, it'll be a new incident record. A -1 sysID denotes a new record instead of it having a record that has a sysID that's already created in the system, negative one is for that. We will hit submit, then we can close this out and refresh. We should be able to see our tabs now. In the future, we’ll explore the Add Tracker feature.

Adding Components to your Landing Page

Now we've got this set up as a basic workspace, and we just need to add stuff to it. Let's go ahead and start adding things to the landing page. The first thing we want to do is add a container component; think of containers like divs for your HTML it's kind of just a section of you you want certain things inside it. If you were coding HTML you would have your header, body, content body, and then your footer. In this case, we're just going to make a simple text box at the top and give it some styling. Then we'll start adding some components under that and we will go over the expansive component library.

Adding a Header to your Landing Page

Let's select add component on the left-hand side and select heading. We'll label this Welcome to your Simple Workspace, and for this example, we'll keep it a level 1 header - primary. Let's go ahead and save it. We will come back up to the container and go to our styling (reference video at 10:06). We want to keep this as a column because we're not going to put anything around this — this is going to be the only component in this container — but we do want to center it. We will also give it maximum height; in this case, let's set it to 55 px.

Now, we will give it a background for visual purposes. We're going to have our colors from our theme. These are the colors from the Polaris theme, and we can certainly change that in the future. For now, let's just keep it with that so we don't have to re-theme everything. Let's give it a background color, a medium drop-down shadow, and hit save. When we go back to our landing page, we should start seeing the content we just added.

Adding a Container to your Landing Page

Let's create another container. Under our header, inside our first container, we can hit add, and this will allow us to add another component right under this one. You can also utilize the column on the left sidebar; this method will save you from potentially selecting the wrong thing and having to redo it. It's much easier if you do it in a linear fashion, and then edit as you go. In this case, we're just going to go to the left sidebar and select add a component after.

How to Utilize Filters on your Landing Page

We're going to add another container, and for this one, we actually want it to be a row so that we can add a couple of things. We are going to put a couple of incident and problem data visuals on here. We want to have some leverage over those working in the future, so we are going to put a couple of filters in here. We see our first data source. We're going to use this filter to filter things on the incident record.

We are going to start by selecting add on the right-hand side. From there, we're going to type in incident, and we're going to filter stuff that's going to be priority-based. We are doing this because our first data visual is going to be based on priority one, twos, and threes. We will save that, and our priority filter is good to go.

Let's add one more right under it, and you’ll learn how the row works. We'll add another filter using incident again, and let's use assignment group. We'll use this in the future if we want it based on our assignment groups and if you're looking for a certain assignment group, and we will hit save. Now, let’s give this container some padding, just something small, no background needed. Let's do it on each of the filters as well, and go extra small for that, and then extra small for the other filter as well (reference video at 13:15).

How to Add Properties to Landing Page

If we actually go into one of these filters and go to the config file, you can see the properties you can add here. You can actually add some more values if you want to figure off of it, and you can set up a priority label. In this case, we do want to say, answer to the priority, because if we have an incident data visual and then a problem data visual it might confuse everybody about what priority we're looking at.

Let's start with Incident Priority. We're not going to put any default values in there; we're just going to let it be as it is, and select ascending (reference video at 14:00). Assignment group is correct as this is actually a reference to assignment group. Let's go ahead and hit save and load our page to see how it looks. Now we have some filters here, and you can see once we start adding our data visuals, it’ll show here.

Adding a Bar Chart Data Visual

Let’s now move on to our next container and start adding some data visuals. Again, we're going to say configure → add a component after. We're going to add another container, and we want this to be a row as well. For this one, we are going to actually add a background color just to separate it.

Now, let's jump into adding our components. We're done with the filters, but we want a data visual. When we say data visual, we mean a report. On the back end, when you're using your home pages, or workspaces, you're allowed to choose reports that are already in the system. When you're using the UI Builder, they don't pull from the back end of the system the reporting you already have; you have to create your own, which is not bad because they're pretty easy to set up and they're straightforward.

We're going to pick our data visualization, and we're going to make this a bar chart. There are a bunch of different charts here that you can use. For our example, we are going to use a vertical bar chart. We will give it a header, header separator, and title. We also want to give it priority one, two, three incidents.

We're going to add a data source. You can search for any table on here. We’ve got some tables that have already been used here, so we are going to go ahead and pick the incident. This will load up some predefined filter conditions, if you want to use them. In this case, we are going to set it to add all the custom filters here; set active is true and priority is one of 1,2,3.

For our example, when we run it, you can see that we have the ones, twos, and threes in there. Now, let’s add the source. We're going to keep it as the count incident. We do not want to group by action status; we actually want a group by priority because we want the ones, twos, and threes. Let's hit apply to see the update.

Styling your Bar Chart

The one thing we want to note is that it is taking the background of the container color we have now to separate things and make it more aesthetically pleasing. We are going to remedy that. You can use sorting to sort it by value or name, descending or ascending, and data update.

If you want to show filters, there are a couple of different things there for your options. In your presentation display settings, you can add your data labels, switch up the colors and pick from a color palette or a fixed element color. We won't do this for our example, but we do want to get some of the styling cleaned up for this data visual.

To do this, let's go to our styles. For height, we like to use 400 pixels, and we do want to take out 50% of the screen, so we're not going to use any padding around this. For the background color, we do actually want it to be neutral so it stands out a little bit. While it doesn’t look exactly how it’s going to look on the backend, you’ll have to accept that as a UI Builder thing for now, and we’ll show you when we refresh the landing page.

Creating a Pie Chart Visual

Let's add one more data visual. We will select add component after because we know it's a row and it’s going to be right beside our other visual. We are not going to use single score; we're going to use a pie. For the header and border, we're going to type: my groups problems. Let’s add a data source, and we're going to pick problem this time. We are not going to define any predefined conditions; we do want to say active is true and assignment group is (dynamic) one of my groups (reference video at 19:01).

When we run it, we will see all the problems that are in our group because we’re in the software and hardware help desk and our PDI. Let's let that load. Our count is good. For