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.

[art_jones]

Hi Rich;

Couldn't you make the variable set read only?   I believe this removes all of the buttons.

-Art

[Rich Dennis]

Hi Art,

You are correct; however, the use case is such that we want the user to be able to edit rows that are populated through AJAX. But the user shouldn't be able to remove or add rows.

[Akhila11]

Hi Dennis,

Thank you for the article, It was really helpful. I am just facing one issue with hiding 'Remove All' button. I don't really know much about CSS but what I noticed is that the ".btn-default" contains in ServiceNow OOB UI Action buttons as well so I think this solution is will not work in the platform view where it is hiding the OOB buttons as well. Just an observation.

[kchorny]

This is pretty nice, but is there a way to apply it to catalog tasks only? I have 3 multi-row variable sets in one catalog item. One of them collects information from the submitter, and they will need to be able to add/edit/remove rows during the submission process. The other two are prepopulated with data from the submitted MRVS, show only on catalog tasks, and technicians need to edit those rows but should not be able to add or remove.