Power Pages – Advanced List Filtering Solutions 

Creating intuitive, data-rich web portals shouldn’t be a struggle. At Reach, we’ve seen countless organizations frustrated by the limitations of out-of-the-box filtering in Power Pages Microsoft. Your users deserve better than basic views and forms when they’re trying to find exactly what they need. 

Whether you’re building a product catalog where customers need to narrow down hundreds of items, a knowledge base where employees search for specific procedures, or a case tracking portal where managers need real-time insights, filtering becomes the bridge between overwhelming data and actionable information. 

We understand this challenge intimately. That’s why we’ve developed custom filtering solutions that go far beyond what Power Pages offers natively. Our approach allows you to filter data based on query strings, user roles, related entities, and real-time user input – all while maintaining the performance and user experience your organization demands. 

Why Standard Filtering Falls Short 

Power Pages gives you basic filtering through views and forms, but real-world scenarios demand more flexibility. Your users don’t think in terms of database columns and exact matches. They want to: 

• Select multiple options from dropdown lists 
• Filter by date ranges that make sense for their workflow 
• Search using partial keywords that feel natural 
• Combine filters in ways that match their mental model 

This is where custom filtering transforms the user experience from frustrating to delightful. 

Our Custom Filtering Solutions 

Through our work with clients across industries, we’ve identified three essential filter types that dramatically improve portal usability: 

Multi-Choice Dropdown Filters 

Standard Power Pages dropdowns force users to select only one option at a time. Our multi-choice solution lets users select multiple values, making it perfect for scenarios like filtering products by multiple categories or finding cases assigned to several team members. 

Intelligent Date Range Filtering 

Instead of forcing users to navigate clunky date pickers, we’ve created intuitive date range controls that feel natural and responsive. Users can quickly specify time periods that matter to their work. 

Smart Text Filtering with Fuzzy Search 

Our text filter goes beyond exact matches. It understands that users might search for “inv” when looking for “invoice” or enter partial account numbers. The system intelligently adds wildcards and handles various input patterns. 

Real-World Implementation: Invoice Management Portal 

Let’s walk through a practical example. We recently worked with a client who needed to help their finance team quickly locate specific invoices from thousands of records. 

As you can see in the interface, users can now: 

• Use multi-choice dropdown filters to select multiple invoice categories simultaneously 
• Set date ranges using intuitive date pickers 
• Perform fuzzy text searches that find relevant results even with partial input 

The transformation in user productivity was immediate and measurable. 

Technical Implementation: Date Range Filtering 

Here’s how we implement intelligent date range filtering that feels natural to users: 

// Date filters for Entity Lists 

    $(".entitylist-filter-option-group label:contains(startdatefilter) input").each(function (index){ // identify the two filters we created 

        $(this).attr('type', 'text');           //Change the original checkbox input control's type to Text 

        $(this).val("");                        //Set null value for the original input control 

        $(this).attr('id', "datetimepicker"+index+"input") 

        // Create a fake datepicker 

        let placeholder = (index === 0) ? 'Start date' : 'End date'; 

        var fakedate = `<div id='datetimepicker${index}' class='datetimepicker input-append input-group' data-provide='datetimepicker'><span class='input-group-addon' tabindex='0' aria-label='Choose a date'><span data-date-icon='icon-calendar fa fa-calendar' class='icon-calendar fa fa-calendar' style='cursor:pointer'></span></span><input type='text' class='fake form-control' placeholder="${placeholder}" /></div>`; 

        $(this).closest(".checkbox").parent().prepend(fakedate); //Add fake datepicker to entitylistfilter 

        $(this).closest(".checkbox").hide();    //Hide original filter field 

        $(this).closest(".entitylist-filter-option-group-box-overflow").css("overflow-y","visible"); //Change overflow for parent filter element to allow picker to be visible 

    }); 

    This code transforms the standard Power Pages interface by replacing basic checkbox inputs with intuitive date pickers. The key innovation is defining the filter with adx:uiinputtype=”dynamics” to enable custom user inputs from the portal interface, then enhancing the user experience with JavaScript. 

Smart Text Filtering Implementation 

