Power Apps Portals – Adding Icons to Entity List Action buttons via JavaScript

Hi

In my last post, I showed how to change the Action buttons from an Entity List to be displayed as icons instead of the usual dropdown using only CSS, you can check the details here: Power Apps Portals – Adding Icons to Entity List Action buttons via CSS.

But if we have too many Actions setup in our Entity List, the page gets very busy, so it may not be ideal. In this post I am going to show another way to achieve a similar result using JavaScript/jQuery, but this time we will leave the main actions (Details/Edit/Delete) as icons, and the remaining in the dropdown.

So I am going to remove the CSS from my Web Page, and my Entity List is going back to this state:

If you didn’t see my previous post, what I have here is a simple Entity List pointing to my Active Accounts view from my CDS environment, and I have a few actions setup as part of my Entity List (Edit/View Details/Delete/Run Workflow to send an e-mail).

Now it’s time to write the JavaScript, there are tons of ways to approach this, I will describe the actions I am performing in my JavaScript:

• Validate that my list contains actions associated
• Create an object with the rows from the list
• Start looping the list rows
  • Create an object with the actions for that row (only actions for Edit/Details/Delete)
    • Start looping the actions
      • Create an object to store the span class of the action, which contains the icon
      • Create dynamically a new <span> with the previous class and add that to the main action element
      • Via JS I am adding some styling, but you can also set a class from your CSS and reference it here, you can also change those properties if you prefer the icons bigger/smaller
      • Remove the old action element
    •  Create an object with the actions for that row (Workflow)
    • Start looping the actions
      • Here I will replace the current <div> element for a new <a> element
      • Again I am manually applying some styling that could be in the CSS
      • Move the <a> element to the far right by appending to the previous object
    • Finally we can remove the old dropdown button completely

$(document).ready(function () {
    ChangeGridButtons();
});
ChangeGridButtons = function () {
    $(“.entity-grid”).on(“loaded”, function () {
        if ($(this).find(“.view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.details-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.edit-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.deactivate-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.delete-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.disassociate-link”).length > 0) {
            var rows = $(this).find(“.view-grid .table tbody tr td:last-child”);
            $.each(rows, function (index, row) {
                var actions = $(row).find(“ul.dropdown-menu > li > a.details-link, ul.dropdown-menu > li > a.edit-link, ul.dropdown-menu > li > a.deactivate-link, ul.dropdown-menu > li > a.delete-link, ul.dropdown-menu > li > a.disassociate-link”);
                $.each(actions, function (index, action) {
                    var li = $(action).parent();
                    var iconClass = $(action).find(“span”).attr(“class”);
                    $(action).append(“<span class='” + iconClass + “‘></span>”);
                    $(action).append($(action).find(“span”));
                    $(action).css(“font-size”, “18px”);
                    $(action).css(“text-decoration”, “none”);
                    $(action).css(“padding-right”, “4px”);
                    $(row).append($(action));
                    li.remove();
                });
                var actions = $(row).find(“ul.dropdown-menu > li > a.workflow-link”);
                if (actions.length > 0) {
                    var divDropDown = $(row).find(“div.dropdown”);
                    $(divDropDown).css(“display”, “unset”);
                    $(divDropDown).append(“<a class=’dropdown-link’></a>”);
                    var aDropDown = $(divDropDown).find(“a.dropdown-link”);
                    $(aDropDown).attr(“aria-expanded”, “false”);
                    $(aDropDown).attr(“data-toggle”, “dropdown”);
                    $(aDropDown).css(“text-decoration”, “none”);
                    $(aDropDown).css(“cursor”, “pointer”);
                    $(aDropDown).append($(divDropDown).find(“span”));
                    // move dropdown to the far right
                    $(divDropDown).appendTo(row);
                }
                $(row).find(“div.dropdown”).find(“button”).remove();
            });
        }
    });
};

You can place the above code in the Entity List or Web Page custom JavaScript section, and now this is how our Entity List looks:

JavaScript VS CSS – Which one is better?

Well, there is no right or wrong, it really depends on your scenario/requirement.

Performance wise we can expect the CSS method would be better, but usually you won’t have an Entity List displaying a large number of records per page, by default an Entity List displays 10 records per page, so the JavaScript should run quick enough. It also depends on what you are most comfortable with, performing style changes or code changes.

I hope you find this post useful for your Portals project.