MRVS - how to hide the "Remove All" and Edit (Pen Icon)icon

JLeong
Mega Sage

Hi Guys,

 We are trying to hide the option to Remove All and the Pen icon in the MRVS. I have the onChange script below. It works perfectly in the Portal but not on the classic UI.

 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    var reqtype = g_form.getValue('google_sm_req_type');
    if (reqtype == 'Add Members') {
        if (newValue != '') {
            var hide_removeall = true;
            var hide_add = true;
            var hide_deleterow = true;
            var hide_editrow = true;
 
            var mrvsname = 'vs_google_sm_add_remove_members';
            var mrvsid = '01fc4d8b1b5839d0a46fed70604bcb8d'; // sys_id of the mrvs is required when client script has to be executed on requested item or catalog task
 
            // For ServicePortal we create styleSheet rule - Edit / Remove row icon will always be hidden on row insert
            if (window === null) {
                alert('portal');
                var sheets = this.document.styleSheets;
                var sheet = sheets[0];
                var rule_params = [];
 
                if (hide_removeall) {
                    rule_params.push('#' + mrvsname + ' .btn-default');
                }
                //if (hide_add) { rule_params.push('#' + mrvsname + ' .btn-primary'); }
                //if (hide_deleterow) { rule_params.push('#' + mrvsname + ' .fa-close'); }
                if (hide_editrow) {
                    rule_params.push('#' + mrvsname + ' .fa-pencil');
                }
                sheet.insertRule(rule_params.toString() + ' { display: none !important; }');
            } else {
                alert('desktop');
                // On Desktop UI - Edit / Remove row icon won't be hidden on row insert, it will only apply to existing rows
                // for main button we can access the Elements directly
                if (hide_removeall) {
                    alert('desktop remove all');
                    g_form.getElement(mrvsid + 'removeAllRows').hide();
                }                
              if (hide_deleterow || hide_editrow) {
                    alert('desktop edit');
                    var rows = g_form.getElement(mrvsid + 'Add').getOffsetParent().getElementsByClassName('sc-multi-row-actions');
                    alert('rows ' + rows.length);
                    for (i_row = 0; i_row < rows.length; i_row++) {
                        var icons = rows[i_row].getElementsByClassName('btn');
                        if (hide_editrow) {
                            icons[0].hide();
                        }
                        if (hide_deleterow) {
                            icons[1].hide();
                        }
                    }
                }
            }
        }
    }
}
 
Could someone please spot the issue.
 
Thank you!
 
Regards,
Jocelyn
 
1 ACCEPTED SOLUTION

Brad Bowman
Kilo Patron
Kilo Patron

Hi Jocelyn,

Try this line to hide the Remove All button in the classic UI:

document.getElementById(mrvsid + 'removeAllRows').style.display = 'none';

Here's the lines I've used to hide the row delete and edit buttons:

var mrvs = g_form.getValue(mrvsname);
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';
}

Inspect the elements to make sure those names are still correct, and ensure the Isolate script box remains unchecked.  Also, I typically run this onLoad with a setTimeout to allow the MRVS to load as/after the form loads before the hiding is attempted, but if it's already loaded and onChange of whatever works for you then that's one less thing to worry about.

View solution in original post

6 REPLIES 6

Brad Bowman
Kilo Patron
Kilo Patron

Hi Jocelyn,

Try this line to hide the Remove All button in the classic UI:

document.getElementById(mrvsid + 'removeAllRows').style.display = 'none';

Here's the lines I've used to hide the row delete and edit buttons:

var mrvs = g_form.getValue(mrvsname);
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';
}

Inspect the elements to make sure those names are still correct, and ensure the Isolate script box remains unchecked.  Also, I typically run this onLoad with a setTimeout to allow the MRVS to load as/after the form loads before the hiding is attempted, but if it's already loaded and onChange of whatever works for you then that's one less thing to worry about.

Hi Brad!

I appreciate your time to reply to my email.

I am still working on it. It doesn't seem to work. I created a catalog item with just the MRVS and every time I populate the MRVS the 'Remove All' activates.

Thanks again!

 

So that means the code works to hide the button, just not when you expect it to, or every time you populate the MRVS the row immediately gets deleted? You have this script running against the Catalog Item, not the MRVS, and it is onChange of which variable - or when do you want it to run?

Ok, I was able to hide the "Remove All" button. I was missing the item sys ID:

       document.getElementById(itemID + mrvsid + 'removeAllRows').style.display = 'none';

 

I still can't remove the edit (Pencil icon).   The script runs even before the  MRVS is populated and so the MRVS value is empty.