Our text filtering solution addresses the common frustration of users getting zero results because they didn’t type the exact phrase: 

 $(".grid-actions input").attr("id", "orgSearch"); 

 

        $('#entitylist-filters > li:nth-child(2)').after($('<li>').addClass('little-dash').text('—')); 

 

        $("#entitylist-filters").append(` 

            <li class="entitylist-filter-option-group"> 

                <label class="entitylist-filter-option-group-label bodyh4"> 

                    Keyword 

                </label> 

                <ul class="list-unstyled" role="presentation"> 

                    <div class="entitylist-filter-option-group-box-overflow" style="overflow-y: visible;"> 

                        <li class="entitylist-filter-option" role="presentation"> 

                            <div class="input-append input-group"> 

                                <input id="orgSearch2" type="text" class="fake form-control" placeholder="Search"> 

                            </div> 

                        </li> 

                    </div> 

                </ul> 

            </li>`); 

         

        $("#orgSearch2").on("keyup change", (e) => { 

            if (e.key == "Enter") { 

                $('button.btn-entitylist-filter-submit').trigger('click'); 

            } else { 

                let regExp = /^\d+\.\d{1,2}$/; 

                $("#orgSearch").val(`${regExp.test($("#orgSearch2").val()) ? '' : '*'}${$(e.currentTarget).val()}`); 

            } 

        }); 

This enhancement works by creating a user-friendly search input that intelligently processes queries before sending them to Power Pages. The system recognizes different input patterns and applies appropriate formatting: 

• Decimal numbers (like invoice amounts) are passed through exactly as entered 
• Text searches automatically get wildcard prefixes for partial matching 
• Enter key triggers immediate filtering for responsive user experience 

The beauty of this approach is that it works seamlessly with Power Pages’ existing Entity List architecture while providing users with the intuitive search experience they expect. 

Performance Considerations 

Custom filtering can impact portal performance if not implemented thoughtfully. Here are the key strategies we use to maintain fast response times: 

• Efficient query design – We ensure filters generate optimized server-side queries 
• Client-side validation – Input validation happens immediately, reducing server round trips 
• Progressive filtering – Complex filters are applied in stages to maintain responsiveness 
• Caching strategies – Frequently accessed filter combinations are cached appropriately 

Common Pitfalls to Avoid 

Through our experience implementing these solutions, we’ve identified several common mistakes that can derail custom filtering projects: 

• Over-engineering the solution – Start with the filters your users actually need, not every possible option  
• Ignoring mobile experience – Ensure filters work well on tablets and phones  
• Forgetting accessibility – Include proper ARIA labels and keyboard navigation  
• Neglecting performance testing – Always test with realistic data volumes 

The Impact on User Experience 

The difference between standard and custom filtering isn’t just technical – it’s transformational for daily workflows. Users report: 

• Faster task completion – Finding specific records takes seconds instead of minutes 
• Reduced frustration – Intuitive interfaces eliminate the learning curve 
• Better decision making – Easy filtering enables better analysis and insights 
• Higher adoption rates – When portals are easy to use, people actually use them 

Getting Started with Power Pages Microsoft and Filtering

If you’re considering implementing advanced filtering in your Power Pages portal, here’s how to approach it: 

• Understand your users’ workflows – What are they actually trying to accomplish? 
• Identify filter priorities – Which filters would have the biggest impact? 
• Start with one filter type – Prove the concept before expanding 
• Test with real users – Get feedback early and often 
• Plan for maintenance – Ensure you have resources to support custom code 

Ready to Transform Your Portal? 

Custom filtering has the power to transform your Power Pages portal from a basic data repository into an intelligent, user-friendly workspace. Whether you need multi-choice dropdowns, intelligent date ranges, or smart text searching, the investment in custom filtering pays dividends in user satisfaction and productivity. 

At Reach, we’ve helped organizations across industries implement these solutions successfully. We understand both the technical challenges and the business impact of getting filtering right. 

Want to see these solutions in action? We’d love to show you how custom filtering can transform your specific use case. Contact us for a personalized demo or to discuss your portal’s filtering needs.