5 views

How to hide the submit button for a Catalog Item in Service Portal



Description


This article shows you how to hide the "Submit" button for a catalog item in Service Portal, which will force all users to use the "Add to Cart"

Procedure


Cloning the OOB catalog item widget:

  1. Out Of Box (OOB) widget for rendering the catalog item is called "SC Catalog Item",
    Link to the Catalog Item: https://<yourInstance>.service-now.com/sp_widget.do?sys_id=0fd6a6f247230200ba13a5554ee490b3
  2. Click on "Clone Widget" UI action on the top right corner for the Form Header

Adding the code to hide the submit button:

  1. Once the widget is cloned, Click on the "Open in Widget Editor" on the bottom of the "Related Links"
  2. Line number 41 of HTML code,
    Change from 

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

    to 

    <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>

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

Associating the Newly cloned widget to "sc_cat_item" page:

  1. Navigate to "Service Portal" -> "Pages" from the Application Navigator
  2. Filter using "ID""is""sc_cat_item"
  3. Open the record for "sc_cat_item"
  4. Click on the "Instance" link next to "SC Catalog Item", Please see the attached screenshot


  5. In the widget Instance, Navigate to "Widget" tab
  6. Change the "Widget" field from "SC Catalog Item" to "name of the newly cloned widget"

 

Applicable Versions


This article was based on Jakarta version of ServiceNow, But can be interpolated for other version as well 

Additional Information


Cloning Widget Docs

ngHide Documentation

Article Information

Last Updated:2018-04-17 06:27:53
Published:2018-04-16