How to dynamically set value of Choices multi-select field in Power Apps portals

Welcome to all my blog readers. I am back with another blog on Power Apps; this time, it’s on Power Apps portals.

Today I will discuss a very interesting requirement I came across. It’s about on how to dynamically set the value of a choices multi-select field in Power Apps portals.

Support for choices multi-select fields are now available in portals. If you are not aware of this feature, please check out this Microsoft documentation for the same.

Below is a screenshot of account form in the portal and I have configured a multi-select field – Account type to show on the form.

Great isn’t it? But I have a requirement. The field should be dynamically populated based on user interactions on the form. Basically I need to programmatically populate the field using scripts based on some custom logic.

With Power Apps portals, whenever we have a requirement to dynamically set the value of a field on the form, we do so using DOM element manipulation. And a quick look at the DOM elements generate for this multi-select field.

Well it’s quite daunting. A little bit of exploring and I realized that the selected items are stored inside the hidden HTML input element in the form of JSON array. Check for the control highlighted in green in the above screenshot.

Manipulating the value of this field can be a significant effort and not to forget, it is highly error prone. So, the trick here is to mimic the user click of the options programmatically. So the next step is to identify the correct element for that.

Turns out, each of the items in the list do have a checkbox. If we are able to mimic the checkbox click, we should be good.

$(window).on("load", function(){
    $("#name").on("change", setAccountType);
});

function setAccountType(){
    debugger;
    var accountValue = $(this).val();
    var accountValueArr = accountValue.split(',');

    $availableChoices = $("#cr2f8_accounttype").parent().find(".msos-checkbox");
    for(var x=0; x < $availableChoices.length; x++){
        var choice = $availableChoices.get(x);

        if(accountValueArr.indexOf(choice.value) !== -1){ // found
            if(choice.checked !== true){
                $(choice).trigger("click");
            }
        }
        else {
            var isChoiceChecked = choice.checked;
            if(isChoiceChecked === true){ //uncheck it
                $(choice).trigger("click");
            }
        }
    }
}

Very simple stuff. I have registered a function onchange of the account name field. The function is setAccountType. In the account name field, I will provide the value of the choice options. cr2f8_accounttype is the logical name of multiselect choices field.

Inside this function, I am getting all the available choices and selecting/ unselecting them depending on the value provided in the account name field. Below are the value configured for the Choice items.

And below is the javascript code in action.

Your logic may be different. However the code show you every way you can interact to populate the field dynamically.

Hope this helped. You will also like the below posts.

Debajit Dutta
Business Solutions MVP