Custom filter button to show metadata filter on entity list

 Below jquery is to add custom filter button to show and hide the metadata filter in entity list.

var btncount = 0;

$(".entitylist.entity-grid").on("loaded", function (e) {

e.preventDefault();

if(btncount == 0){

$(this).children(".view-toolbar").append

('<button id="filterbtn" style="font-size:23px ;background-color:#FDFEFE;color:#2980B9;border:none; ">

<i class="fas fa-filter" style="font-size:25px;color:#2980B9"></i></button>');

btncount++

}

$('.view-loading, .message, .text-center').prop("style" , "display:none");

$(this).children(".view-grid").find("th").css("background-color", "#EBF5FB ");

$(this).children(".view-grid").find("tr:even").css("background-color", "#F4F6F6");

var count = 0;

$("#filterbtn").click(function(){

count++;

$('.col-md-3, .filter-vertical').show();

$('.col-md-3, .filter-vertial').prop("style","margin-left:-20px;")

$('.entity-grid, .entitylist').prop("style" , "margin-right:-35px;margin-left:-9px")

if(count % 2 == 0) {

// $('.col-md-3, .filter-vertical').hide();

// $('.entity-grid, .entitylist').prop("style" , "margin-right:-215px ; margin-left:33px")

} else {

}

})

Color Highlights in Entity list rows and column in powerapps portal

 In this post , we are going to see how to highlight the row and specific column in entity list. 

Add below mentioned jquery in entity list options tab

Use below jquery to highlight the rows alone in entity list

$(document).ready(function () {

$(".entitylist.entity-grid").on("loaded", function (e) {

e.preventDefault();

if(btncount == 0){

$(this).children(".view-toolbar").append('<button id="filterbtn" style="font-size:23px ;background-color:#FDFEFE;color:#2980B9;border:none; "><i class="fas fa-filter" style="font-size:25px;color:#2980B9"></i></button>');

}

$('.view-loading, .message, .text-center').prop("style" , "display:none");

$(this).children(".view-grid").find("th").css("background-color", "#EBF5FB ");

$(this).children(".view-grid").find("tr:even").css("background-color", "#F4F6F6");

var count = 0;

});

})

use below jquery to highlight rows as well as specific column in entity list

$(document).ready(function () {

$(".entitylist.entity-grid").on("loaded", function (e) {

e.preventDefault();

if(btncount == 0){

$(this).children(".view-toolbar").append('<button id="filterbtn" style="font-size:23px ;background-color:#FDFEFE;color:#2980B9;border:none; "><i class="fas fa-filter" style="font-size:25px;color:#2980B9"></i></button>');

btncount++

}

$('.view-loading, .message, .text-center').prop("style" , "display:none");

$(this).children(".view-grid").find("th").css("background-color", "#EBF5FB ");

$(this).children(".view-grid").find("tr:even").css("background-color", "#F4F6F6");

var count = 0;

$(this).children(".view-grid").find("td[data-attribute='statuscode']").each(function (i, e){

var value = $(this).data(value);

if(value.value.Value ==100000001)

{

$(this).closest('td').prepend('<i class="fas fa-exclamation-circle" style="color:#F1C40F;"></i>&nbsp;');

}

if(value.value.Value ==1)

{

$(this).closest('td').prepend('<i class="fas fa-clock" style="color:#E67E22;"></i>&nbsp;');

}

if(value.value.Value ==3)

{

$(this).closest('td').prepend('<i class="fas fa-minus-circle" style="color:#CB4335;"></i>&nbsp;');

}

if(value.value.Value == 5)

{

$(this).closest('td').prepend('<i class="fas fa-check-circle" style="color:#2ECC71;"></i>&nbsp;');

}

else{

}

// $("ul.pagination").click(function(e){

// e.preventDefault();

// })

});

})

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