Create a HTML table dynamically from Entity List in Dynamics 365 portals/ powerapps portals using liquid

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com
After my recent posts on Dynamics 365 portal, I came across a question on how to dynamically load an entity list in a web-page. For people knowing on how to use Liquid, basically the user was trying to render an entity list using the below syntax.
{% entitylist name:”Account List” }%
{% endentitylist %}
Unfortunately the entire entity list will not render like this. Rather if the entitylist loads successfully, it would execute anything within the entity list block.

So if I write something like below.
{% entitylist name:”Account List” %}
Entity list Loaded successfully
{% endentitylist %}
It would render “Entity List Loaded Successfully”
So is there no way. Off-course, where there is will, there is a way.
So I decided to try the below approach. Please note that code does not give the entire solution as you would need lot of styling to achieve the final goal but this can definitely get you started.
Step 1: Create a web-template
The first step is to create a web-template. Since I would creating the HTML table dynamically, I require a web-template.
Go to CRM –> Portals –> Web templates
Select New and then the new template screen would be presented. Below is the screenshot of my template.

I have named id “Custom Grid Template”. Don’t worry about the source. Here it is below for full reference.
{% entitylist name:"Account List" %}
 {% entityview %}
{% for col in entityview.columns %}
 {{col.name}}
{% endfor %}
{% for e in entityview.records %}
{% for c in entityview.columns %}
{% assign attr = e[c.logical_name] %}
{% assign attr_type = attr.attribute_type|downcase %}
{% if attr.is_entity_reference %}
{{attr.name}}
{% elseif attr_type == 'picklist' %}
{{ attr.label }}
{% else %}
{{ attr }}
{% endif %}
{% endfor %}
{% endfor %}
{% endentityview %}
{% endentitylist %}
The code covers most of the scenarios that you are going to need to render a HTML table from EntityView or EntityList. Let’s run through all the highlighted parts.

First an entitylist is loaded with the statement : {% entitylist name:”Account List” %}
Second I take the default entityview of the entitylist. You can load the view with a specific name as well. {% entityview %}
In third highlighted section, I write code to create the header.

{% for col in entityview.columns %}
{{col.name}}

{% endfor %}

Pretty simple isn’t it. In the next highlighted rows, I first traverse through the existing rows of the view and find the attribute for each column using

{% assign attr = e[c.logical_name] %}

The interesting part is checking for the attribute type

{% if attr.is_entity_reference %}
{{attr.name}}
{% elseif attr_type == ‘picklist’ %}

Till this point, I was OK. However to be honest, I was completely stuck on how to identify EntityReference and picklist.
And finally this came my to rescue. https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/render-entity-list-current-page
A bit nerdy but awesome it is.
Step 2: Load the web template dynamically in the webpage
Below is the code for the same.
{% include ‘Custom Grid Template’ %}
And once you are done, below is the HTML table rendered dynamically. Off-course it is raw, but with a bit of styling it can look great.

Hope this helps!
Debajit Dutta
(Dynamics MVP)
For training/ consulting please email at info@xrmforyou.com
Visit our products page – http://www.xrmforyou.com/products.html

Related