ServiceNow UI Framework

ServiceNow recently made a gift for a development community by releasing UI Framework which enables you to build custom web components. It is a very powerful web development tool, and it comes with a number of out-of-the-box components. With no doubts, eventually, it is going to change the way you build ServiceNow applications.

Currently (April 2020) UI framework has some limitations you should be aware of. We don’t know for sure why ServiceNow impose those limitations, but unfortunately, they may seem like a showstopper for many developers and can significantly affect the adoption of the framework. Hopefully, ServiceNow will lift those limitations in the next releases.

There are two important issues:

1. No data-management components are available.
2. You are locked inside of the Agent Workspace app.

No data-management components available

The ability to enter, submit and modify data is vital for business applications. Currently, UI framework does not provide components for that.

The Service Portal approach we are all familiar with (when you build a form in the native UI and then render it with Form widget on a portal) just does not work — there are no available components to render a form.

So if you have a use-case when you need to collect some data from a user or provide a form where a user can modify the existing record — you’re out of luck and need to build that form and data connection manually from scratch. That is possible and doable but may come with a lot of efforts.

To be truly honest, I have to mention that there is a component, which renders a form, but it is not available for development purposes:

The name of the component is now-record-form-connected (you can find it in sys_ux_lib_component table), Agent Workspace utilizes that component a lot:

How to escape Agent Workspace app

So we can build sophisticated web components with the ServiceNow UI framework, and what’s next?

Unfortunately, the only place we can deploy and use components is the Agent Workspace app. At least that’s what the documentation says. The documentation does not provide details on how to build a web application (portal/page)… but that does not mean you cannot do that :)

First, you need to understand the concept — how the web application (built with UI framework) works in ServiceNow. There are five tables with different purposes, they define a structure for a web app. So every web application will need at least one record in each of those tables:

Agent Workspace application has been built and works based on those tables.

Before you start setting up a web app — make sure you add create/write ACLs to the following tables : sys_ux_page_registry, sys_ux_page, sys_ux_page_element. By default ServiceNow does not allow creating records in those tables manually, and we want to override that. ACLs should be created in a global scope and you will end up with something like this:

There are 5 steps you need to take in order to construct a stand-alone web application in ServiceNow. To make things simple, let’s assume that our web app is a single web component which prints “Hello world” on a screen.

Step #1. Create a new application scope, or use any of the existing ones:

Step #2. Create a new web component — a new record in sys_ux_lib_source_script table. Technically, our example is not a true web component, it is just a script which will be executed by ServiceNow in a browser:

Step #3. Create a component definition for a new component — a new record in sys_ux_lib_component table, pick the component from step #2 as a source script:

Step #4. Create a page — a new record in sys_ux_page table:

Then create a UX page element — a new record in sys_ux_page_element table, then select UX page you just created and the component:

Then go back to the UX page and pick UX page element you just created as a Root Element:

Step #5. Final step! We are almost done. Create a new page registry — a new record in sys_ux_page_registry table. UX page registry contains two major properties: URL path to your app and the UX page (step #4):

Now you can access your web application by the following URL:

Here is the result:

In the step #2 you can use your custom components built with CLI . That gives you a true web component running in ServiceNow as a stand-alone web application.