Enhancing Search Functionality in Power Apps Portals: A Dive into FetchXML

Introduction

Power Apps portals offer a robust platform for building interactive web applications. One of its most notable features is the ability to create custom search filters using FetchXML. In this article, we'll explore how to use FetchXML for search filters, leverage JavaScript for UI adjustments, and examine the behavior of the "like" operator in FetchXML.

Creating Search Filters with FetchXML

FetchXML is a proprietary query language tailored for Power Apps, enabling developers to set filters on entity lists. To set up a filter to search by "First Name," the FetchXML code snippet would look like this:

xml
<link-entity name="tri_alias" from="tri_aliasid" to="kc_primaryaliasid" link-type="inner" alias="a">
    <filter type="and">
        <condition attribute="tri_firstname" operator="like" value="%%" />
    </filter>
</link-entity>

Additionally, you could create a filter for "Middle Name" using the following FetchXML:

xml
<link-entity name="tri_alias" from="tri_aliasid" to="kc_primaryaliasid" link-type="inner" alias="a">
    <filter type="and" adx:uiname="Middle Name">
        <condition attribute="tri_middlename" operator="like" value="%%" adx:uiinputtype="text" />
    </filter>
</link-entity>

Note: The adx:uiname attribute doesn't work for renaming the filter labels. For that, you'll need to use JavaScript.

Customizing UI Labels with JavaScript

FetchXML is highly capable, but it may not fulfill every UI requirement, especially when it comes to modifying filter labels. The HTML for the "First Name" filter label, for example, looks like this:

html
<label class="entitylist-filter-option-group-label h4" data-filter-id="0" for="multiple_0">First Name</label>

To change this label, you can use the following JavaScript code:

javascript
$(document).ready(function()
{
    const labels = $('.entitylist-filter-option-group-label.h4');
    const newLabels = ['First Name', 'Middle Name', 'Last Name', 'Nickname'];

    labels.each(function(index, label)
    {
        if (newLabels[index]) 
        {
            $(label).text(newLabels[index]);
        }
    });
});

Understanding the "Like" Operator

The "like" operator in FetchXML performs a "begins with" search when given the value "%%." For more flexible searching, such as a "contains" functionality, you may need to look into custom solutions or monitor updates in future Power Apps versions.

Conclusion

By combining FetchXML and JavaScript, you can significantly enhance the search functionality and user interaction within Power Apps portals. While the "like" operator has limitations, exploring custom solutions can give you the search behavior you desire, contributing to a richer user experience.