Harsh_Deep
Giga Sage
Giga Sage

In ServiceNow Client Scripts, the control parameter denotes the field element (HTML control) that causes an onChange event. When you construct an onChange Client Script, the control parameter is immediately supplied to the function, allowing you to interact with the field that caused the event.

Here's a summary of how control works, its uses, and examples that demonstrate its application:

 

Understanding Control Parameter in Client Scripts
In a onChange Client Script, you write a function with four parameters: control, oldValue, newValue, and isLoading. The control argument specifies the HTML element of the field where the change occurred. This allows you to manipulate the field in the form without having to type its name.

 

Benefits of Using Control
Direct Reference: Instead of referring to a field by its variable name (such as g_form.getValue()), control allows you to interact with it directly.
Enhanced Readability: It improves code readability by eliminating the requirement to call g_form.getValue() or g_form.getControl().
Contextual Actions: You can use behavior or styling directly on the triggering field.

 

Example Use Cases of control

  1. Changing Styles Dynamically You can change the style of a field based on user input.

Example: Highlighting Field with New Value

Harsh_Deep_0-1731307591167.png

 

In this example, if the newValue is set to "Critical," the field background color will change to red. This is useful for visually alerting users to critical information.

 

  1. Displaying tooltips or messages based on field values You can give users hints or feedback right on the field itself.

    Example: Displaying Tooltips on Specific Conditions

Harsh_Deep_1-1731307591175.png

 

In this script, when the newValue is "high," a tooltip is added, guiding the user to verify the priority setting.

 

  1. Enabling or disabling fields dynamically. Fields can be enabled or disabled based on changes in other fields, and you can dynamically reference individual fields with control.

    Example: Enable field only if condition is met.

Harsh_Deep_2-1731307591184.png

 

 

Here, the description field is enabled only if the triggering field's value is set to "Approved."

 

Additional Tips for Using control

  • Access HTML Attributes: You can directly access HTML attributes like style, title, disabled, etc., to manipulate the field visually or functionally.
  • Event Handling: You can attach event listeners to control if you need more complex interactions, though this is rarely necessary in ServiceNow.

Mark Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.

 

Regards,

Harsh Deep Singh

Comments
Anish Reghu
Kilo Sage

Beautiful and nicely done. For everyone else looking at this article,  here are some most used and commonly controlled properties.

 

 

Property Description Example
control.value Gets/sets the field value control.value = "new text";
control.disabled Disables the field control.disabled = true;
control.style CSS styles object control.style.backgroundColor = "yellow";
control.title Hover tooltip text control.title = "This field is auto-filled";
control.readOnly Makes field read-only (some types) control.readOnly = true;
control.placeholder Placeholder for text fields control.placeholder = "Enter a value...";
control.classList Add/remove CSS classes control.classList.add("my-custom-class");
control.parentElement, control.nextSibling, etc. Navigate in the DOM tree

control.parentElement.style.border = "1px solid red";

📢 For platform-consistent behavior, always prefer g_form APIs unless you’re customizing UI effects.


Regards,

Anish

Version history
Last update:
‎11-10-2024 11:17 PM
Updated by:
Contributors