Customizing the Submit and Save as Draft Buttons on Catalog Items in the Service Portal

[Community Alums]

The ServiceNow Service Portal provides a highly customizable interface for catalog items and record producers. One common customization request is to hide or rename the Submit and Save as Draft buttons based on specific conditions. In this blog, I’ll guide you through how to achieve this using client scriptsand DOM manipulation.

---

A. Customizing the Submit Button on Catalog Items or Record Producers

The Submit button appears by default on catalog items and record producers in the Service Portal. Here’s how you can control its behavior:

1. Hide the Submit Button Based on a Condition

You can use an onChange client script to hide the Submit button dynamically. For example, let’s hide the button when a specific checkbox variable is selected:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) return;

    // Example: Hide the Submit button
    if (newValue === 'true') {
        var x = top.document.getElementsByClassName('btn btn-primary btn-block ng-binding ng-scope');
        if (x && x[0]) {
            x[0].style.display = 'none'; // Hide the Submit button
        }
    } else {
        var x = top.document.getElementsByClassName('btn btn-primary btn-block ng-binding ng-scope');
        if (x && x[0]) {
            x[0].style.display = ''; // Show the Submit button
        }
    }
}

2. Change the Submit Button Text

You can use an onLoad client script to change the name of the Submit button. This is useful for adding more context to the button’s functionality, such as renaming "Submit" to "Request Now."

function onLoad() {
    var x = top.document.getElementsByClassName('btn btn-primary btn-block ng-binding ng-scope');
    if (x && x[0]) {
        x[0].innerText = "Request Now"; // Change Submit button text
    }
}

---

B. Customizing the Save as Draft Button

The Save as Draft button allows users to save their progress without submitting the form. Here’s how to customize its behavior:

1. Hide the Save as Draft Button

To hide the Save as Draft button under certain conditions (e.g., based on a variable’s value), you can use an onChange client script like this:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) return;

    // Example: Hide the Save as Draft button
    if (newValue === 'true') {
        var x = top.document.getElementsByClassName('btn btn-default sc-btn form-control ng-scope');
        if (x && x[0]) {
            x[0].style.display = 'none'; // Hide the Save as Draft button
        }
    } else {
        var x = top.document.getElementsByClassName('btn btn-default sc-btn form-control ng-scope');
        if (x && x[0]) {
            x[0].style.display = ''; // Show the Save as Draft button
        }
    }
}

---

2. Change the Save as Draft Button Text

To rename the Save as Draft button, you can use an onLoad client script:

function onLoad() {
    var x = top.document.getElementsByClassName('btn btn-default sc-btn form-control ng-scope');
    if (x && x[0]) {
        x[0].innerText = "Save Progress"; // Change Save as Draft button text
    }
}

Note: This approach uses DOM manipulation, so ensure the "Isolate Script" checkbox is unchecked in the client script properties.

 

Best Practices for DOM Manipulation

• Avoid Overloading Scripts: Use DOM manipulation sparingly, as it directly interacts with the HTML structure and may be affected by platform updates.
• Use Specific Conditions: Always base changes on explicit conditions to avoid affecting other catalog items unintentionally.
• Test Across Browsers: Ensure your scripts behave consistently across different browsers and environments.

---

Conclusion

Customizing buttons on catalog items and record producers enhances user experience and aligns with business needs. With the provided examples, you can easily hide or rename the Submit and Save as Draft buttons in the Service Portal. Remember to thoroughly test these customizations to ensure compatibility and functionality.

Have questions or additional use cases? Share them in the comments below!