Displaying EntityImage field on PowerApps Portal

Currently there are no OOTB ways to render the EntityImage field of an entity on PowerApps Portal as an image. It is however possible using Liquid and JavaScript as described in this post: https://debajmecrm.com/query-and-display-entity-image-in-your-entity-list-or-entity-form-in-powerapps-dynamics-365-portals-part-1/.

Essentially the approach here is to use Liquid to output the content of the EntityImage field to a JavaScript variable, and then use JavaScript to convert that to base64-encoded image data and dynamically create an <img> tag on the page.

For some unknown peculiar reason however, Liquid will throw an error

Liquid error: Exception has been thrown by the target of an invocation.

when you try to retrieve the EntityImage field of an entity, unless you give Global Read permission to that entity using entity permission. This is reported in this post: https://powerusers.microsoft.com/t5/Power-Apps-Portals/Liquid-error-Show-Account-contact-Entity-Image-on-portals-not/td-p/412287 (check the last comment in that post). Note that the permission has to be granted as Global. Other scopes will not work.

While the above fix will technically work, it may not be acceptable from a security perspective (depending on your scenario/requirements). For example, you probably don’t want to grant Global Read to the Account entity.

I have found that you can get this to work by granting Global Read permission to the Image Descriptor entity instead, and not the parent entity of the EntityImage field. Image Descriptor is the entity that CRM uses to store image data behind the scene.

In Liquid, you would then query the Image Descriptor entity and retrieve the EntityImage data like so:

{%- assign accountId = request.params["id"] -%}

{%- fetchxml imageQuery -%}
   <fetch top="1" >
      <entity name="imagedescriptor" >
         <attribute name="imagedata" />
         <link-entity name="account" from="entityimageid" to="imagedescriptorid" >
            <filter>
               <condition attribute="accountid" operator="eq" value="{{accountId}}" />
            </filter>
         </link-entity>
      </entity>
   </fetch>
{%- endfetchxml -%}

{%- if imageQuery.results.entities.size > 0 -%}
   var logoBytesAsString = "{{imageQuery.results.entities[0].imagedata | join: ','}}";
{%- endif -%}

The above code outputs the image data for an Account record that is specified via the id query string parameter.

Note that the entity permission for Image Descriptor still needs to be at Global scope. This entity however is less likely to be exposed directly to Portal users (e.g. via a web page or entity list), and therefore this approach may be more acceptable than granting Global Read on Account (for example).

It is interesting to note however that Microsoft documentation states that:

Image attributes, file attributes and table images aren’t supported in basic forms, advanced forms or when using liquid template tags, such as fetchxl.

https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/entity-forms#add-a-form-to-your-portal

Hopefully this will be addressed by Microsoft in the future and a workaround such as this would no longer be required.

About Bernado

Based in Australia, I am a freelance SharePoint and Dynamics CRM developer. I love developing innovative solutions that address business and everyday problems. Feel free to contact me if you think I can help you with your SharePoint or CRM implementation.
This entry was posted in CRM, CRM Portal, PowerApps Portal. Bookmark the permalink.

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 )

Google photo

You are commenting using your Google 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