Now Experience UI Framework: custom components

It’s being just a month since the full scoped Now Experience UI Framework has been released, and the exciting news for ServiceNow developers coming out almost every day.

Once you start digging through development concepts you will realize that it’s a very structured approach: page/component state, events, client scripts, and data brokers — those are your basic lego blocks.

The true power of the Now Experience UI Framework belongs to custom components. That is where you have limitless possibilities and can use all of the available web development technics, frameworks and libraries to build ServiceNow functionality.

You hear me right — React, Angular, Vue and… (you name it) can be used for building custom ServiceNow components. It is tricky though (of course).

I will share an example of a custom-built component that you can use in your ServiceNow instances.

Do you remember a signature pad widget for Service Portal that was released about a year ago? Now you can download Signature Pad as a custom UI component and use it in UI builder.

Install Signature Pad component

The first step is to download and install the update set. Update set contains a few items. You can explore it — that’s a good opportunity for developers to see what kind of configuration items establish a custom UI component that includes events and properties:

Use component in UI Builder

Once you install the update set the component will become available in UI builder automatically. Now you can open any existing Experience / Page (or create a new one) and add a component:

The component provides several properties — you would set those properties programmatically according to required business logic:

• Table: ServiceNow table where a signature image should be attached to
• Record SYS_ID: sys_id of the actual record in ServiceNow table to attach the signature
• User name: User name to be embedded into the signature image
• User ID: User ID to be embedded into the signature image

For testing purposes, you can just populate them manually — make sure you pick the existing table (e.g. incident) and sys_id. You can put any values into User Name and User ID fields:

The last thing we need to do before the final test — setup an event handler.

The component exposes SIGNATUREPAD_RESPONSE event that helps you to track the status of a signature submission — whenever a signature is submitted ServiceNow responds with the status of that submission. The component takes that status and fires an event, so you can put any kind of trigger on that event.

Let’s create a very simple event handler, go to client scripts and create a script — just one single line of code to console.log event details:

Then go back to the component and bind the event with the client script we just created:

We are done. You should be able to open a page, submit signatures and see the response from ServiceNow regarding a new signature file in a console log:

If you navigate to the record (table/sys_id you specified in params) you should see the signature file:

Summary

Here comes your imagination. Whatever functionality you need in your ServiceNow applications — it is absolutely possible to implement through custom Now Experience UI components.

It may take some time to design and implement such components, especially if you’re looking for advanced functionality. But it worth the time and efforts, and open limitless possibilities.