In this blog post, I will show you how to display an image from Microsoft Dataverse in the Portal web pages using Fetchxml. This post will enable Power Platform Developers to enhance the user experience of the Portal pages by including various images that are included in Dataverse.
There are many day to day scenarios where Power Apps Portals can help us empower our Business Applications. Usually we work with Fetchxml to extract data from a Dataverse table to display information on the portal web page. You can use Advanced Find or Fetchxml Builder in XRMToolBox to get an Fetchxml code. One of the major issues faced while working with these tools is how to extract image type columns from Dataverse tables.
Problem Statement
How to display image column from Microsoft Dataverse? How to render image from Microsoft Dataverse on a Portal Page? How to get image type column in Fetchxml? How to automate/ control what images display as part of the Portal Web Page?
Solution
To solve this problem, you can include the image column attribute in the fetchxml code as below snippet:
<attribute name="publisher_tablename_url"></attribute>Explanation: The attribute tag is used in FetchXML to get the value from a column. The part highlighted in green should be replaced with the logical name of your image type column. The second part is same for all the columns.
Example: If you image column is defined in Dataverse as:
Display Name: Icon
LogicalName: btd_icon
In this case, the column can be retrieved using below expression:
<attribute name="btd_icon_url"></attribute>Now how to use this code to show the image column.
{% for result in FetchXMLOutput.results.entities %}
<img src="{{environmentURL}}{{result.btd_icon_url}}">
{% endfor %}
To extract the image, the environment URL needs to be passed. You can reference in a variable or as a content snippet.
Note: Environment URL can be extracted from Developer Resources or from the Power Platform Admin Center.
In this post we saw how to extract the image type columns from Microsoft Dataverse and use it in HTML code. This will help you if you are creating custom design web pages on a Power Apps Portal Application. I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.