Canvas Apps

New Image field in CDS

The difference in resolution for images stored in CDS
High vs Low resolution images in CDS

Background

Image fields in CDS entities have been traditionally used for thumbnails, e.g. to display a contact's image in a gallery. There were a couple of problems with this image field:

  1. You could only have one such field per entity, and
  2. It didn't store the full size image

That might be good enough for most cases but not every time. For example, if you want to have a gallery of cars in my app, you could use the thumbnail image. However, if you want users to be able to click on a record in the gallery to view details of the car including an enlarged image, the results are bad (as shown in the left half of the image above).

New Image field

Not so long ago, the Power Apps introduced a new Image field. It is the basically the same old field but enhanced with new features. These new edits to the image field help overcome both the challenges listed above. You can add as many image fields to an entity as you want. And you can also control if they should allow storage of full resolution images. Here is what the image field configuration looks like.

Image field configuration
Image field configuration

To get the highest possible resolution, follow these steps:

  1. Specify a maximum image size, up to 30MB.
  2. Check the "Can store full images" (this is selected by default)

Thumbnail vs Full Image

To access a thumbnail image in a gallery (for a field named Image), simply access it using the dot operator e.g. ThisItem.Image. In fact, if you add a template gallery to your app for an entity that has an image field e.g. Contacts, the image control in the gallery defaults to ThisItem.Image.

If you have enabled the above settings for high resolution images and you access those images using ThisItem.Image, the images will appear fine in the thumbnail format but will get really distorted when enlarged. Here is an example:

Low resolution images using the old CDS image field
Low resolution images in CDS using ThisItem.Image

To access the full resolution images, use ThisItem.Image.Full. When you type in ThisItem.Image. you see two options - Value and Full. The Value property will show the thumbnail image whereas the Full property will show the full resolution image.

High resolution images using CDS image field
High resolution images in CDS using ThisItem.Image.Full

Please note that any previously stored images will not get enlarged even if they are accessed using ThisItem.Image.Full. In fact, it will return a blank value. Here is a link to the original release documentation.

Summary

  1. To store full resolution images in CDS, ensure the "Can store full images" checkbox is checked when creating that field.
  2. When enabled, both types of image sizes are stored - full resolution and thumbnail.
  3. This new field data type allows you to have multiple image fields in an entity.
  4. To access thumbnail images within your apps, use ThisItem.Image or ThisItem.Image.Value
  5. To access full resolution images use ThisItem.Image.Full

Related Articles

  1. Resetting a gallery in Power Apps
  2. Flexible Height Galleries – A quick intro
  3. Upgrading to the new CDS connector

Leave a Reply