Custom Date Range Filter in Entity List powerapps portal

 

In this post , we are going to see how to add the custom date range filter in powerapps portal entity list.

As we all know that we can add the filter in entity list using metadata filter configuration in portal management app. However there is no OOB date range filter in entity list. To achieve this need write Jquery and add calendar css reference.

Below step will help us to add the date range filter in entity list.

1. Select Metadata filter and choose orientation

2.  Create two fetch xml one is for from date and other for to date.

1st Fetchxml:

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="From">

      <condition value="" attribute="createdon" operator="on-or-after" adx:uiinputtype="dynamic" />

</filter>

2nd Fetchxml:

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="To">

      <condition value="" attribute="createdon" operator="on-or-before" adx:uiinputtype="dynamic" />

</filter>

3. Go to option tab in entity list and write the jquery to change the property of from and to control from checkbox to text

//Change the ‘checkbox’ control’s type as Text

$('[name="3"]').prop('type', 'text');

//Set Unique Id for the control

$('[name="3"]').prop('id', 'from');

//Hide the control

$('[name="3"]').hide();

$('[for="3"]').hide();

//Set null value for the Dates

$("#from").val("");

$('[name="4"]').prop('type', 'text');

$('[name="4"]').prop('id', 'to');

$('[name="4"]').hide();

$('[for="4"]').hide();

//Set null value for the Dates

$("#to").val("");

$('[for="dropdown_1"]').hide();

$("#dropdown_1").hide();

$("ul#entitylist-filters").append("<li class='entitylist-filter-option-group'><label class='entitylist-filter-option-group-label h4'>Date Range</label><div id=DateRange class='form-control'><i class='fa fa-calendar'></i>&nbsp;<span id=DateRangeValue></span><i class=fa fa-caret-down pull-right></i></div></li>");

var start = moment();

var end = moment().add(10, 'days');

function cb(start, end) {

$('#DateRangeValue').html(start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));

}

$('#DateRange').daterangepicker({

startDate: start,

endDate: end

}, cb);

cb(start, end);

$('#DateRange').on('apply.daterangepicker', function(ev, picker) {

var dates = $("#DateRangeValue").html().split(" - ");

$("#from").val(dates[0]);

$("#to").val(dates[1]);

});

});

4. Go respective webtemplate and paste the below reference.

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. Thats it , go to make.powerapps.com ->Sync configuration