Microsoft Power Apps Portal Pages How To – Display an Entity List using FetchXML and Liquid Code for a more custom Portal Page

Rachel Mantei here with part 1 of 4 of my Microsoft Power Apps Portal Pages How To Series. Part 1 of this series looks at how to display an Entity List using FetchXML and Liquid Code for a more custom Portal Page.

Sometimes, the out of the box way for styling entity lists is not the prettiest. The following steps show you how to style your data from CRM to build out a more custom portal with HTML and CSS.

Building your FetchXml query within CRM

1. First, you will want to create your Fetchxml query.

NOTE: You can use the Fetchxml builder through XRM Toolbox, or through the advanced find in D365 CRM

• You can find the advanced find by clicking the gear icon in the top right navigation of your CRM environment. Select Advanced Settings.

Photo 1

• In the new window, navigate again to the top right of your navigation and select the funnel icon

Photo 2

• Once selected, a new window will appear.
• From there, you will select the table and add the attribute columns you want displayed on the portal. You can choose the attribute columns by selecting, “Edit columns”.

Photo 3

• Within the next window, select the columns you want to bring in the portal by selecting, “Add Columns”.

Photo 4

• After you select all your columns, select “OK”.
• Next, navigate to the top bar of the advanced find window. Select, “Download Fetch XML”.

Photo 5

• After a few seconds, the file will show up at the bottom of the advanced find screen. Open the file.

Photo 6

Building the layout from the data returned by the FetchXml query

2. In your preferred code editor, add the fetchxml.

• Surround the fetchxml by placing the following liquid tags in your editor:
• {% fetchxml enterANameHere %} – before the fetchxml
• {% endfetchxml %} – after the fetchxml
• You will be able to pull all the records that meet your fetchxml criteria.

NOTE: Filtering example can be found in Photo 8

See below for iterating through the records with simple html below. You will need to keep the defining ‘result’ from the Example.results.entities fetchxml and ensure the ‘result.’ is before the schema names within the div tags.

Photo 7

From here, you will be able to view the results on your portal page.

If you have a link entity, you will need to bring in the linked entity fetchxml within the fetch. Based off the alias name, you will need to bring the result in by coding:

{{result[‘alias name’.schema name’]}}

See example below:

Photo 8

With this information, you will be able to design bootstrap cards, grid tables or any other custom HTML you will want to bring into your portal.

Let us know what scenarios this feature would help you with; we are always excited to hear from our clients and their success stories using Microsoft products.

Note: This blog was written before Power Apps Portal Pages was renamed to Power Pages.