Category: Power Apps Portals

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.

With Power Apps Portals, we can setup Actions against an Entity List to perform Edit / Delete / View Details and many other operations.

To see more details on how to create the Actions against your Entity List please refer to this link: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/entity-lists#entity-list-configuration

These Actions are displayed in a dropdown list on the right side of each record:

For a nicer UX, I will show you how to display the actions as icons within the list row.

There are a few different ways to achieve this, I will write two posts, one using CSS, and another one using JavaScript.

To start, I am creating an Entity List pointing to the Active Contacts view in my CDS environment.

Now I am creating the following actions against my Entity List and the necessary components involved:

• Edit Action – Entity Form to edit the record
• View Details Action – Web Page to view record details
• Delete Action – Deletes the record and refreshes list
• Workflow Action – Simple Workflow to send an notification e-mail to the Contact (this will only be visible if the Contact record has an e-mail, you can view more details on this in the following post: Power Apps Portals – Entity List: Conditional Action)

CSS

I am creating a CSS now that will perform the following actions:

• Hide the dropdown button
• Force the action menu to be displayed (without the dropdown button)
• Force the menu items to be displayed inline (the same row)
• Set the font-size as 0 so it will hide the text
• Set the font-size only for the <span> element (which contains the icon) to 18px (you can always change this size if you want it bigger/smaller icons)
• Set a different color for the hover event of the icon

.view-grid .dropdown.action>.btn {
    display: none;
}
.view-grid .dropdown.action .dropdown-menu {
    display: block;
    position: static !important;
    position: initial !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 95px;
    min-width: 95px;
    width: 95px;
    left: auto !important;
    top: auto !important;
}
.view-grid .dropdown.action .dropdown-menu li {
    display: inline-block;
    text-align: center;
}
.view-grid .dropdown.action .dropdown-menu li a {
    font-size: 0;
    padding: 2px;
    margin: 0;
}
.view-grid .dropdown.action .dropdown-menu li a>span {
    font-size: 18px;
}
.view-grid .dropdown.action .dropdown-menu li a:hover {
    color: #008C95;
    background: transparent;
}

For simplicity I am adding the CSS in the Web Page CSS section, but you could also apply this to the existing bootstrap web file, or create your own CSS web file.

Now by refreshing your page (remember always to clear the cache), you will have the following result:

Ok, great we have the icons there, but where has my Workflow action gone?

By default, Workflow actions (and a few others) doesn’t have an icon related to the action, for this reason our CSS is not working properly. If I inspect the element, I can actually see the action is there, but as it doesn’t have any icon, we are hiding the text and there is nothing to be rendered:

How do we fix it?

Simple enough, we need to add an icon to our action, we can do this in the Entity List options, by adding a <span> element to the button label property:

<span class="fa fa-envelope fa-fw" aria-hidden="true"/>

I am adding an envelope icon as my workflow represents sending an e-mail, but you can have a generic icon or anything else within the bootstrap/glyphicons: https://getbootstrap.com/docs/3.3/components/.

This is how my Entity List looks now:

Conclusion

I think this really enhances the user experience within an Entity List/Subgrid in the Portal, and the CSS method is a very simple implementation.

If your list contains too many actions, you might end up with a very busy web page and a poor UX. For this I will write a separate post using JavaScript, keeping the main actions as icons, and having secondary actions in the dropdown.

A special thanks to my colleague Jonathan Pavan that helped on this.

Hi, today I am going to talk about how to remove the Sort / Order By for a column within an Entity List in Power Apps Portals.

There are a few different ways on achieving that, I am going to show you a way using JavaScript/jQuery to change the element type representing the column header.

I am creating a simple Entity list pointing to the Active Contact view from my CDS environment, at this point all columns are sortable:

Now I am going to write a JavaScript code, where I am getting the column for the “Full Name” attribute (index 0) and replacing the <a> element for a <span> element.

I am adding this logic to the load event of the Entity List, to make sure it will apply if the user performs a sorting in the other columns, I am also validating the header name (aria-label) before performing the action, the reason for this is because once another load happens (a sort in the other columns for example), the index 0 for my list is now the Email column, which I don’t want to disable sorting in my scenario.

Code to be added in the JavaScript section against the Entity List record:

$(document).ready(function() {
    DisableSort();
});
DisableSort = function() {
    var list = $(“.entitylist.entity - grid”).eq(0);
    list.on(“loaded”, function() {
        var columnIndex = 0; // index of column you want to remove sorting
        var columnName = “Full Name”; // name of column you want to remove sorting
        var column = list.find(“table thead th a”).eq(columnIndex);
        if (column) {
            var text = column.attr(“aria - label”).trim();
            if (text == columnName) {
                column.find(“span”).remove();
                var newElement = “ < span > ”+columnName + “ < /span>”;
                column.replaceWith(newElement);
            }
        }
    });
};

Now the column Full Name for my Entity List is disabled for Sort/Order By:

You could find better ways to retrieve the column index, this is just a simpler code to achieve a common requirement in Power Apps Portals.

I hope you found this post useful.

Power Apps Portals allows us to fire actions against the individual records presented in an Entity List, these actions can be:

• Trigger an On-Demand Workflow
• Redirect to a Web Page
• Activate/Deactivate the record
• Create a related record
• Delete / Edit the record
• View Details of the record

This feature comes very useful when we have multiple forms in the same entity, or we want to redirect to another page passing parameters, etc.

The purpose of this post is not to go deep on creating the Entity List and associate the Actions, for more information on this, check the following documentation: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/entity-lists

In this post, I will show how to filter (display/hide) the Entity List Action options based on the record data with a Fetch XML filter:

• Create an Entity List record – I am creating a simple entity list pointing to the Active Contacts view

• Create an Action to your Entity List
  • I am creating a simple Workflow (On-Demand) to send an e-mail to the contact
• Create a Web Page record to show the record Details
  • This will be a Details action

At this moment, if you test your Portal, you will see the two options available in the Action menu for each Item:

Now I want to make a validation against the record to filter my actions, in my case, as an example I will make the following validation:

• If the Contact’s email field is empty
  • Hide the “Send e-mail” option

In the Entity List record, go to the Actions under Grid Configurations, select Advanced Settings and add a Fetch XML in the Filter Criteria (the Fetch XML must contain the header/basic structure, not just the filter):

<fetch version="1.0″ output-format="xml-platform" mapping="logical" distinct="false">
    <entity name="contact">
        <filter type="and">
             <condition attribute="emailaddress1″ operator="not-null" />
        </filter>
     </entity>
</fetch>

Now when I go to my Portal and select the actions dropdown for a contact with no e-mail address, the “Send E-mail” option won’t be availeble:

This filter is very helpful to achieve common requirements using Entity Lists.

I hope this was useful to you, and hope it helps with your Power Apps Portals project.