Hide buttons based on the catalog item field selection

[NamanChaturvedi]

I have a requirement in Catalog item, based on the values selected in the field Request type=Access-data for reporting and dashboard and Type of data = Real-time data , I have to hide the below mentioned :


Of these, first 3 I am able to achieve with a Catalog UI policy, I am having trouble hiding the buttons Submit, Save as draft, and Add attachments. Below is the screenshot of how the buttons look.

Please suggest how can I achieve this. Also there was a small task of showing a pop-up message on the change of these selected values, for which I am writing an onChange Catalog client script. I am thinking that I might need to make further modifications in that only since we are checking the same conditions for this also.

Please provide some solution on how can I proceed further and make those buttons hidden based on the conditions provided. Also provide the explanation as to why that solution or approach is needed.

[Tanushree Maiti]

Hi @NamanChaturvedi 

Catalog UI policy responsible for hide the catalog variable(s), NOT the buttons.

Now as per your requirement to hide those 3 button- you can try 

1.  Hide Add Attachment Button

• Option 1 : Open the Catalog Item record and check the Hide Attachment box.
• Option 2 (CSS in Widget): In the Service Portal, add the following CSS to the widget instance to hide the paperclip icon:

  .fa-paperclip { display: none !important; }

2.Hide "Save as Draft" Button 

• Option1 (Configuration): Check the Hide Save as draft field on the Catalog Item form.
• Option 2 (Client Script): Use an onLoad Client Script to hide the button using DOM manipulation (DOM Manipulation is not at all recommended)

  function onLoad() {
      var saveDraftButton = top.document.querySelector('button[title="Save as Draft"]');
      if (saveDraftButton) {
          saveDraftButton.style.display = 'none';
      }
  }

  3. Hide "Submit" / "Order Now" Button 

  Option 1 (Config): In the Catalog Item, check No Order or Use Cart Layout to remove standard buttons.

            Option2 (Client Script): Use an onLoad Client Script to hide the button using DOM manipulation (DOM Manipulation is not at all recommended)

function onLoad() {
    var submitButton = top.document.querySelector('button[name="submit"]');
    if (submitButton) {
        submitButton.style.display = 'none';
    }
}

[jcmings]

You could add an onSubmit check that blocks submission of the form unless X condition is met. Otherwise, see the above response on this thread. I'd recommend sticking with the OOTB options presented!