Posted in Caching, Power Apps Portals

Power Apps Portals – Caching Tips

My record data is not up to date

My portal configuration is not showing the latest definition

I can’t see the Clear Cache button

The above are very common questions as regards Power Apps Portals Caching. In this post I will give you guys a few tips on how to identify/solve some of these issues.

A few things are very important to know about how Power Apps Portals uses CDS Dataflex Pro data:

  • Power Apps Portals shares the same database as your Model-Driven App, it doesn’t have a database copy and there is no data sync involved
  • A Server-Side Caching is part of the Portals capabilities to improve performance, a message is transferred asynchronously between your Dataflex Pro and the Portals to notify (invalidate) the data once it’s changed
  • The SLA for message transfer is 15 minutes
  • Cache is automatically invalidated when sync transactions are triggered via Portals
  • When a D365 org is reset or restored, cache invalidation can stop working. To enable it, go to Portal Admin Center > Portal details tab > Press Update
  • Clear Cache function is available on <Portal URL>/_services/about (must be logged in as Administrator)
  • No web notification invalidation plugin is required to invalidate cache (this was legacy on ADX Portals)

The above should give you a better understanding of how it works. Let me share a few more tips with you:

Clear Cache function in Bookmark

Add the below JavaScript code into a bookmark in your browser, this will open a separate tab with the Clear Cache page, regardless of which Portals/Page you have opened.

javascript:((function(){"/_services/about", "_blank");})())

Clear Cache page

The Clear Cache page shows information about your current Power Apps Portals, like version, Organization ID, etc. Three buttons are available for caching actions:

  • Clear cache: clear cache for both transaction and configuration entities
  • Rebuild search index: rebuild full search index, to be used when Global Search configurations are changed
  • Clear config: clear cache for adx_* entities

Administrator Web Role

If you see a blank page when opening the clear cache page, it means you are not logged in as an Administrator user.

Go to > Apps > Portal Management App > Contact > find your Contact record and under related entities go to Web Roles. Make sure you have the Administrators Web Roles associated to your Contact.

Clear Cache using Portal Studio – Sync Configuration

Another way to clear the cache is using Portal Studio capabilities, to use this option, go to > Apps > Select your Portal app and click Edit:

Click on the Sync Configuration button to clear the cache:

Clear Cache using Portal Admin Center

Also, another way to clear the cache is by using Portal Admin Center actions. To use this option, go to > Apps > Select your Portal app click Settings and click Administration:

On the left menu click on Portal Actions and click the Restart option:

This will restart the website app service and clear the server-side cache.

This option might take your Portal offline for a few minutes, so be aware of that when performing this action.

Can I Clear Cache Programmatically?

No. Currently there is no supported way to clear cache programmatically, so it is not possible to automate or trigger it programmatically.

Retrieving data via FetchXML/Liquid or oData

If you are retrieving data programmatically in the Portals, it’s possible to bypass the cache by making sure your query is always unique. A simple way of achieving this is by adding a filter with a timestamp, for example:

  • oData – JavaScript
var oDataURL = "/_odata/myoDataSet";
var filter = "?$filter=new_name ne '" + new Date().getMilliseconds() + "'";
  • FetchXML – Liquid

In my example, I first create a variable and then add it as a condition in my FetchXML. The only reason I do this is to make it easy to reuse the code in different places, you can even create a Web Template just returning that filter condition and reuse it by using the include tag (maybe this is a topic for another post):

{% assign currentDate = now | date: "yyyyMMddHHmmss" %}
{% assign conditionCache = ' <condition attribute="new_name" operator="ne" value="' | append: currentDate | append: '" />' %}

Then you just add the condition in your FetchXML:

{% fetchxml myFetch %}
        <entity name="new_entityname">
          <filter type="and">
            {{ conditionCache }}
{% endfetchxml %}

CSS changes

When making changes related to styling/CSS, your local browser cache might be influencing here as well. You might consider trying an in-private/incognito session or clearing the local browser’s cache.

Thanks Nikita Polyakov for this tip. 


Microsoft is constantly making improvements related to Portal caching. But for now, we still have to live with some of the above issues.

I hope this post has been useful for you to get a better understanding of how Caching works, and how to overcome potential obstacles you might run into along the way.

Posted in JavaScript/jQuery Plugins, Power Apps Portals

