Creating a Dynamic Form Widget in ServiceNow Using JSON Configuration 

ServiceNow is flexible to the extent that it allows you to create custom widgets. The purpose of this customer widget is to give users a better experience. In this blog post, you will learn about creating a dynamic form widget in ServiceNow. 

The Challenge  

One of the requirements was to create a widget where users can input a JSON configuration and dynamically generate a form. With this approach, it provides a flexible way to build forms based on configurations from the user end, and supports string and reference fields. 

The Solution

The dynamic form widget lets users input a JSON configuration. This configuration then dynamically generates a read-only form. The form generated by the widget is based on the specified configuration. With the help of sn-record-picker, the form supports both string fields and reference fields. 

Widget Overview 

There are two main sections as far as the widget overview is concerned. The first is a text area that entertains JSON configuration. As far as the second section is concerned, it is a dynamically generated form that is based on the JSON configuration. 

Implementation Details 

Here is a detailed guide about the implementation components of the dynamic form widget.

HTML 

A textarea for the JSON input is included by the widget’s HTML part. Besides this, a button and a section are also included to display the form that is generated.

• Textarea for JSON Input: A textarea (<textarea>) is the space that allows users to input JSON configuration. Textarea makes use of AngularJS’s ng-model directive and binds the input value to c.jsonConfig. 
• Button: The makeForm function is triggered by the button when it is clicked. 
• Generated Form: An ng-repeat directive is used to generate the form. This directive iterates over c.res, and creates each field with the help of a custom directive (json-form-directive). 

Client Script

The JSON is broken into parts by the client script for better visibility. The client script also initiates the server call to get reference data whenever it is needed to do so. 

• Controller Initialization: The controller with default values for jsonConfig and formVisibility is initialized in this step.
• makeForm Function: This function breaks the JSON input so each item can be separately checked. If the item is of type “reference” and has a table property, it sets the necessary data and calls the server script to fetch the reference data. Once the data is fetched, it sets formVisibility to true to display the form. 

Server Script 

The server script fetches additional data for reference fields based on the input.

• Data Retrieval: GlideRecord queries the specified table if the input data is given. The sys_id fetches the display name from the reference field. This data is then returned in order to be used in the form. 

Directive 

The directive is the unique part of this widget. It dynamically generates form fields based on the JSON configuration. 

How the Directive Works 

1. Initialization: When the directive is used in the HTML, AngularJS initializes it and isolates the scope with the provided attributes. 
2. Template Rendering: Based on the typ attribute, the directive template either renders a read-only input field for string types or a sn-record-picker for reference types. 
3. Controller Logic: The directive’s internal controller initializes the picker object so that sn-record-picker displays the correct reference data. 

Example Usage 

When you input the following JSON into the text area and click the “Make Form” button, the widget will generate a form with two read-only fields. The first field is for the first name, and the second is for the department. The name of the department is displayed by using a sn-record-picker.

Conclusion 

This widget illustrates how to utilize AngularJS directives to create a dynamic and customizable form in ServiceNow. By allowing users to specify form configurations through JSON, we provide a flexible and powerful solution in ServiceNow for rendering read-only forms with multiple data types. 

This pattern does not need to be limited to just the field types and configurations that are mentioned here. Rather it can support additional field types and configurations. This is the reasons why this tool is so versatile and has a number of different use cases. Get in touch with us and let us create dynamic form widget for you!