Now Experience UI Framework: Forms

If someone asks “What is one of the most significant functionalities of ServiceNow?” I believe many will answer “Forms”.

Form is a the most fundamental component of the platform that allows you to define input fields and collect data.

Once you create a form you can use it for data collection everywhere: ServiceNow native UI16, Service Portal and UI builder.

Using forms in UI builder is a bit tricky because it requires wiring up multiple items, but it is a straightforward process. Once you get it — you will be able to build advanced form interactions and functionality.

Let’s create a simple incident form and add the ability to update the record.

1. Add “Form” component to the page

ServiceNow offers out of the box “Form” component that we add to the page:

You may think that it’s self-explanatory and start populating properties right away. But it’s not that simple. To have a full power of ServiceNow forms we need to connect a data broker.

2. Add data broker

Go to data brokers and add Form data broker.

This data broker serves two important purposes:

1. Connect Form component with ServiceNow platform back-end
2. Provide API to manipulate the data.

The broker needs to be configured with the table name, sys_id and a form view. Usually, that needs to be done programmatically. In our case we’ll populate them manually, just for testing purposes:

• Table — incident
• Sys ID — 9d385017c611228701d22104cc95c371
• View — ess

3. Connect the form with the data broker

Data broker exposes several data properties that should be supplied to From component:

1. nowRecordFormBlob.sections— list of all form sections

2. nowRecordFormBlob.fields — list of all fields and sections

You would connect the form with the data broker by supplying broker references to component properties. Here is what you need to do:

1. Add @data.glide_form_1.nowRecordFormBlob.sections to the Sections property of the Form component.
2. Add @data.glide_form_1.nowRecordFormBlob.fields to the fields property of the Form Component.

We are almost done here — you should be able to open an Experience page and see an incident form with actual data.

But how can we modify and save the incident data? Just one more step.

4. Update the form

Add a simple button on a page, and then create a client script that will be responsible for updating an incident. The script will have just one line of code:

gForm reference in the script is a direct reference to a standard GlideForm API, where multiple functions are available. You can explore all of them by console.log gFrom object:

Now add that script as an event handler to the button, so when the button clicked the script will be executed and incident data will be updated in ServiceNow.

And that’s it!

Now you can open the page, modify incident data and click the Update button to save your changes.