Style Entity List View on Powerapps Portals

| Muhammad Yaseen

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.


M
Chief Architect, Founder, and CEO - a Microsoft recognized Power Platform solution architect.

About The Blog

Stay updated with what is happening in the Microsoft Business Applications world and initiatives Imperium is taking to ease digital transformation for customers.


More About Us

We provide guidance and strategic oversight to C-Suite and IT Directors for on-going implementations. Feel free to give us a call.

1 331 250 27 17
Send A Message

Ready to Start?

Get a personalized consultation for your project.

Book a Meeting