Hide Request/Order button on portal without changing script on widget

[Rohan04]

I have a requirement of to hide Request/Order button on portal for the particular catalog item based on the condition of the variable. For that the requirement is that without touching the widget of the form, need to do the things...I have tried writing catalog client script but i am unable to reach upto the solution....

Your help will we Appriciated!!!

Thanks,

Rohan K

[Vasantharajan N · Accepted solution]

@Rohan04 - Please use top.document instead of document in the script and let me know the result. 

function onChange(control, oldValue, newValue, isLoading) {
    console.log('onchange triggered');
    console.log('isLoading:', isLoading);
    console.log('newValue:', newValue);
   if (isLoading || newValue == '') {
      return;
   }
   var condition = (newValue == 'single');
   console.log('condition:', condition);
   if (condition){
    hideAddToCartButton();

   }else{
    showAddToCartButton();
   }
 
   //Type appropriate comment here, and begin script below
   
}
function hideAddToCartButton(){
    console.log('hiding add to cart button');
    var addToCartButton = top.document.getElementById("submit-btn");
    console.log('hiding add to cart button12');
    if (addToCartButton){
        addToCartButton.style.visibility = "hidden"; // Hide the Order / Submit button ONLY from Service Portals
    }else{
        console.error('add to cart button not found');
    }
}

function showAddToCartButton(){
    var addToCartButton = top.document.getElementById("submit-btn");
    if (addToCartButton){
        addToCartButton.style.visibility = "visible"; // Show the Order / Submit button ONLY from Service Portals
    }else{
        console.error('add to cart button not found');
    }
}

[Vasantharajan N]

@Rohan04 - Please share the script that you tried and needs support to achieve. 

Note: FYI: This can be achieved by doing DOM manipulation using the catalog client script.  This script will be shown in the Health Scan Report if your instance undergo ServiceNow "Health Scan"

[Rohan04]

The following is the catalog client script which i have tried in PDI -

function onChange(control, oldValue, newValue, isLoading) {

    console.log('onchange triggered');

    console.log('isLoading:', isLoading);

    console.log('newValue:', newValue);

   if (isLoading || newValue == '') {

      return;

   }

   var condition = (newValue == 'single');

   console.log('condition:', condition);

   if (condition){

    hideAddToCartButton();

   }else{

    showAddToCartButton();

   }

   //Type appropriate comment here, and begin script below

}

function hideAddToCartButton(){

    console.log('hiding add to cart button');

    var addToCartButton = document.querySelector('.sc_cat_item.add_to_cart');

    console.log('hiding add to cart button12');

    if (addToCartButton){

        addToCartButton.style.display = 'none';

    }else{

        console.error('add to cart button not found');

    }

}

function showAddToCartButton(){

    var addToCartButton = document.querySelector('.sc_cat_item.add_to_cart');

    if (addToCartButton){

        addToCartButton.style.display = '';

    }else{

        console.error('add to cart button not found');

    }

}

[Vasantharajan N]

@Rohan04  - Please try the below code that hide/show the Order / Submit / Request button from only Service Portals. I've not many logic change, just included the code required with comments

function onChange(control, oldValue, newValue, isLoading) {
    console.log('onchange triggered');
    console.log('isLoading:', isLoading);
    console.log('newValue:', newValue);
   if (isLoading || newValue == '') {
      return;
   }
   var condition = (newValue == 'single');
   console.log('condition:', condition);
   if (condition){
    hideAddToCartButton();

   }else{
    showAddToCartButton();
   }
 
   //Type appropriate comment here, and begin script below
   
}
function hideAddToCartButton(){
    console.log('hiding add to cart button');
    var addToCartButton = document.getElementById("submit-btn");
    console.log('hiding add to cart button12');
    if (addToCartButton){
        addToCartButton.style.visibility = "hidden"; // Hide the Order / Submit button ONLY from Service Portals
    }else{
        console.error('add to cart button not found');
    }
}

function showAddToCartButton(){
    var addToCartButton = document.getElementById("submit-btn");
    if (addToCartButton){
        addToCartButton.style.visibility = "visible"; // Show the Order / Submit button ONLY from Service Portals
    }else{
        console.error('add to cart button not found');
    }
}

[Rohan04]

@Vasantharajan N - Thanks for the feedback. I have updated the script as per your comments added above, but still its throwing JavaScript error...