PowerApps Portals - Multi-select Optionset - add javascript event listener

 Multiselect Optionset in Powerapps Portals

    Multi-select optionset (multi-select column) are now supported in Powerapps Portals. (Click here for more details). 

Before the availability of this feature there was an option to make a normal optionset as mutli-choice control (Refer this blog for details).

The purpose for writing this post is to share my recent experience working with the multi-select optionset in Powerapps Portal, specially attaching JavaScript eventd to add some logic on selection of items.

I didn't found any official document that explains about the multi-select optionset control events (specially onchange) for Portal.

With that said here is a solution that I orchestrated using my html and jquery knowledge. With this approach you can easily attach a javascript logic on selection of an item in Multiselect optionset control in #PowerPortals.

Solution - 

1. Attaching Event - We are going to attach a event handler to the DIV tag with class .msos-selecteditems-container. 

Here we are adding a listener to one of the div container of Multi-select optionset which will facilitate us in writing the desired logic.   

$('.msos-selecteditems-container').bind('DOMNodeInserted DOMNodeRemoved', function() {

// custom logic  

});

2. Settimeout - Here we need to add a delay to this event using settimeout. A delay of 500 ms would be sufficient. You may give a try without delay and understand the necessity of using it.

$('.msos-selecteditems-container').bind('DOMNodeInserted DOMNodeRemoved', function() {

               setTimeout(function ()

                { 

                // your logic

                }, 500);

        });

3. Read Selected Items - Here comes the important part, reading the selected item.

var selectedItems = $('.msos-selecteditems-container');

if(selectedItems.attr('title') && selectedItems.attr('title').includes('<some item text >'))  

Following these steps you can easily hook a javascript event to the #MultiselectOptionset in #PowerAppsPortal

In case if you have multiple controls you can easily attach the event handler to div of respective control (make use of the HTML DOM to attach event to div element of respective control)

Please do share if you find this post useful...