Disable buttons in MultiRow Variable Set

Hi,

In this article, I will show how you can disable the buttons or icons in the multirow variable set.

Generally, when we add MRVS, we see few buttons which cannot be customized easily and they are

Add
Remove All
Edit icon
Delete icon

I will show you few examples on how you can manage to hide/disable these buttons/icons.

Add Button

As we all know the add button is used to add rows to MRVS. But in some cases, when we are auto-populating the MRVS from backend, then we might not want the user to add new rows or if you want to limit the number of rows that can be added by the user (let say 5). In such cases, how do disable this button?

There is this property max_rows_size of MRVS which we should use to disable the Add button.

//Add these lines in your onload catalog client script
var my_var = g_form.getField("my_var_set");//use your variable set name here
//The number below indicates after how many rows, the add button to disaable. 
//If you want to limit to 5 rows then mention 5 below. 
//If you put 0, it will disable Add button without checking the rows.
my_var.max_rows_size = 5;

Remove Button

How to disable/hide Remove Button. Unfortunately there is no direct way to do this. We have to handle this through DOM or page specific CSS. I will show you how you can do it through DOM.

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

function disableButtons() {
    var my_var = g_form.getField("my_var_set");//use your variable set name here
    my_var.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].disabled="disabled";
            //If you want to hide it fully, then use below line.
            //btn[i].style.display='None';
        }
    }
    //if you want to hide Add button as well, you can use above logic, 
    // but use the class name as btn-primary instead of btn-default 
    //and change the if condition to Add.
}

Disable Edit and Remove icons

If you do not want the multirow variable set data to be edited, then it is easier. You can simply create a catalog UI policy on your catalog item and under scripts add these 2 lines of code.

function onCondition() {
    var my_var = g_form.getField("my_var_set");//use your variable set name here
    g_form.setReadOnly('my_var_set',true);
}

This will make the variable set read-only and hide the edit/delete/add and remove all buttons.

But if you want to hide one of the icons like edit or just hide X icon, then we need to handle this through DOM. The logic is similar to how we hide the button, but here since its a link, we will not have any text. So we need to access the title attribute of these icons and compare. Look at the below sample code.

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

function disableButtons() {
    var my_var = g_form.getField("my_var_set");//use your variable set name here
    var icon = this.document.getElementsByClassName("wrapper-xs fa fa-close");
    for (i = 0; i < icon.length; i++) {
        if(icon[i].getAttribute("title") == 'Remove Row') {
            icon[i].style.display='None';
        }
    }   
    //To hide Edit icon, then use the class name as fa-pencil instead of fa-close
}