Query and display entity image in your entity list or entity form in PowerApps/ Dynamics 365 Portals–Part 2

For training, consulting and our products, write to us at info@xrmforyou.com

This is the part 2 of this blog series. You can check out the part 1 of this blog series here.

So here I am going to show you the other way of displaying entity image on Dynamics 365 Portals entity list/ entity form. This time unlike first method, we are not going to do anything in CRM. Rather we shall be doing it completely in portals.

We modify the web template code to below. Observe the join filter with entity image.

Create PCF Control step by step

And finally in the content webpage advanced section, I write the below script.

$(window).on(“load”, function(){

$(“img[data-content]”).each(function(){

var content = $(this).data(“content”);

var base64Content = binaryToBase64(content);

$(this).attr(“src”, “data:image/png;base64, ” + base64Content);

});

});

function binaryToBase64(content) {

if (!content) return null;

var uarr = new Uint8Array(content.split(‘,’).map(function (x) { return parseInt(x); }));

return btoa(String.fromCharCode.apply(null, uarr));

}

And you will see the entity image displayed on the portal.

One point to be noted here. In this method the HTML page may become really heavy depending on image size and sometime goes unresponsive. Why is that?

If we check the source of the page, below is a sample of the same.

image

You can see for a single image, first the data-content is storing the entire byte stuff and then the src value storing the base64 content of the same. It’s best once you are done processing, you can delete the data-content attribute here for performance.

You will also like the below posts

Hope this helps!

Debajit Dutta

(Business Solutions MVP)

For training and consulting, write to us at info@xrmforyou.com


Discover more from Debajit's Power Apps & Dynamics 365 Blog

Subscribe to get the latest posts sent to your email.

Discover more from Debajit's Power Apps & Dynamics 365 Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading