Style Entity List View on Powerapps Portals

STYLING ENTITY LIST VIEW ON POWERAPPS PORTALS

In PowerApps portals List view is used to display view of your desired entity in your webpages without the need for a developer to surface the grid in the portal, it also provide the capability for pagination, which paginate automatically if the record in a list is greater than the page size specified, each record will contain a link to the page, and the ID of the record will be appended to the query string along with the ID Query String Parameter Name. The list also supports multiple views. If more than one view has been specified, a drop-down list will be rendered to allow the user to switch between the various views.

We have multiple navigation menu available but today we will discuss about the Options which is used for grid configuration and for custom JavaScript.

So if you want to give styling to the view according to the column data like in my case it is Job Status, we can used JS.

CODE:
$(document).ready(function (){

    var entityList = $(".entitylist.entity-grid").eq(0);

    entityList.on("loaded", function () {

        entityList.find("table tbody > tr").each(function (index, tr) {

            var td = $(tr).find('td[data-attribute="akouo_jobstatus"]');

            var tda =$(tr).find('td[data-attribute="akouo_jobstatus"] a');

           

            var primaryColumn = $(tr).find('td[data-attribute="akouo_jobstatus"]').text();

           

            if(primaryColumn == "New request" || primaryColumn == "Quote Sent" || primaryColumn == "Quote Accepted")

            {

                $(tda).css("background-color", "#2770b5");

                $(tda).css("color","white");

                $(tda).css("padding","2px 5px 2px 5px");

            }

            if(primaryColumn == "In Preparation")

            {

                $(tda).css("background-color", "orange");

                $(tda).css("color","white");

                $(tda).css("padding","2px 5px 2px 5px");

            }

            if(primaryColumn == "Prepared")

            {

                $(tda).css("background-color", "green");

                $(tda).css("color","white");

                $(tda).css("padding","2px 5px 2px 5px");

            }

            if(primaryColumn == "Quote Refused" || primaryColumn == "Not Invoiced" || primaryColumn == "Invoiced" || primaryColumn == "Completed")

            {

                $(tda).css("background-color", "grey");

                $(tda).css("color","white");

                $(tda).css("padding","2px 5px 2px 5px");

            }

        });

    });

});

Join us next time, as we continue our journey of learning canvas apps.Click here to learn more about Imperium's Power Apps Services. We hope this information was useful, and we look forward to sharing more insights into the Power Platform world.

---

---