Developing Custom Events for Multi-Select Option Sets in Power Pages with jQuery

- Authored by SREERAG H | LinkedIn, Microsoft Power App Developer, MERP Systems 

Greetings from the thrilling Dynamics 365 PowerPages universe! You've come to the perfect spot if you want to give your forms some flair and make them more interactive. In this article, we'll explore how to improve multi-select option sets and make your user experience more responsive and dynamic by utilizing jQuery and the potent MutationObserver API. Are you prepared to change your forms? Now let's get going! 

Why Might Multi-Select Option Sets Use jQuery and MutationObserver? 

Allowing users to pick numerous options within a form is an excellent use case for multi-select option sets. They may, nonetheless, occasionally feel static and unresponsive. You may add dynamic interactions and real-time feedback to your website by utilizing jQuery and MutationObserver. This will make your user experience more interesting. 

Meet MutationObserver: The Game Changer 

What is the DOM? 

A programming interface for online content is called the Document Object Model (DOM). It shows the hierarchy of your webpage as a tree of objects, or nodes, where each node is associated with a certain section of the content. With this approach, you may dynamically modify the content, structure, and styles. 

How does MutationObserver take place? 

A robust JavaScript object called MutationObserver lets you monitor changes to the DOM and take immediate action in response to them. MutationObserver is an efficient technique that can manage many sorts of mutations, such as subtree updates, attribute changes, and additions or removals of child nodes, in contrast to prior approaches. 

Using MutationObserver with jQuery 

Let's create a function that registers change events for a multi-select option set. This function will use MutationObserver to detect changes and trigger a callback function, enhancing the interactivity of your forms. 

Step 1 : Define the Event Registration Function 

The "multiseletOnchangeEvent" function monitors changes to a hidden input element associated with the multi-select option set. When the value of this input changes, the observer triggers the specified callback function. 

    function multiseletOnchangeEvent(id, callback) { 

        const hiddenInput = $('#' + id); 

        let previousValue = hiddenInput.val(); 

        // Create a MutationObserver instance 

        const observer = new MutationObserver((mutations) => { 

            // Iterate over MutationRecord array 

            mutations.forEach(mutation => { 

                // Check if the mutation type and the attribute name match 

                // Check if value changed 

                if ( 

                    mutation.type === 'attributes' && 

                    mutation.attributeName === 'value' && 

                    hiddenInput.val() !== previousValue 

                ) { 

                    previousValue = hiddenInput.val(); 

                    callback.call(hiddenInput[0]); 

                } 

            }); 

        }); 

        observer.observe(hiddenInput[0], { attributes: true }); 

    } 

   Step 2 : Implement the Callback Function 

Here's how you can set up a callback function to handle changes in your multi-select option set: 

    multiseletOnchangeEvent('your_multiselectOptionset_id', function () { 

        const val = $(this).val(); 

        if (val && val !== '') { 

            const data = JSON.parse(val); 

            data.forEach(function(item) { 

                alert(item.Label.UserLocalizedLabel.Label); 

                // Additional actions can be added here 

            }); 

        } 

    }); 

 Customizing the Callback Function  

The beauty of the callback function lies in its flexibility. While the example above uses alert to display the selected item's label, you can customize this function to perform a wide range of actions based on your requirements. 

Step 3 : Handling Checkbox Changes 

If your multi-select option set uses checkboxes, you can also register change events directly on these elements. 

    function multiseletOnchangeEventCheckboxes(id, callback) { 

        const hiddenInput = $('#' + id); 

        let previousValue = hiddenInput.val(); 

        $('#' + id).closest('.control').on('change', 'input.msos-checkbox', function () { 

            if (hiddenInput.val() !== previousValue) { 

                previousValue = hiddenInput.val(); 

                callback.call(hiddenInput[0]); 

            } 

        }); 

    } 

   Understanding input.msos-checkbox 

When you inspect the multi-select option set in your web page, you'll notice that each option is added as an input tag with the class msos-checkbox. This class is common to all the options in the multi-select. By defining input.msos-checkbox, you can easily select and manipulate these options using jQuery. 

Inspecting the multi-select option set. 

Conclusion 

You can make your Dynamics 365 PowerPages more dynamic and interactive by using MutationObserver and jQuery to detect and react to changes in multi-select option sets. You may respond to changes in real time using this method, giving quick feedback and improving the user experience all around. 

Please feel free to modify these samples to meet your own needs and look into other things you may do with the callback functions. 

Have fun creating more engaging content for your PowerPages and happy coding! 😁 

 MERP Systems, Inc. employs the Microsoft Power Platform, which not only boasts a wide array of features and capabilities but also provides a scalable and seamlessly extensible foundation. Power BI empowers business users to craft visually compelling, drill-down dashboards, while Power Apps facilitates the creation of feature-rich model-driven applications with highly intuitive low-code apps and custom pages that seamlessly blend the functionalities of both approaches, offering a hybrid solution. Advancements in AI/ML integration can be seamlessly achieved through the Power Automate framework, presenting a compelling alternative to Robotic Process Automation (RPA). Additionally, deploying virtual agents and chatbots is made straightforward using Power Virtual Agents. The potential for the Dataverse platform to interact with ChatGPT opens up uncharted possibilities in the marketplace. Whether it involves modernizing legacy applications, upgrading retiring ones, or completely revamping large-scale systems, the Low Code SWAT approach provides a pragmatic and successful path.

If you are interested in discussing further about our approach and techniques for enterprise digital transformation, please contact us at info@merpsystems.com