Posted in Entity List, Power Apps Portals

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

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:

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)


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:

This is how my Entity List looks now:



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.

Posted in Entity List, Power Apps Portals

Power Apps Portals – Entity List: Removing Sort/Order By from column

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 = 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) {
                var newElement = “ < span > ”+columnName + “ < /span>”;

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.

Posted in Entity List, Power Apps Portals

Power Apps Portals – Entity List: Conditional Action

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:

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
entity list - conditional action 01
  • 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:

entity list - conditional action 05
entity list - conditional action 02

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" />

entity list - conditional action 03

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:

entity list - conditional action 04

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.

Posted in JavaScript/jQuery Plugins, Power Apps Portals

Power Apps Portals – Adding field Mask

Currently in Power Apps Portals, we can’t set a mask for a field, which usually improves a lot the UX. In this post I will show you how a simple example to achieve that using JavaScript/jQuery.

In my case, I am adding a whole number field to the Profile page/form.

Download jQuery Mask Plugin

For this example I am using the following jQuery Plugin:

  • Download the plugin and locate the jquery.mask.min.js file under the “dist” folder
  • Create a Web File in your CDS environment
    • Note that by default you can’t upload a .JS file, I am going to rename the file to .ES to bypass this validation (you can also change your environment settings but this is not recommended) – but keep the Partial URL as .JS
    • I am going to set the parent page as Home
    • I am going to set it to be hidden from site map and excluded from search

Adding JS library reference

We need to reference the JS, open your Web Page (content page) and add the following to your HTML “copy” field:


You can also add the above line to the “Tracking Code” Content Snippet, and this would be loaded in every page, in my example this JS would only be loaded in the Profile Web Page.

Adding the mask via JavaScript / jQuery 

Still in your content page, navigate to the Advanced tab and add the following code:

$(document).ready(function () {
AddWholeNumberMask = function()
         $("#ollie_wholenumber").mask("00000", { placeholder: "i.e.: 12345" });


This is how you will see your mask in the Portal, and the mask will prevent the user from typing non-number fields or more than 5 numbers in my case.


You can reference the below documentation for other masks (date field / money / e-mail / etc):

Above I am using a placeholder to indicate the user what the expected format is, but this is optional, I could have the mask just as: $(“#ollie_wholenumber”).mask(“00000”);

Posted in Export Content, Power Apps Portals

Power Apps Portals – Print/Export Content

Power Apps Portals provides us with very quick and simple ways to expose data from the D365 system into an external portal. Often, we have requirements to export or print the data using current Word Templates present in D365, but unfortunately there is no OOB feature (currently) for performing this task.

In this post, I will describe what is available using the OOB configuration from the portal, and how to extend it in order to export the data in the application. The idea of this post is not explain the Portal objects (Web Template,  Entity List etc), you can find content on the Power Apps Portals on the following link:

For this demo, we will be using the following setup:

  • Power Apps Portals Starter (Version

Before going to the step-by-step, below you can see what we will be achieving by going through the end of the post:


As a starting point, we will create an Entity List and Web Page record to present a list of the Active Contacts:

This is how the list will be rendered by default in your Portal page:


For Entity List records, we have the option (OOB) to add an Export to Excel button, this can be achieved by:

  • Open your Entity List record
  • Navigate to tab Options
  • In the Grid Configuration add a “Download” action and add a label

This is how the button is shown on the Portal, and once clicked, you will download an Excel file with the list content:


Unfortunately, this excel file is rendered just like our Advanced Find Export to Excel feature, which is not bad, but usually when we have a Website, we (and our customers) want this information to be presented in a friendlier way.

So now, we are going to the fun part, let’s extend this by creating our custom “Print Button”, which will use the standard JavaScript function to print a Page.

Now create a new Page Template and Web Template and make sure to associate the new Page Template to your existing Web Page:


For the Web Template record, I basically copied the content from the OOB Web Template “Full Page” and removed a few lines, leaving only the condition that will render the Entity List.

At this moment, nothing has changed and our Web Page is behaving exactly the same way as before.

Now, we are going back to our recently created Web Template, and add the following:

  • Give a name for the Div that is holding your Entity List
  • Add the Button for printing (outside the div)
  • Add the JavaScript code that will actually perform the printing (in the .JS code, I am actually creating a new HTML document, so we need to reference the .css here)

What I am also going to do, is add a new hidden DIV in the page with a custom logo (just create a Web File and upload your Logo in the notes), we can play around with showing/hiding the DIVs as we want in the JavaScript function, just make sure to set it up back to normal before the user closes the print window.

  • Add DIV with logo inside your print DIV
  • Show the Logo before setting the HTML content, also hide the Command Bar which will contain your Search Box / View Selector / Create or Download button (in case you setup any of those)
  • After setting the HTML Content, Hide the Logo and show again the Command Bar
  • In the top of the HTML, before the <head>, add:

Now we have our Logo being shown only for the printed window, and we have the same layout as the Portal webpage.

The following is the final code for the Web Template:

{% extends 'Layout 1 Column' %} {% block main %} {% include 'Page Copy' %} {% if page.adx_entitylist %}
<div id="printList">
    <div id="dvLogo" style="text-align:center; display:none">
        <img style="width: 300px;" src="/company-logo.png">
    {% include 'entity_list' key: %}
<form id="printForm">
    <input class="entitylist-download btn btn-info action" type="button" value="Print Contacts" id="btnPrint" />
{% endif %}
<script type="text/javascript">
    $("#btnPrint").on("click", function() {
        document.getElementById('dvLogo').style.display = 'block';
        document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = 'none';

        var divContents = $("#printList").html();

        document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = 'block';
        document.getElementById('dvLogo').style.display = 'none';

        var printWindow ='', '', 'height=600,width=800');
        printWindow.document.write('<link rel="stylesheet" href="/bootstrap.min.css" />');
        printWindow.document.write('<html><head><title> Active Contacts</title>');
{% endblock %}


You can also use the same implementation to any other Web Page in your Portal, this way you can, for example, create a custom Web Template for your entity, displaying the information the way you need and add the Print button, showing and hiding anything on the Web Page if required, like logos, sensitive information, etc.

Maybe in the future Microsoft provides us a way to export using Word or Excel templates, which would be a very nice feature.

I hope this post has been helpful to you and your Power Apps Portals implementation.