Power Apps Portal #15- DataTable Plugin to Custom Entity List [Part 1]

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:

  1. Go to https://datatables.net/
  2. 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">
<script type="text/javascript" src="//cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.