Controlling Button Visibility on ServiceNow Forms Based on Field Changes

In ServiceNow, tailoring the user interface to specific scenarios is crucial for efficiency and data accuracy. One common requirement is to control the visibility of UI Actions (buttons) on a form based on the values of other fields. For instance, you might want to hide a "Submit" button until all mandatory fields are filled or a checkbox is selected. This article will explore how to dynamically show or hide UI Actions on a ServiceNow form based on a field change, while adhering to the constraint of not directly manipulating the Document Object Model (DOM). Understanding these techniques is essential for ServiceNow administrators and developers aiming to create dynamic and user-friendly forms.

Let's consider a scenario where you have a checkbox field on a ServiceNow form. You need to hide a specific button on that form when the checkbox is checked and show it again when the checkbox is unchecked, all without saving the form. The initial thought might be to use client-side scripting. However, the request specifically asks to avoid direct DOM manipulation.

The Challenge of Avoiding Direct DOM Manipulation:

Direct DOM manipulation in ServiceNow client-side scripting (like using jQuery selectors to directly show or hide elements) is generally discouraged. While it might seem to work, it can lead to unsupported customizations that might break during ServiceNow upgrades or cause unexpected behavior. ServiceNow's recommended approach is to use its built-in features for UI customization.

The Supported Solution: Utilizing the "Condition" Field on the UI Action

The most robust and ServiceNow-supported way to control the visibility of a UI Action is by using the "Condition" field on the UI Action record itself. This condition is evaluated server-side when the form loads or when certain events occur. While it doesn't provide real-time, immediate visibility changes without a form save or reload based purely on a field change, it is the standard and recommended method that avoids client-side DOM manipulation.

Step-by-Step Implementation using the "Condition" Field

1. Navigate to the UI Action: In ServiceNow, navigate to "System UI" > "UI Actions."

2. Find Your Target UI Action: Locate the specific button you want to hide or show based on the checkbox value. You can filter the list by table and the button's "Action name" or "Label."

3. Edit the UI Action: Open the UI Action record.

4. Access the "Condition" Field: Scroll down to the "Condition" field. This field contains a script that must evaluate to true for the UI Action to be visible.

5. Write Your Condition: In the "Condition" field, write a script that checks the value of your checkbox field. You can access the current record's fields using the current object. For example, if your checkbox field's backend name is u_my_checkbox, and you want to hide the button when it's checked (true), your condition would look something like this:

   JavaScript

!current.u_my_checkbox; // The button will be visible only when the checkbox is NOT checked (false)

To show the button only when the checkbox is checked (true), the condition would be:

JavaScript

current.u_my_checkbox; // The button will be visible only when the checkbox IS checked (true)

6. Save the UI Action: Click the "Update" button.

How it Works

When the form loads, ServiceNow evaluates the script in the "Condition" field of each UI Action. If the script returns true, the button is displayed. If it returns false, the button is hidden. This evaluation happens server-side.

Practical Examples and Use Cases

• Hiding a "Submit for Approval" button until a "Ready for Review" checkbox is checked.

• Showing an "Edit" button only when the record is in a specific state.

• Displaying a "Close Task" button only after all related child tasks are closed.

Limitations and Considerations

Using the "Condition" field provides server-side control over button visibility. However, the visibility will only be updated when the form is initially loaded or when a server-side event occurs (like saving the form). To achieve real-time, immediate changes in button visibility on the client-side without a form reload or save, some form of client-side scripting is typically required.

Alternative Solutions (and the DOM Manipulation Issue)

The original accepted solution in the community post suggested using a UI Policy with client-side script to directly hide and show the button using jQuery selectors like $$('#action_name')[0].hide();. While this approach might achieve the desired visual effect of immediate hiding/showing without a save, it involves direct DOM manipulation, which was explicitly asked to be avoided. This method relies on the specific HTML structure of the ServiceNow form, which can change during upgrades, potentially breaking the functionality.

Therefore, the most supported and recommended approach within ServiceNow, while avoiding direct DOM manipulation in the unsupported way, is to use the "Condition" field on the UI Action.

Conclusion

Controlling the visibility of UI Actions based on field values is a common requirement in ServiceNow. While the desire for immediate, client-side updates without a form save might lead to considering DOM manipulation techniques, the most sustainable and ServiceNow-supported method is to leverage the "Condition" field on the UI Action record. This server-side approach ensures that the button's visibility is controlled based on the record's data in a way that aligns with ServiceNow best practices. For scenarios requiring immediate client-side changes, it's important to understand the limitations and potential risks associated with direct DOM manipulation and to explore if the desired outcome can be achieved through supported ServiceNow configurations or a re-evaluation of the requirement. The next step is to identify the UI Actions in your ServiceNow instance that need to be conditionally displayed and configure their "Condition" fields accordingly.