Form Field - Script Editor

The Script Editor component enables users to write and edit scripts, such as JavaScript, Python,JSON, XML, YAML, and many more within the form. It offers a text editor with syntax highlighting for script editing.

Editing Text Area Properties

  1. Go to (Menu) > Automation > Service Catalog > Design.
  2. To design a new form page, click the + (Design) icon.
  3. Click the + (New Page) icon.
  4. On the displayed new page, in the Switch Layout pop-up, select either Single Page or Multi page to proceed. (You may even close the pop-up without selecting any option. Single Page is the default layout applied.)
  5. On the left click Build, and scroll down to view the Form components.
  6. Select Script Editor and drag it to the right on the new page.
    The Script Editor component is added in the form, with icons to Move, Edit, and Delete.
  7. To modify the properties and styles click the Edit icon. Refer to the sections below.

Editing Script Editor Properties

The edit panel opens on the right with Properties selected as the default tab.
Table 1. Field description for Properties
Fields Description
Label name Enter a valid name for the component.
Values Allows you to define a values that will appear on the page load in the preview and published mode. Once the page is loaded, values can be edited in the field.
Field ID An auto-generated Id for the field, this can be edited. The IDs are useful while creating hooks.
  • Allowed characters: ‘-‘ and ‘_’
  • Character Length: Min (1), Max (50).
Hooks / Data Source Allows you to assign an appropriate hook for this field. For example, a hook to fetch the current date.
  • Select a hook that is relevant to the form field.
  • Hooks can be either Script or REST API.
  • Hooks are used to fetch details against a specific form field from the device and/or database and map them to the respective field on the user interface.
Note: For more information on Assigning Hooks to Form Fields, click here.
Depends on The "Depends On" property enables rendering a field based on the selected data of another field. It establishes dependencies between form elements, dynamically updating the form layout based on user interactions. For example, if a user wants to render a field to enter email id, only if the username matches admin then the depends on value will be like username:admin . Ideally the syntax would be field_id:value
Examples are: 
username:admin
username:admin&password:admin
(username:admin)|(password:admin)
(username:admin)&(password:admin)
((username:admin)&(password:admin))|(device:adc)
(username:admin)|(password:startsWith.a)
(username:admin)|(username:admin,user 1) //for multi -select box
Note: For AND operations only single ampersand (&) is used and for OR operations only single pipe ( | ) is used
Validation The Validation property provides users with the ability to define validation rules for form fields. These rules ensure that the entered data meets specific criteria, maintaining data accuracy and integrity. Users have the privilege either to use the validations already available or create custom regex validation. Example: sample validation for

No special characters and spaces are allowed except('-', '_') and name should not start with special characters. Maximum length mismatches. Maximum Length - 255

Validation Regex would be: ^[^_-][a-zA-Z_-]{1,255}$
Parent ID Allows you to assign a Parent ID for fields in a table. Select the relevant tabular component (Field ID) against which the form field must be mapped to.
Note: This is used only when defining a tabular element in the form.
Help Allows you to add Help text/tool-tip for the field.
Mandatory Allows you to define this field as Mandatory or otherwise. If marked as mandatory, an asterisk (*) is displayed next to the field name in the form.
Read only Allows you to define this field as read only or otherwise. If marked as Read Only, a red crossed circle is displayed when you hover your mouse over the read only field and does not allow you to enter any information.
Global variable The "Global Variable" property enables users to reference and use global variables within form fields. These variables provide dynamic values that can be utilized in calculations or conditional logic within the form.
Hidden Allows you to hide the field in the form. Used mainly in the configuration of hooks.
File Upload Allows you to add an option for uploading files to the ace editor field.
File Download Allows you to add an option for downloading files from the ace editor field. The following fields are displayed when the toggle is enabled.
  • File Name - Enter the name for the file to be saved when downloaded.
  • Download Type - Select the file type for downloads (TXT, YAML, SH, CSV, PDF, JSON.)
Theme Allows you to select between a light or dark theme for the ace editor.
Mode Allows you to select the script editor mode from the drop down menu.
Save / Cancel buttons To update the changes, click Save.

To undo the changes, click Cancel.

Editing Script Editor Styles

The edit panel opens on the right, click the Styles tab to configure the overall appearance.
Table 2. Field description for Styles
Fields Description
Font
Weight The Weight dropdown list lets you set the font thickness of the field label using one of the following values: Default, Light, Normal, Bold.
Size Allows you to increase/decrease font size of the component/label name.
Line height Allows you to increase/decrease the line height of the field. This means the space between the field and the field border.
Color Allows you to define the color of the component/label name.
Align Allows you to align the field name to the left, center or right side of the form.
Field Size Allows you to define the size of the form field as Small, Medium, or Large.
Save / Cancel / Restore buttons To update the changes, click Save.

To undo the changes, click Cancel.

To restore the settings to default, click icon.