Port/VLAN Configuration (IOS) - JSON Form

In this module, we will build a JSON form. A JSON Form is just one of the ways an automation can be triggered.  For our use case today, this form is how users will submit the information needed when running our Port Turn Up automation.

JSON Form Video - Part 1

Step 1

From the Itential Automation Platform dashboard, click Automation Studio in the left navigation panel.

Step 2

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

Step 3

The Create window opens. Click the dropdown menu and select JSON Form in the What would you like to create field.

Step 4

Enter the name Lab - Port Turn Up - IOS Form - XX, where XX is your initials. Click CREATE to create the form.

Step 5

JSON Forms also utilizes a drag and drop interface. By clicking the Form Elements found on the right panel, you can select which types of fields appear in the form.  There are seven types of form fields or elements to choose from.  The first element we need is an auto approve checkbox.  Click and drag the Checkbox form element to the canvas where we can see the text Drop elements here.

Step 6

When the element reaches the canvas, a red box will appear indicating where the element will be placed.  

Step 7

Once the element has been added to the form, an ellipses icon will appear in the top-right corner. Hover the mouse over the ellipses to see the gear icon.

Step 8

Click the gear icon to configure the form element.

Step 9

In Itential's Port Turn Up Pre-Built automation, there are a few manual approvals for the user to confirm.  In our form, we will create an Auto Approve checkbox that bypasses these manual approvals for scenarios in which we do not need a user to confirm that the automation should proceed.  For our checkbox element, enter the name Auto Approve in the Label field.

Step 10

We will accept the default settings for the remaining options and click Save.

Step 11

Our next element will let the user determine our target device.  We will choose the Dropdown element for this field.

Step 12

Add a Dropdown element to the canvas.

Step 13

Hover your cursor over the ellipses in the upper right corner of the Dropdown section and click the gear icon.

Step 14

Type Device in the Label field. Select Yes for Required, and accept the remaining default settings. This time click + Options in the lower right corner to set another option.

Step 15

Within the Options section, we have the option to create a static dropdown in which we define the dropdown values or dynamic that would be populated by making an API call.  For the sake of simplicity, we will select Static. Click the + Option button.

Step 16

This is where we can add choices for our dropdown. We will add only one here, but multiple entries can be added. Add IOS and click Back.

Step 17

Click the Save button

JSON Form Video - Part 2

Step 18

Use the same process to complete the form using the fields specified below:

• Add a Dropdown
  • Label: Type
  • Required: Yes
  • Read-Only: Yes
  • Placeholder: Choose interface type
  • Static Options: GigabitEthernet
• Add a Number Input
  • Label: Interface
  • Required: Yes
  • Read-Only: Yes
  • Placeholder: Enter interface ID
  • Minimum Value: 1
  • Maximum Value: 24
    
• Add a Text Input
  • Label: Sub Interface
  • Required: Yes
  • Placeholder: Enter interface ID
• Add a Text Input
  • Label: Description
  • Required: Yes
  • Placeholder: Enter interface description
• Add a Text Input
  • Label: IP Address
  • Required: Yes
  • Placeholder: Enter IPv4 Address
  • Format: ipv4
• Add a Text Input
  • Label: Subnet Mask
  • Required: Yes
  • Read-Only: Yes
  • Placeholder: Enter Subnet Mask
    
• Add a Text Input
  • Label: VLAN
  • Required: Yes
  • Placeholder: Enter a VLAN

Step 19

If there is a value that should be populated by default within the form, the user can enter it on the form element on the canvas. 

Step 20

Complete the default values for the following fields:

• Type: GigabitEthernet
• Interface: 1
• Subnet Mask: 255.255.255.252

Step 21

The JSON Form Canvas should look like the image presented in the video. Click the Save icon. Click the Preview icon.

Step 22

Complete the form using the following data:

• Auto Approve: selected
• Device: IOS
• Type: GigabitEthernet
• Interface: 1
• Sub Interface: 300
• Description: Test Interface 1.300
• IP Address: 10.20.30.1
• Subnet Mask: 255.255.255.252
• VLAN: 300

Click the Show Form Data button.

Step 23

This is the format in which the data will be submitted when executing our automation from Operations Manager. Hover the mouse near the text 9 items at the top of the list, and click the clipboard icon to copy the text.

Paste the text into a text editor, such as Notepad. You will use this data when we build the Transformation.

Click the Close button when you are finished.