Last updated on 26/04/2023
If you want to learn more about different types of filters you can use out of the box with lists in Power Apps Portals this is the blog post for you:
I found a couple of examples on how to enable date range filers for entity lists on other blogs, but most of them were for when a Custom Entity List web template renders your list.
I have a blog post on how to control the HTML and build your own custom list:
Thank you for the inspiration
I found one example that I took inspiration from https://www.netwoven.com/2019/04/16/how-to-add-date-range-filter-controls-in-entity-list-in-dynamics-365-portal/
I implemented it, but during tests, we discovered issues with dual language.
The list filters
First, we need to create two XML filters on the list. Both filters will be targeting the “Created On” date of the case table to enable me to find cases created between two dates.
These XML-filters will initially look like checkboxes – but we’ll change this with a script.
IMPORTANT: Both filters need to have
value="startdatefilter" – that is the identification the script will use to identify the fields.
Navigate to the list where you need the filter in Portal Management App. On the “General” tab scroll down to the “Metadata filter” section and click the “+ FetchXML filter”-button.
Paste this code in the first “FetchXML-filter” you create. This is the code for the “From” date.
<filter type="or" adx:uiinputtype="dynamic" adx:uiname="Created from"> <condition value="startdatefilter" attribute="created" operator="on-or-after" adx:uiinputtype="dynamic" /> </filter>Code language: HTML, XML (xml)
For the second “FetchXML filter” use this code. It’s almost identical to the one above, only this has
<filter type="or" adx:uiinputtype="dynamic" adx:uiname="Created to" > <condition value="startdatefilter" attribute="created" operator="on-or-before" adx:uiinputtype="dynamic" /> </filter>Code language: HTML, XML (xml)
Rearrange the two filters so that they appear on top. It will look like this:
The script grabs all fields with the identifier “startdatefilter” and creates a new input field with a date picker next to it. We need to display the date in different formats according to the current language. Norwegian is normally the format DD.MM.YYYY and English MM/DD/YYYY. The dates are then transported into a third format YYYY-MM_DD before it’s used to filter the list.
When you have added the code, save the list and refresh the cache to see the results.
Date range filter on case list
First, when I load the list I have cases with different “Created On” dates. Some are new, and some are from 2017.
I add dates in the “Created from” and “Created to” filters using the date picker, and click the “Apply Filter” button at the bottom of the filter panel. Then my list (without reloading the page) hide all cases that are not created within that range.
Feel free to add a comment telling me what kind of tables you have used this for,
Good luck and have fun!