Rendering Lookup as Dropdown with Icons in Power Pages

IPower Pages offers a fantastic way to create dynamic forms, but when dealing with lookup fields, sometimes the default rendering doesn't provide the best user experience. In this blog, we will walk through how to render a lookup field as a dropdown, enhance it with custom filters, and then take it a step further by adding icons to make it more visually engaging and user-friendly.

Step 1: Rendering the Lookup Field as a Dropdown

For a detailed walkthrough on how to render a lookup field as a dropdown with custom filtering, be sure to check out this amazing blog: Custom Lookup Filtering on PowerApps Portal. This guide provides a step-by-step explanation of how to dynamically filter and render lookup fields as dropdowns based on specific conditions.

Now that we know how to set up the basic dropdown, let's move on to how we can enhance it with icons and flags.

Step 2: Customizing the Lookup Field with Filters and Icons

For this example, let’s say we’re working with universities and their respective countries. We’ll enhance the dropdown to:

• Filter the universities dynamically (e.g., based on country).

• Add country flag icons next to the university names for better visual recognition.

JavaScript Code to Render and Filter the Lookup Dropdown

$(document).ready(function () {    

    renderLookupDropdown();  

});  

function renderLookupDropdown() {    

    let functionName = "renderLookupDropdown";      

    // Function to map country names to flags

    function getFlagEmoji(countryName) {        

        const countryFlags = {            

            "United States": "🇺🇸",            

            "Canada": "🇨🇦",            

            "England": "🇬🇧",            

            "India": "🇮🇳",            

            "France": "🇫🇷",            

            "Germany": "🇩🇪",            

            "Australia": "🇦🇺",            

            "Japan": "🇯🇵",            

            "Italy": "🇮🇹",            

        };          

        return countryFlags[countryName] || '';

    }      

    try {        

        // Clear the dropdown before populating

        $("#universityDropdown").empty();          

        // Fetching university data dynamically

        $.getJSON("/getuniversities", function(data) {            

            if (data.results && data.results.length > 0) {                

                data.results.forEach(element => {                    

                    let schoolSymbol = "🏫";                    

                    let countryName = element.Country || '';  

                    let countryFlag = getFlagEmoji(countryName);  

                    let countryInfo = countryName ? `${countryFlag}` : '';                      

                   

                    // Create an option element for each university

                    let option = document.createElement("option");                    

                    option.value = element.Id;                      

                    let optionText = `${schoolSymbol} ${element.Name} - ${countryInfo}`;                      

                    option.innerText = optionText;                      

                   

                    // Append the option to the dropdown

                    $("#universityDropdown").append(option);                

                });                

                $('#universityDropdown').val('');            

            } else {                

                console.log("No universities found.");            

            }        

        });    

    } catch (error) {        

        console.log(error + " " + functionName);    

    }

}

Explanation of the Code

1. Rendering the Lookup Field as a Dropdown: The renderLookupDropdown() function is responsible for rendering the lookup field as a custom dropdown. It first clears any existing options using $("#universityDropdown").empty() to ensure the dropdown is ready for fresh data.

2. Country Flag Mapping: We’ve created the getFlagEmoji() function, which maps each country name to its corresponding emoji flag. This function enhances the user experience by associating each university with a recognizable flag, making it easier to identify universities from different countries.

3. Populating the Dropdown: After fetching the university data using an AJAX call ($.getJSON), we loop through each university and create a new <option> element for the dropdown. The option text is a combination of the school symbol, the university name, and the country flag (if available).

4. Appending to Dropdown: The dynamically created option is then appended to the #universityDropdown element. This ensures that the user sees a list of universities with their respective country flags in the dropdown.