Hide/Disable 'Add', 'Remove All', 'X' buttons on a Multi Row Variable Set

[Shiladitya Das1]

Hi,

I've a requirement where a Multi Row Variable Set is auto-populated, but I need the 'Edit' icon (🖋) to be available for an user to edit any row and rest of the buttons/icons ('Add', 'Remove All', 'X') to be disabled or hidden.

Is there a way to do this?

I've seen one community post and tried using DOM manipulation, but it isn't working.

[Brad Bowman]

Are you using Service Portal and/or the Service Catalog/native UI?  Make sure the onLoad Catalog Client Script applies to 'a Catalog Item', not 'a Variable Set', and on the Catalog Item view, RITM, and/or Catalog Task - whatever form(s) the MRVS appears on for editing.  After the script is created, ensure the Isolate script box is unchecked (there's an OOB Business Rule to check the box on insert).  This is a comprehensive script that should work in Service Portal and the native UI, and disables or hides all of the MRVS buttons and icons, so you can comment out what you don't want to remove.  Note also the delay - to give the MRVS a chance to load before you try to hide elements on it.  Sometimes the element names are different, so if one in particular isn't working inspect the element with the browser developer tools to get the name/id/...

function onLoad() {
	//MRVS is loaded after the form is loaded. Hence setting a delay of 2 secs.
	setTimeout(function() {
		disableButtons();
	}, 2000);
}

function disableButtons() {
  var mrvsid = '2410eeb22fe66490cbe6fe7cf699b6d9';//sys_id of MRVS
  if(window == null){//Service Portal
  
	//hide Add button on MRVS
    this.document.getElementById(mrvsid + '_add_row').style.display = 'none';
    
	//hide Remove All button on MRVS
    var mrvs = g_form.getField("mrvs1");//internal name of MRVS
	mrvs.max_rows_size = 0;
	var btn = this.document.getElementsByClassName("btn btn-default");
    for (i = 0; i < btn.length; i++) {
        if(btn[i].innerText == 'Remove All') {
			btn[i].style.display='None';
            //If you want to disable the button, but still show it, then use below line instead.
            //btn[i].disabled="disabled";
		}
	}

    //Hide each X (delete row) icon on MRVS
    var icon = this.document.getElementsByClassName("wrapper-xs fa fa-close");
    for(j=0; j<icon.length; j++){
      if(icon[j].getAttribute("title") == 'Remove Row'){
        icon[j].style.display='None';
      }
    } 
  }
  else{//native UI method
    //hide Add and Remove All buttons on MRVS
    document.getElementById('table_variable_buttons_' + mrvsid).style.display = 'none';
    //hide only the Add button 
    document.getElementById(mrvsid + 'Add').style.display = 'none';
    //hide only the Remove All button
    document.getElementById(mrvsid + 'removeAllRows').style.display = 'none';
    //hide delete and/or edit icon/button on each row of MRVS
	var mrvs = g_form.getValue('mrvs1');
    var obj = JSON.parse(mrvs);
    for (var i = 0; i < obj.length; i++) {
      //delete - check Name, may be 'cross' instead	
      document.getElementsByClassName('btn-sm multi-row-delete-row')[i].style.display = 'none';
      //edit	
      document.getElementsByClassName('btn icon-edit btn-sm')[i].style.display = 'none';
    }
  }	  
}

[John Hughes2]

Brad, I can't thank you enough for this snippet. It was a charmer. Many, many thank you's.

[Brad Bowman]

You are welcome!  Glad to have helped.

[Martijn Dessing]

This seems to work for the Add and Remove All buttons on the MRVS widget itself (tested with Employee Center Pr active on prtal). But technically this could not work within the rows of the MRVS unless you have already polulated it with a set of rows (since it is an oload catalog script).

When you want to hide  the Remove Row icons form a row, it will need an onchange script within the MRVS and only the second and later rows will be affected since when adding the first row there is no data to manupulate. So how could this work with just an onLoad script?