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();

// })

});

})