Question on how to work with multiple Images in PowerApps, CDS & Ms Flow?Come let's crack it..Part-1

Ever been in a situation while working in PowerApps and CDS as back-end, and trying to think how to store those images in Common Data Service (CDS) and share with the people. Because CDS does not stores the actual image in the Image datatype field. It stores some sort of blob url address in the image field which you can view it only via displaying it in the PowerApps. In the CDS, inside the views also, the image field can't be seen. It's hidden and don't know the actual reason why is it so.

While working with PowerApps and CDS, I have done a small research on how to capture multiple images in PowerApps using "Add Picture" control, save all of them into the CDS and email the actual image/list of images as an attachment to any users if want to using 2 ways: PowerApps connectors and Ms Flow.

Below are the steps to ponder to store images collection into the CDS using PowerApps:

Step 1. Create a CDS entity having an image field to store multiple records with an image.

(Note: You also store multiple images in a same record in CDS as it allows to store multiple images.)

Step 2. Create a canvas PowerApp to perform the operations. Please add below items:

• "Add Picture" control on the screen to capture the images

• A textbox to take comments

• A gallery control "Store Images" to view the collection of images to be used to store images in CDS and selection when used to send as email attachments

• Another gallery control "View Images" to view the stored images in the CDS entity

• Some buttons to perform the operations like "Add to Collection", "Save to CDS", "Select attachments to Send Email via PowerApps Connector", "Select attachments to Send Email via Ms Flow" and "Clear Collection".

Step 3. Now, we are going to add code in the respective buttons. Select "Add to Collection" button, go to it's OnSelect property and add the below code:

Collect(
    colEmailImages,
    {
        cra1e_imgname: txtImgName.Text,
        cra1e_imgurl: imgCDSUploadedImage.Image
    }
);
Collect(
    colAttachmentImages,
    {
        Name: btnCDSAddMediaButton.FileName,        
        ContentBytes:imgCDSUploadedImage.Image,
        '@odata.type': ""
    }
);
Reset(txtImgName);
Reset(btnCDSAddMediaButton);

This code will create 2 collections: colEmailImages - for storing images in CDS and colAttachmentImages - to display in the gallery "Store Images" with checkbox of selection if you want to email them.

Note:

• In order to send the images as an attachment in email, the images collection must contain the 3 fields in json :

{         
         Name: btnCDSAddMediaButton.FileName,
         ContentBytes: imgCDSUploadedImage.Image,
         '@odata.type': ""     
}

• The imgCDSUploadedImage.Image will contain the value of image's blog url address as below:

appres://blobmanager/72c6668c86514e78a167922e582149a7/7

Step 4. Select the "Store Images" gallery, please add the below code in the respective properties on the left:

Items => colAttachmentImages
Image.Image => ThisItem.ContentBytes
Label1.Text => ThisItem.Name
Label12.Text => ThisItem.ContentBytes

Step 5. Select "Save to CDS" button, go to it's OnSelect property and add the below code:

Patch(EmailImages,colEmailImages);
Refresh(EmailImages);

Note:

• We have used Patch(EntityName,CollectionName) method to save the whole image collection "colEmailImages" to the CDS entity named "EmailImages".

Step 6. Select the "View Images" gallery, please add the below code in the respective properties on the left:

Items => EmailImages
Image.Image => ThisItem.ImgUrl
Label1.Text => ThisItem.ImgUrl.Value
Label12.Text => ThisItem.ImgName

Step 7. Bingo, we have made it!! Run the app and see, we have successfully stored the images into the CDS entity... Go, give it a try...

Now, after the successful work of storing the images into the CDS, we will have a look at how to email those images as an attachment in PowerApps. It's very simple, please refer my next blog to find it more about that... Question on how to work with multiple Images in PowerApps, CDS & Ms Flow?Come let's crack it..Part-2