Introductions
In this blog will see how to add DataTable Plugin to the Custom Entity List in the Power Apps Portals. DataTable Plugin will provide the CSS styling and pagination to the custom Entity List and the relevant search will be enabled to the table.
In my previous blog explained about adding a Custom Entity List to the Web Page using the FetchXML and Liquid code. Power Apps Portal #14- Display Entity List using FetchXML and Liquid Code
Adding DataTable Plugin:
- Go to https://datatables.net/
- We have to add the CSS and JS references to the Web Page.
3. Copy the CSS and JS references.
4. Go to the Web Page where you added the Custom Entity List.
5. Add the References to the Web Page in Code Editor.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css">
//cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js
6. Add the Javascript to Web Page from DataTable Plugin.
7. We need to pass Table ID where we add the Table ID in the Custom Entity List on the Web Page. to the Javascript.
{% fetchxml CarManufacturers %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
<entity name="spega_carcompany">
<attribute name="spega_carcompanyid" />
<attribute name="spega_companyname" />
<attribute name="spega_website" />
<attribute name="spega_founded" />
<order attribute="spega_companyname" descending="false" />
<filter type="and">
<condition attribute="statecode" operator="eq" value="0" />
</filter>
</entity>
</fetch>
{% endfetchxml %}
<table id="CarCompanies">
<thead>
<tr>
<th>Company Name</th>
<th>Website</th>
<th>Founded</th>
</tr>
</thead>
<tbody>
{% for result in CarManufacturers.results.entities %}
<tr>
<td>{{ result.spega_companyname }} </td>
<td>{{ result.spega_website }} </td>
<td>{{ result.spega_founded }}</td>
</tr>
{% endfor %}
</tbody>
</table>8. Add JavaScript to the Web Page.
$(document).ready( function () {
$('#CarCompanies').DataTable();
} );
9. Click on save the code to the Web Page, and browse the Power Apps Portal.
Hope you learn something, Thanks for Reading 📖!
Happy Power365ing!
Srinath Pega 