How to hide buttons in Multi-Row Variable Sets (MRVS) without DOM manipulation

[Rich Dennis]

MRVSs are increasingly being pre-populated with server data that we want the end user to interact with, but not necessarily have full access to all MRVS features, such as adding rows, editing rows, removing all rows, or deleting rows. In the Community I've read many solutions to address this that required DOM manipulation. As we all (should) know, ServiceNow (the company) discourages DOM manipulation. DOM manipulation isn't guaranteed to be upgrade safe, so I avoid it as much as possible. What follows is my non-DOM way to hide MRVS buttons. FWIW, I haven't tried this method in NextUI/NowUI, so I cannot say whether it is future-proof too. 

Steps:

1. Create standard (non-MRVS) Variable Sets for each button type.
   1. MRVS Hide "Remove All" button
   2. MRVS Hide "Add" button
   3. MRVS Hide "Edit Row" buttons
   4. MRVS Hide "Remove Row" buttons
2. Create a variable of type "Rich Text Label" in each Variable Set.
3. Edit the "Rich Text Label" Source Code to include <style> tags.
4. Insert CSS inside the <style> tags to hide the button
   1. Example:

<style>
 .btn-default {
  display: none;
 }
</style>
<p>&nbsp;</p>

• Change the CSS to match the class that you are hiding. 
  • "Remove All" button = .btn-default
  • "Add" button = .btn.btn-primary.m-r
  • "Edit Row" buttons = .wrapper-xs.fa.fa-pencil
  • "Remove Row" buttons = .wrapper-xs.fa.fa-close
• Any text within the <p> tags would be displayed in the Catalog Item if there isn't a UI Policy to hide the variable.
• After editing the Source code do not make any changes to the text in the "Rich Text" field because it will remove the <style> tags.
• Create a UI Policy in each Variable Set to hide the "Rich Text Label" variable.
• Add any combination of these Variable Sets to Catalog Items in order to hide a given button type.

[jackinsidend]

This works really well in the portal!

Thank you for sharing.

[Rastamouse]

I have tested this in a PDI: Utah with NextUI and it worked (although it still keeps the Actions column).  Thanks for posting.

[Shane J]

I applied these and while working great in the Portal, after submission the Reference field 'i' buttons are missing, along with UI Action buttons, at both the RITM and Catalog Task levels.

Edit:  To clarify, it's option #1 causing the issue.  If I don't include that Variable Set in the Item, the buttons reappear.

No one else is seeing that? 

[Shane J]

In case anyone else runs into this I had to tweak #1:

1. Go to your Catalog Item via Service Portal
2. In Chrome, use More Tools > Developer Tools to review the Source HTML
3. You should be able to search for 'class'
4. Find the first hit (should be the top most entry) for class="page-uniqueValueForYourPortal" . Copy that to your clipboard.  Only copy up to the first space, not the entire entry that's in quotes.
5. Update the Rich Text label variable from  .btn-default {  to   .page-uniqueValueForYourPortal .btn-default {
6. Reload your Catalog Item via the Portal, ensure the Remove All button is still missing.  Assuming it is, submit a test and verify that on RITM and Catalog Task you still have expected form buttons.

[Jason Thomas]

Nice post Rich, i used the following css selectors instead

[aria-label="Remove all rows for Receipt Request"], [aria-label^="Remove Row"] {

  display: none !important

}

 meant that I could remove the code I had in place that was trying to do dom manipulation.