Hide Submit Button on Service Portal

[Darlene York]

Hello, I have a requirement to hide the submit button on a catalog item if apps_listed_above = yes.  I have a message on that field telling the user to stop and giving them instruction's on what to do.  But we would like to hid or disable the submit button.

Thank you!

[Tanushree Maiti]

Hi @Darlene York 

Step by step instruction is given in following KB:

KB0684408 Troubleshooting and Customization Guide for Service Portal Catalog Items 

1. How to Hide the Submit Button for a Catalog Item in Service Portal

Purpose

To force users to use Add to Cart instead of the Submit button for specific catalog items.

Procedure

Clone the OOB Widget

1. Open the SC Catalog Item widget: https://<instance>.service-now.com/sp_widget.do?sys_id=0fd6a6f247230200ba13a5554ee490b3
2. Select Clone Widget.

Modify the Widget

1. Open the cloned widget → Open in Widget Editor.
2. In the HTML template, locate the Submit button element.

Original:

<button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button>

Updated:

<button ng-hide="data.sys_id=='<sys_id of the catalog item>'" ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button>

Change the placeholder <sys_id of the catalog item> with the sys_id of your catalog item.

Associate the Widget with the sc_cat_item Page

1. Navigate to Service Portal > Pages.
2. Filter for ID is sc_cat_item.
3. Open the page record.
4. Select the Instance link next to SC Catalog Item.

On the widget instance → Widget tab → change the widget to your cloned version.

[Darlene York]

Thank you so much!

[Vishal Jaswal]

Hello @Darlene York 

Hiding submit button on catalog item requires DOM manipulation which is not a recommended or best practice.

I would recommend a help text on the "apps_listed_above" variable and then stop record submission with an onSubmit Client script as shown below:

function onSubmit() {

    var msgtobeDisplayed = 'As the apps_listed_above is yes then please stop now as this will not be submitted. Please adhere to instructions as what to do next,';

    var appsLAVal = g_form.getDisplayValue('apps_listed_above');
    alert(appsLAVal);

    if (appsLAVal == 'Yes') {
        alert(msgtobeDisplayed);
        return false; // This prevents the form from being submitted.
    }
}