Customize Submit Button Label on Portal for a Catalog Item

Narsing1 · ‎02-14-2021

The default available labels are "Submit"/"Order Now" etc., are the SNOW provided Labels on Portal to a Catalog Item. You can configure this settings via "Request Method" available under Portal Settings of a Catalog Item.

But you don't have an option to use your own Label for this button. This Article helps you in customizing the Submit Button Label on Service Portal for Catalog Items.

Step by Step Implementation

Create a Widget

Name: Catalog Item Submit Button Label

Copy the below code into Client Controller

api.controller = function($scope) {
    /* widget controller */
    var c = this;
    $scope.$watch(function() {
        return $scope.page.g_form.getValue('submitbutton_label');
    }, function(value) {
        var obj = {
            customlabel: value
        };
        $rootScope.$broadcast('submitlabelchange', obj);
    });
};

Create a Variable Set

Name: Standard - Submit Button Label Change

Add a Single Line Text Variable and name it as "submitbutton_label"
Add a Custom Type Variable if you are using Quebec Version, else use Macro type Variable. Attach the above Widget to this Variable.
Add a UI Policy to hide the above 2 variables on all views.

Clone OOTB Widget "SC Catalog Item"

Once you clone the above Widget,

Give a Name for ID field "widget-sc-cat-item-v3"
Give a Label for "Name" Field i.e. "SC Catalog ItemV3"
On the Body HTML template Field, find the word with "showOrderNowButton()"
You will be able to find the code something like this

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

Now, Modify the code like this where ever you find the similar kind of code

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

On the Client Controller, add this piece of code

$rootScope.$on('submitlabelchange', function(event,obj) {
	$scope.submitlbl = obj.customlabel;
});

Attach this Widget to "sc_cat_item" Page

Open the above page from Service Portal --> Pages
Click on "Open in Designer" link under Related Links
Remove the OOTB Widget called "SC Catalog Item" and add the above widget "SC Catalog ItemV3"
Edit this Widget in Designer and make sure all the related options are checked properly.

Now, Open any Catalog Item and add the Variable Set called "Standard - Submit Button Label Change"

Create an Onload Client Script for your Catalog Item to change the Label

You are all set now. Open this catalog Item from Portal and you will be able to see like this.

This way, you can modify the Label for any Catalog Item by just adding a common variable set and adding an Onload Client script. Since it is reusable code, it will be just a plug & play.

Please let me know if you have any queries while implementing this. Appreciate if you mark it as helpful & Bookmark this Article.

Thanks,

Narsing