Enhancing Power Portal Lookup Field Search with Mutation Observer: From 'Starts With' to 'Contains'.

In Power Portals, lookup fields provide users the ability to search records from related entities. By default, the search behavior in these lookup modals is set to "starts with," which means users have to type the beginning of a word or phrase to find relevant results. But what if you want to offer a more flexible search, one that matches any part of the text?

This is where wildcard characters come into play. The wildcard, commonly represented by an asterisk (`*`), allows users to search for records that contain the text, rather than starting with it. Using a simple custom JavaScript with MutationObserver, we can modify the default search behaviour to include the wildcard, enabling users to find records based on partial text matches.

In this blog, I’ll guide you through how to use a MutationObserver to dynamically change the search behaviour of a lookup field modal from "starts with" to "contains" by applying wildcards.

?

Why Use Wildcards?

Wildcards provide flexibility in search, allowing users to search for text fragments within a field. For example, searching for "comp" with a "starts with" filter might only return "Company A" but using a wildcard (`*comp`) will return "Corporation Computer" or "The Best Company" as well. This enhances the user experience by making it easier to locate records, even with incomplete information.?

Steps to Modify Lookup Field Search Behavior

1. Detecting the Lookup Modal Behavior

When a lookup field is clicked, a modal opens to allow users to search records. By default, this search looks for records where the field values start with the entered text. To modify this, we can intercept the modal's behaviour with a MutationObserver and apply a wildcard to change the search to "contains."

2. Using MutationObserver to Add Wildcard Search

A MutationObserver helps us track changes in the DOM, such as when the lookup modal opens. This lets us dynamically modify the search input behaviour to include wildcards.

Here’s the code to implement this functionality:

// Select the element that triggers the modal (usually the lookup field input)
var lookupField = document.querySelector("input[data-id='lookup_field_name']");

// Select the element that triggers the modal (usually the lookup field input)
var lookupField = document.querySelector("input[data-id='lookup_field_name']");

// Function to apply "contains" behavior on the search field within the modal
function changeSearchBehavior() {
    // Target the search input inside the modal
    var searchInput = document.querySelector(".entity-grid .search-input");

    if (searchInput) {
        // Modify search behavior from 'starts with' to 'contains'
        searchInput.addEventListener('input', function() {
            var searchTerm = this.value;
            // Modify the query to search for 'contains' by adding a wildcard at the start
            this.value = '*' + searchTerm;
        });
    }
}

// Function to observe changes in the modal's parent container
function observeModal() {
    // Select the container where the modal will appear
    var targetNode = document.querySelector("body");

    // Configuration of the observer: watch for additions of child elements
    var config = { childList: true, subtree: true };

    // Create an instance of MutationObserver
    var observer = new MutationObserver(function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // Look for the lookup modal in the added nodes
                mutation.addedNodes.forEach(function(node) {
                    if (node.classList && node.classList.contains("entity-lookup-dialog")) {
                        // Once the modal appears, apply the custom search behavior
                        changeSearchBehavior();
                    }
                });
            }
        }
    });

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
}

// Initialize the observer on page load
document.addEventListener("DOMContentLoaded", function() {
    observeModal();
});        

3. Lets analyse the Code ?

- lookupField: Identifies the lookup field element on your form. Replace lookup_field_name with the actual data-id of the field you want to target.

- changeSearchBehavior: This function modifies the search input within the modal, adding a wildcard (`*`) at the start of the entered search term, effectively enabling "contains" search behavior.

- MutationObserver: Observes changes in the DOM, specifically when the lookup modal is opened. When it detects the modal, the changeSearchBehavior function is triggered to modify the search.

4. Implementing the Code in Power Portal

To use this script in your Power Portal:

1. Navigate to Portal Management within Power Platform.

2. Locate the Web Page or Entity Form where the lookup field is located.

3. Add the JavaScript code above in the page’s Custom JavaScript section.

4. Save the changes and clear the portal cache to reflect the new behaviour.

?

5. Testing the Search Behaviour

After adding the script, open your portal and navigate to the page containing the lookup field. When you click the lookup field and the modal appears, try searching with partial text. You’ll notice the search now returns results containing your input, thanks to the wildcard character added by the script.

?

Final Thoughts

Customizing the search behaviour in Power Portal lookup fields can greatly improve the user experience, especially when users need to find records based on partial or incomplete information. By using MutationObserver and JavaScript to add a wildcard, we can easily switch the search from "starts with" to "contains," making it easier for users to find what they're looking for.

This simple yet effective technique provides more flexibility and enhances the overall functionality of lookup fields in your Power Portal applications.

?