Power Apps Portals – JavaScript Tip #01 – Hide & Show Elements

Power Apps Portals allows us to add custom JavaScript/jQuery code to manipulate behaviour within the Portals website.

I am starting a series of quick posts with snippets of JavaScript/jQuery code to help you with your Power Apps Portals implementation.

When talking about client-side customization, there is no single way of interacting with the page elements, there are several ways to achieve same results, in this post I will give an example on how to hide & show elements in your page, so here we go:

Hide & Show Fields

$("#<field name>").closest("td").find("div.control,").hide(); // show();

Hide & Show Section

$("table[data-name='<section name>']").parent().hide(); // show();

Hide & Show Tab

$("div[data-name='<tab name>']").prev("").hide();  // show();
$("div[data-name='<tab name>']").hide();  // show();

Hide & Show Entity List/Sub-grid column

var list = $(".entity-grid")
list.on("loaded", function () {
	list.find("th:contains('<column display name>')").hide(); // show();
	list.find("td[data-th='<column display name>']").hide(); // show();

Hide & Show Option Set value

$("#<field name> option[value='< option set value>']").hide(); // show();

Do you have any suggestions or requests for another JavaScript tip? Let me know in the comments below.

Posted in Menu / Navigation, Power Apps Portals

Power Apps Portals – Navigation Menu showing every Web Page

Have you recently come across a situation where after defining the links for your main navigation menu, it suddenly resets on its own showing every custom Web Page you’ve created? Well, in this post I am going to show you how to stop that from happening.

Behind the scenes

First, we need to understand how the menu is structured. A menu is represented by two entities in your CDS environment:

  • Web Link Set: represents a group of links, the main menu for example is represented by the Default Web Link Set
  • Web Link: represents the link to a certain page in your Portal, or an external URL, you can also define an image to be displayed and the order to be shown in your Web Link Set

For more information on managing Web Link Set/Web Link, please refer to the official documentation:

Finally these entities are represented as custom Liquid objects, being rendered in the Header or Footer Web Template.

What is causing this menu reset?

Now let’s understand exactly what is happening with the Portals.

Microsoft is making a lot of investment in Portals Studio app ( adding lots of new features on a regular basis. Personally, I am not a big fan of the Portals Studio and I still go to the classic Portal Management app. If you are new to the Portals or just want to quickly update certain content, I completely agree that the Portals Studio interface is much easier and intuitive to make simple changes.

One important (and hidden) feature of the Portals Studio app, is that it automatically refreshes the Default Web Link Set with any custom Web Page you may have created. It doesn’t matter if you’ve created the Web Page via Portal Studio or Portal Management, this seems to happen on the onload event of the Portals Studio, but at the same time it doesn’t show you straight away, only after refreshing the Portals Studio page.

A bit confusing? Let’s try to replicate the issue step-by-step:

  • Open two tabs in your browser, one with your Portals website and the other the Portal Studio App, at this moment the navigation menu should be identical in both tabs
  • Create a new Web Page (can be a blank page), sync and refresh first just the Portals website
  • Now your new Web Page is present in the menu

Now let’s go to the Portal Management App, navigate to the Web Link Set and open the Default Web Link Set. In the Web Links tab, you will see the recently created Web Page there as a new Web Link, even though you didn’t want it to be shown there.

Got it, now what’s the solution?

I know the above text was a bit long, but I think it is important to understand what’s happening in the background. There are a few ways to fix this.

Within the Portals Studio, you can hide the page from showing in the menu, what this will do is deactivate the Web Link record in the CDS, so it won’t show in the menu anymore. Just go to Pages, select the ellipses (…) on your page and click Hide in default menu:

But the problem is still there, if you create new pages it will keep adding to the menu. To get rid of this behavior, we need to change the reference to the Web Link Set. Let’s just forget about the Default Web Link Set and leave the Portals manage it the way it wants, we will be using the Primary Navigation Web Link Set for our menu. In the Portal Management App add/remove any links you want in your menu.

Once the menu has been defined in the Portal Management App, we need to set the Portals to use that Web Link Set, there are two ways of doing this. Please read the entire post before actually making any change in your environment:

Set Navigation Menu via Portals Studio

Open the Portals Studio and click on the main menu, and on the right-hand pane, change the navigation menu dropdown:

Click sync configuration and you’re done!

Set Navigation Menu via Portal Management App / Header Web Template

Go to the Web Templates, open the Header record. Simply change the reference to the Web Link Set, locate the line below, and replace Default for Primary Navigation:

Now clear the cache and don’t worry about this issue again.

Which method should I use?

One thing I noticed is that when changing the navigation menu via Portals Studio, the Portals automatically resets the Header Web Template with the OOB code, changing only the line mentioned above. If you haven’t made any customization in your Web Template, this won’t be an issue, and it is probably easier to change, but if you have made any changes in the Liquid code, you definitely don’t want to lose them, so you’re better off making the change manually in the Web Template.

Apparently this was a bug and it is now fixed in the version 9.2.5.x, although I currently find anywhere in the release notes, when testing this was now updating only the weblinkset assignment, instead of the entire Web Template

Update on 20th July 2020

I see a lot of people having issues with the menu navigation where the pages keep being added, I hope this post clarifies why this is happening and how to solve it.

Posted in Power Apps Portals

Power Apps Portals – Adding Head Meta Tag

Hi, in this post I will talk a bit about HTML Meta Tag and how we can setup custom tags in Power Apps Portals <head> element.

For the purpose of this post, I will create a custom Open Graph Meta Tag to be used in Facebook/Twitter.

What are Meta Tags?

The <meta> tag is used to define metadata about the HTML document. This is commonly used by search engines, browser and other web services.

This tag is never displayed on the page and is an empty element, so there is never a closing tag like </meta>.

Open Graph protocol

Open Graph protocol was introduced by Facebook to enable any page becoming a rich object in a social graph – in simpler words, to display your website in a prettier way when sharing via social media. Today several other social medias and web services use this protocol, such as Twitter/Google+ etc.

By opening Facebook and add the Bing URL, this is the structure we can see on the post:

If we open and inspect the page, we can actually see the og meta tags defined on the page:

If we simply try to share an OOB Power Apps Portals via Facebook, this is how it would be presented:

Adding Meta Tag to Power Apps Portals

At first it might look tricky to make this change in Power Apps Portals, but it is actually easier than it looks. Power Apps Portals are full of hidden content snippets, not all are documented. One of them is called Head/Bottom and we can use it exactly to perform changes in the <head> element of the Portals website.

If you can’t find this content snippet in your CDS environment, all you have to do is create the record, set it to HTML type and define the tags in the HTML tab of your snippet.

In my example I am adding an image (created via Web File), description and title:

For my image, I tried initially leaving only the relative path (/og-image.png), but it didn’t work, so I had to change to the full image path (https://<portalurl>/og-image.png).

If we now try to share on Facebook, for example, this is how it looks:

By inspecting the Portals website, we can see the tags at the end of the <head> element:

Caching issues

While testing this, one thing I noticed is that Facebook might cache some data on their side, so you are changing the tags on the Portals, just note that it might take a while to replicate on Facebook.


Meta tags are a simple but effective way to give an insight into what your website is about. Give it a try and see what you think!

Posted in Menu / Navigation, Power Apps Portals

Power Apps Portals – Navigation Menu: Setting up a tree structure menu


In Power Apps Portals, the main navigation menu is represented by the Web Link Set and Web Link objects (entities). A Web Link contains a reference to a Web Page from the Portal or an external URL. The Web Link Set contains a group of Web Links, and can be placed via Liquid template in the Portal.

When setting up Power Apps Portals, by default, it comes with with a few Web Link Sets pre-defined. The Default Web Link Set is used as the primary menu in your Portal. For a better understanding of all the properties of Web Links and Web Link Sets, please refer to the following documentation:

The way the menu is rendered by default, we cannot have sub-menus or a title to split Web Links. In this post, I will show you a quick tip on how to setup a tree structure for your Portal menu/primary navigation, something like this:

– – – – – – – – – – – –


To achieve this, I am going to make customizations in the Web Link entity. There is no problem modifying the OOB Portal entities, just make sure you add any changed objects to an unmanaged solution when moving to other environments, you can’t export the Portals solution as it is a managed solution.

The code that renders the menu is in Liquid Template, and it’s placed in the Header Web Template, we will also make a few changes there.

By default, if you add a custom field to your Portal entities, it will be reflected in the Liquid objects, so you can easily access the value without writing additional code.

If for some reason you prefer not to change the entity, that's fine, another approach would be when creating your Web Link record, add some tag in the name (for example *menu-title*)

Now let’s jump into the customization:

  • Create a new field in the Web Link entity (I am calling “Display as Title”)
  • Add the new field to the Web Link form
  • I am leaving Page / URL blank, additionally if you want you could add a business rule to hide/show those fields according to the Display as Title value
  • Now open your “Header” Web Template, I am changing the code with the following logic:
    • If my custom field “ollie_displayastitle” is true, display the link as a title instead of an <a> element
    • In my example, I am using a <strong> element, but you could use anything here, preferably you should also add a class from your CSS to get a better look & feel
    • If you didn’t create the custom field and are using the tag like I mentioned *menu-title*, your if condition will be {% if contains “*menu-title*” %} and then you also need to remove that using liquid filter {{ | remove: “*menu-title* “}}
  • This snippet of code can be found on the line 62 for the Header Web Template (OOB Portals):
 {% for sublink in sublinks %}
  <li role="none">
    {% if sublink.ollie_displayastitle %}
      <strong>{{ | default:sublink.title | escape }}</strong> 
      <!-- this can be any element type -->
    {% else %}
        aria-label="{{ | default:sublink.title | escape }}" 
        href="{{ sublink.url }}" 
        {% if sublink.Open_In_New_Window %} 
        {% endif %} 
        {% if sublink.nofollow %}
        {% endif %} 
        {% if sublink.tooltip %}
          title="{{ sublink.tooltip | escape }}"
        {% endif %}>
        {{ | default:sublink.title | escape }}
    {% endif %}
{% endfor %}
  • This is the final result:


By customizing Portal entities and existing Web Templates, we are not only making customization to the Portals but also extending its original functionality.

This post idea came after seeing a few questions on the communities about changing the way the menu is rendered. I hope this post encourages you to make changes to the way the menu is rendered OOB.

Posted in Entity List, Export Content, Power Apps Portals

Power Apps Portals – Generate and Download Word Document from an Entity List


I recently came across an interesting requirement that I thought would be worth sharing here. Yet again I will be working with Entity Lists, and some implementations will be used from previous posts.

Business Requirement:

  • Display list of records in the Portal
  • Allow users to download a document with record details (including child entities)
  • Document should be (preferably) Word format
  • The document should also be available in D365

Before we dive into the details, here is a sneak peek of what will be achieved by the end of this post:

To achieve this, I will use the following components:

  • Web File with the Word icon
  • Web Page and Entity List for the Contact entity
  • Entity List actions
    • View record details
    • Run Workflow (to generate the Word Document)
  • Entity Permissions
  • Custom entity (Application) with the following relationship:
    • Contact 1:N Application
  • Word Template against the Contact record, displaying contact details and a list of Applications
  • Workflow to set generate Word Template against the Contact record
  • CSS customizations to display my workflow actions as icons
  • JavaScript code to dynamically create the download button


My overall approach for this will be using as much as possible existing D365 features, I won’t write any custom code in D365, only client-side code in the Portals will be necessary.

  • Web File:

As I want my Entity List to display a Word Icon, I am creating a Web File and uploading the icon from

  • Web Page/CSS:

The only customization I am doing around my Web Page is the CSS to display the entity list actions as icons, you can view more details on how to achieve this in the following post:

I want to use a Word icon for my “Generate Document” workflow action in my entity list, so I am adding one more class to my CSS, this is to set the height and position of my image (you wouldn’t need this if you were using icons within the bootstrap/glyphicon):

.view-grid .dropdown.action .dropdown-menu .workflow-link .entitylist-icon>img {
    max-height: 18px;
    margin-top: -9px;
  • Entity List:

My Entity List is simply pointing to the Active Contacts view, and I am assigning the following Actions against it:

  • Details action redirecting to a new Web Page to display record details
  • Workflow action triggering my custom workflow to generate the document, on the Button Label I am adding my custom CSS class and image:
<span class="fa fa-fw entitylist-icon" aria-hidden="true">
    <img src="icon-word.png"/>
  • Entity Permissions:

The Word document will be generated as a Note attached to my Contact record in D365, for this reason we need to have an entity permission for the Note entity, this is a child entity permission against my Contact entity permission, for more details on parent/child entity permissions please refer to the following documentation:

  • D365 Application Entity / Contact Entity

I have a custom entity called Application, with some very simple fields for this demo such as ID, Status, Type and Created On.

Another customization I am making is adding a custom field (Text/URL) in my OOB Contact entity to store the URL of my document, I am calling this “Generated Document URL”.

Finally make sure this URL field is available in your view being displayed on the Portal, in my case the Active Contacts view. Don’t worry, we will hide the column via JavaScript, but this will be important on a later stage.

  • Word Template

I am using the OOB Word Template feature to generate my document. What I like about this is that we can generate the document manually via D365 or through a workflow, which is perfect for my scenario. For more details on how to create the Word Template please refer to the following:

My template will display a logo image, the Contact name and e-mail and a list of the existing Applications.

  • Workflows

We need two sync workflows to achieve our need. Here I will describe each of the workflow steps:

Generate Word Document
Sync Workflow
Trigger: On-Demand
Entity: Contact
Scope: Organization
 - Perform Action: SetWordTemplate (pass the contact record and set the Word Template created as actions parameters)

The SetWordTemplate is an OOB action that creates a note against the record with the generated Word Document.

A note record in your Portal can be accessed via the following URL pattern: <portalurl>/_entity/annotation/<note guid>, so now we need to generate the URL against the Contact record. For this I am creating the below workflow:

Set Contact Generated Document URL
Sync Workflow
Trigger: Record is created
Entity: Note
Scope: Organization
 - Validate if the Regarding field of the note is a Contact
 - Validate if the File Name is <your word template name> (you can make better validations, I am going for simple ones for this demo)
 - Now we need the note GUID, to avoid code I am using the D365 Workflow Tools solution: but you could also write your own custom code to retrieve the record GUID
 - The next step is to update the related Contact record with the URL pattern + Note GUID. All we need here is the relative path, no need for the Portal root URL (as this might change between environments or other reasons)
  • Entity List JavaScript:

At this point we have the core of our development done. If you navigate to your Web Page you should have the Word icon to generate your document, and once triggered, the URL column from your view, once empty, should get populated with the document URL, if you click that URL you should be able to download your document.

Now we need to add a JavaScript logic, attached to the Entity List Load event, that will perform the following actions:

  • Hide URL column
  • For each row:
    • Get the URL from the “Generated Document URL” attribute
    • If this contains data, create dynamically an element in the same structure as the other elements
    • Append new element to the workflow links so it will be the last action

The following JavaScript code can be placed in the Entity List custom JavaScript section:

$(document).ready(function() {

SetDownloadButton = function() {

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

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

        // hide url column 
        entityList.find("table thead th").eq(4).hide();
        entityList.find("table tbody tr").each(function() { $(this).find("td").eq(4).hide(); });

        entityList.find("table tbody > tr").each(function(index, value) {
            var tr = $(this);

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

            if (documentUrlAttribute.length > 0) {
                var documentUrl = $(documentUrlAttribute).attr("data-value");

                var downloadElement = "";
                downloadElement += "<li>";
                downloadElement += "    <a href='" + documentUrl + "' target='_blank'>"
                downloadElement += "        <span class='fa fa-download fa-fw' aria-hidden='true'/>";
                downloadElement += "    </a>";
                downloadElement += "</li>";

                var generateWord = tr.find(".dropdown-menu");

Now after refreshing the cache and your Web Page you should see the below behavior:

  • Caching Issues?

We all know the Portals have some caching issues, but this shouldn’t be an issue with the above implementation. For any actions triggered by the Portals, the cache is automatically refreshed for that record, as in our scenario we are using sync workflows, the cache gets refreshed within the same transaction.


My example was specific to generate a Word document using a Word Template in D365, but this approach could be used for several other requirements where you have a workflow updating the main record in real-time, and appending a dynamic link to anything on your entity list.

Have you ever had a similar requirement? Please comment below with how you implemented it.

If you find this post useful feel free to like and share it.

Posted in Entity List, Power Apps Portals

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


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 = 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).css(“font-size”, “18px”);
                    $(action).css(“text-decoration”, “none”);
                    $(action).css(“padding-right”, “4px”);
                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”);
                    // move dropdown to the far right

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.

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.