Display records using FetchXML and liquid code in the PowerApps portal

Introduction: This blog explains how to create your own custom entity list using FetchXML and liquid code in PowerApps Portal.

Many times we have a requirement to display the records on the portal and that cannot be fulfilled by using Entity List to overcome this problem we can use FetchXML and liquid code.

Use Case:

We have a webpage on which we display all the authors and when the user selects the author it will redirect to another page that will have all the webinar topics covered by that particular author.

Implementation:

  1. Create your FetchXML query and download it.

Syntax for FetchXML in liquid code is as follows:

{% 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:

{% assign authorID = request.params['id'] %}
{% fetchxml authorTopics %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
  <entity name="cr3a5_webinar">
    <attribute name="cr3a5_webinarid" />
    <attribute name="cr3a5_topic" />
    <attribute name="createdon" />
    <attribute name="cr3a5_title" />
    <attribute name="cr3a5_description" />
    <attribute name="cr3a5_date" />
    <attribute name="cr3a5_author" />
    <order attribute="cr3a5_topic" descending="false" />
    <filter type="and">
      <condition attribute="cr3a5_author" operator="eq" value="{{authorID}}" />
    </filter>
  </entity>
</fetch>
{% endfetchxml %}
<table id="authorTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>Topic</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    {% for result in authorTopics.results.entities %}
    <tr>
      <td>{{ result.cr3a5_topic }} </td>
      <td>{{ result.cr3a5_description }} </td>
      <td>{{ result.cr3a5_title.label }}</td>
      <td>{{ result.cr3a5_date }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<style>
  #authorTable {
    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>

Explanation:

  • When the user selects the author I pass the guid of that author record in the URL parameter of the “Author Topic” page.
  • We can retrieve URL Parameter using liquid code as below:
{% assign authorID = request.params['id'] %}
  • Use FetchXML to retrieve Webinar topics related to that author.
  • Display the result of FetchXML using for loop.
  1. Add code on the Webpage.
  1. Click on browse website to see the result.

Testing:

Leave a Reply

Your email address will not be published. Required fields are marked *