Dynamics Portals – Customize OOB ‘Entity List’ grid
I was working on a Portal requirement where I had to customize the ‘Entity List’ grid by adding ‘Check Box’ control in the first column and a ‘Submit’ button, which has the custom logic.
Below is how the OOB ‘Entity List’ grid looks like
OOB ‘Entity List’ grid
Now, lets see how to customize the OOB ‘Entity List’ grid by adding additional controls (i.e., Check box and Button).
Below are the list of portal components in the order, to achieve this requirement.
- Create a new ‘Entity List’
- Create a new ‘Web Template’
- In the ‘Source’, we will have logic to loop through the ‘Entity List’ records (i.e.,Rows) and add ‘Check Box’ control in the 1st column.
- In the below image, {% entitylist id:page.adx_entitylist.id %} refers the ‘Entity List’ loaded on the current page.
- Create a new ‘Page Template’ and map the newly created ‘Web Template’
- Create a “Web Page’ and map the ‘Entity List’ and ‘Page Template’
- That’s it. Go to Portal, clear cache and hit the ‘Web Page’ URL. You should see grid with ‘Check Box’ as first column.
Customized Grid
Web Template’s ‘Source’ :
<body>
{% entitylist id:page.adx_entitylist.id %}
{% entityview id:params.view, search:params.search, order:params.order, page:params.page, pagesize:params.pagesize, metafilter:params.mf %}
<table id=”tblContacts” class=”table table-striped”>
<thead>
<tr class=”row”>
<th class=”col-sm-1″>
</th>
{% for c in entityview.columns -%}
<th width=”{{ c.width }}” data-logicalname=”{{ c.logical_name }}”>
{{ c.name }}
</th>
{% endfor -%}
<th width=”1″></th>
</tr>
</thead>
<tbody>
{% assign i = 0 %}
{% for e in entityview.records %}
<tr class=”row”>
<td class=”col-sm-1″>
<input type=”checkbox” id=”chk{{i}}” onclick=”” />
</td>
{% for c in entityview.columns %}
{% assign attr = e[c.logical_name] %}
{% assign attr_type = c.attribute_type | downcase %}
<td data-logicalname=”{{ c.logical_name }}”>
{% if attr.is_entity_reference %}
{{ attr.name }}
{% elsif attr_type == ‘datetime’ %}
{% if attr %}
<time datetime=”{{ attr | date_to_iso8601 }}”>
{{ attr }}
</time>
{% endif %}
{% elsif attr_type == ‘picklist’ %}
{{ attr.label }}
{% else %}
{{ attr }}
{% endif %}
</td>
{% endfor %}
<tr>
{% assign i = i | plus:1 %}
{% endfor %}
</tbody>
</table>
{% endentityview %}
{% endentitylist %}
</div>
</div></div>
</body>
🙂
Rajeev Pentyala - Microsoft Power Platform 