Create and Update Change Request (ServiceNow) - JSON Form

Next, we’ll build our JSON Form. This form is how users will submit the information needed when running our Update Change Request automation.

JSON Form Video

Step 1

From the IAP Dashboard, click Automation Studio. 

Step 2

Click the + at the top of the left navigation panel.

Step 3

The Create window opens. Click the dropdown and select JSON Form.

Step 4

Enter the name Lab – Create and Update Change Request – ServiceNow - XX (where XX represents your initials) and click Create.

Step 5

We use a drag and drop concept within JSON Forms. By clicking the Form Elements found on the right panel, you can select which types of fields appear in the form. 

Step 6

There are seven types of form fields or elements to choose from. We will drag several Form Elements to the area marked Drop elements here.

We click and drag the Text Input form element to the form canvas. When the element reaches the canvas, a red box will appear indicating where the element will be placed.  Place the Text Input element on the canvas.

Step 7   

Next, we need to configure the Text Input element. Hover the mouse over the three dots located in the upper-right corner and click the gear icon.

Step 8

The Configure window opens. For Label, enter Title. Next, let’s make this a required field. Click the Yes radio button. For the Placeholder, type Enter CR Title.

Click Save.

Step 9

Next, add a second Text Input. We drag the Text Input element to the canvas and hover over the three dots till we see and click the gear icon. 

Step 10

The Configure window opens.  For Label, enter Summary. Make this a required field. Click the Yes radio button. For the Placeholder, type Enter CR Summary.

Click Save.

Step 11

Next, we need a third Text Input. We drag it to the canvas and click the gear icon.

Step 12

The Configure window opens.  For Label, enter Description. Make this a required field. Click the Yes radio button. For the Placeholder, type Enter CR Description.

Click Save.

Step 13

Next, we will need a Dropdown.  Dynamic dropdowns can be a valuable tool when it comes to offering your users dynamic data from your source of truth, like NetBox, Infoblox or GitLab. In this scenario, we’re going to use it to pull a list of configuration items from ServiceNow for the user to select.

We drag the Dropdown element to the canvas and open the Configuration window.  

Step 14

Label the field Configuration Item and make it required. For the Placeholder, type Select a Configuration Item. The Dropdown element requires options as part of its configuration. 

Select the + Options button.

Step 15

The Configure Options window opens with two options.  We select Dynamic.

Step 16

For the Request Configuration section, select Post for Method. For Base URL, click the dropdown and filter for /ServiceNow and for API Route, we click the dropdown and filter for /getConfigItems.

Step 17

Copy and paste the JSON Form request body from the article.  We are ready to make the API call.  Click the Make API Call button.

{
  "sysparmQuery": {
    "sysparm_limit": 10,
    "sys_class_name": "cmdb_ci_ip_router",
    "sysparm_fields": "sys_id,name"
  }
}

The Response Body is shown on the right.  

Step 18

We’ve just made an API call to ServiceNow’s API that retrieves all its stored configuration items. Now that we’ve seen what kind of data is provided by the API, we’re going to filter out only what we want to show the user within the dropdown. Scroll down to configure the Data Mapping section. In the Data Mapping section, select /response for Source Property and for Property key, click the dropdown and select /name.

Step 19

Next, we want to click the Query Data button.  It shows what will appear in the dropdown list. Two options will appear, IOS and EOS.  Click Back and then Save.

Step 20

Our form is now complete. Verify your JSON Form looks like the image shown.

We know that users will be submitting data using our form, but when doing that the values are not sent to the workflow individually as our workflow currently expects; they are sent in as a single variable called formData. To handle this, we will need to transform the data. To do that, we’ll build a Transformation.