How to: D365 Image to Power Apps

Finding ways to boost efficiency and productivity is vital for success. That’s where D365 Power Apps come into play – these innovative tools have the ability to revolutionize how businesses operate. With their user-friendly interface and seamless integration with other Microsoft applications, D365 Power Apps provide a robust platform for creating custom business solutions. From streamlining workflow processes to automating repetitive tasks, these apps empower organizations to work smarter, not harder.

While developing a Power Apps application for a customer, the need arose to display D365 product images alongside the product information on the screen. While D365 already stores (encoded Base64) and relates images to a specific product out-of-the-box, images can change (users can upload new images to D365 at any time) and we wanted to show the most recent image every time the product screen loads.

We first had to retrieve the product image from D365. The information needed to successfully get the images was:

• EcoResProductDocumentAttachmentEntity (Name in D365)
• • ‘Product document attachments (mserp)’ (Name in Dataverse)
  • Fields Needed
    • Bitmap
    • Product number
    • Default image
      • ‘Default image’ is a Choice of type NoYes (mserp)
      • • No = 200000000
        • Yes = 200000001
      • There can be more than one image uploaded, so we look for the Default.

The next step in this process would be to identify the Data URLs that are needed to display the images. According to Mozilla Developer Data URLs can be defined as:

“Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as “data URIs” until that name was retired by the WHATWG.”

The Data URL prefix does not change, therefore it can be hard-coded or parameterized. Here is a breakdown of the Data URL:

• “data:image/bmp;base64,”
  • “scheme:content/type;extension,”
  • “data:…” is the URI scheme
  • “…:image/bmp;…” is equal to “…:content/type;…”
    • Content = Image
    • Type = .bmp
  • “…;base64,” indicates that the data content of the URI is binary data, encoded in ASCII format using the Base64 scheme for binary-to-text encoding.

Giving the Canvas App Image Control (With this control users can take photos or upload image files from their device and update the data source with this content.) this prefix lets the app know that the string value is a URL and it then decodes this string to display the image.

• Image.Image
  • Prefix + BitMap
    • “data:image/bmp;base64,” & CurrentRecord.Bitmap

Checking to make sure the Bitmap data is populated first allows you to integrate a default image option for when a product is missing an image.

In the examples below ‘No Image Available’ is the name of a user created generic placeholder image asset and anything with the mserp (Microsoft Enterprise Resource Planning) nomenclature means that it is a virtual entity.

This example is for displaying D365 product images because they are already stored in Base64. Encoding data in Base64 is approximately 33% larger than the original.

You could forgo setting varImageBase64 and put the LookUp() right on the Image.Image in place of the variable, but that will leave you vulnerable to errors in the event the LookUp() comes back empty. Setting whatever variables you can when the screen becomes visible improves performance and allows for reuse.

Screen.OnVisible

Set(
varImageBase64,
LookUp(
‘Product document attachments (mserp)’,
‘Product number’ = CurrentRecord.ItemID && ‘Default image’ = 200000001
).Bitmap
);

Image.Image

If(
!IsBlank(varImageBase64),
“data:image/bmp; base64,” & varImageBase64,
‘No Image Available’
)

Visual with a product image

Visual without a product image

Behind the scenes