Power Apps Portal #14- Display Entity List using FetchXML and Liquid Code

Introduction

Display the Dataverse table records in custom own Entity List using the FetchXML and Liquid code.

Power Apps portal to display the records with Entity List can’t be done, Using FetchXML and Liquid code we display the records with required filters.

Implementation

Go to Power Apps Maker Portal and get the FetchXML with the required filters.

Syntax for FetchXML in Liquid Code:

{% fetchxml giveQueryName %}

<!— Paste your Fetchxml query –>

…

{% endfetchxml %}

The “giveQueryName.results.entities” contains the result of FetchXML query. You can iterate through the results and get the field values.

Code:

{% 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" />

      <condition attribute="spega_website" operator="not-null" />
    </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>

2. Go to the web page in Power Apps Portal Studio and Click on the code editor.

3. Add the code to the web page in the code editor.

4. New add some CSS to the Table.

Code:

<style>
#CarManufacturers{
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  #authorTable td,
  #authorTable th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  #authorTable tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  #authorTable tr:hover {
    background-color: #ddd;
  }
  #authorTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #8764b8;
    color: white;
  }
</style>