Let's find out how we can send the images of PowerApps as an attachment in an Email to the another users using PowerApps Connectors and Microsoft Flow.
If you have not gone through how we can store the images in the CDS using PowerApps controls then I would recommend you to refer my previous blog Question on how to work with multiple Images in PowerApps, CDS & Ms Flow?Come let's crack it..Part-1
I have so far explored 2 ways to send images as an email attachment. There can be different ways too, you can share your version of it too.
One way, to use the available PowerApps Connectors to send an email.
Another, using Microsoft Flows connectors.
Let's take a deep dive into it...
Approach 1 - Send email attachments using the PowerApps Connectors:
Please follow below steps to send a collection of images as attachments in a single email.
Step 1. Once you already have a "Store Images" gallery ready with Items property set to collection name "colAttachmentImages", please make sure you have added a checkbox also as a gallery item control.
As we are going to select those items and send only the selected items as an attachment in the email.
Step 2. Select the checkbox and go to it's Text property and replace the text as "Add to attachment".
Step 3. Select the checkbox and go to it's OnCheck property and add the below code:
Collect(colFinalAttachment,ThisItem)This way we are creating a final collection which will be used to send the images as an attachment.
Step 4. Go to Data sources tab and add Office365Oulook connector in the app shown as below:
Step 5. Select the button "Select attachment to Send Email via PowerApps Connector" and go to it's OnSelect property and add the below code:
Office365Outlook.SendEmail(
your@email.id, //Recipient's address
"Testing", //Email subject
"Testing Body", //Email body
{
Attachments: colFinalAttachment, //Collection of images
IsHtml: true
}
);
Notify(
"Email sent",
NotificationType.Success
);
Clear(colFinalAttachment);
Note:
SendEmail() method is used to send the email as well as attachments if needed from PowerApps.
{Attachments:collectionname,IsHtml: true} is compulsory needed to send images collection as attachments.
(No extra processing on the images collection is required while using the PowerApps Connector)
Step 6: Voilà !! You are done !! Please try and test it...
Approach 2 - Send email attachments using the Microsoft Flows Connectors:
Please follow below steps to send a single images as attachment in an email.
Steps. Please perform step 1, 2 and 3 from above.
Step 4. Go to flow.microsoft.com and login with your credentials to create a flow from blank, select PowerApps as a trigger and save it by giving proper name.
Step 5. Add a step of Initialize Variable, Name it as JsonAttachmentCollection, type as String and for Value, select InitializeVariableValue from PowerApps section.
Step 6. Add a step of Initialize Variable, Name it as varEmail, type as String and for Value, select InitializeVariableValue from PowerApps section.
Step 7. Add a step of Initialize Variable, Name it as varFileName, type as String and Value as empty.
Step 8. Add a step of Initialize Variable, Name it as varFileContent, type as String andnd Value as empty.
Step 9. Then, add a step of Parse JSON, select Content as JsonAttachmentCollection and Schema as below:
{
"type": "array",
"items": {
"type": "object",
"properties": {
"ContentBytes": {
"type": "string"
},
"Name": {
"type": "string"
},
"'@odata.type'": {
"type": "string"
}
},
"required": [
"Name",
"ContentBytes"
]
}
}Note:
The Parse JSON step will parse the serialized JSON which will be passed as an input parameter from the PowerApps which we'll see later.
To generate the above JSON code manually, you can click the Generate from sample button and write below code and click on OK.
[
{
"Name":"CollectionField1Name",
"ContentBytes":"CollectionField2Name",
"'@odata.type'":""""
}
] After the snippet is generated, please do not forget to remove 3rd field i.e. '@odata.type' from the required array as we are not passing anything inside it from PowerApps.
Step 10. Then, add step Apply to each and select {x}Body (from Parse JSON dynamice selection section) in Select an output from previous steps.
Step 11. Add a step Set Variable to set the File name, so select varFileName as Name and {x}Name (from Apply each dynamic selection section) as Value.
Step 12. Add a step Set Variable to set the File content, so select varFileContent as Name and {x}ContentBytes (from Apply each dynamic selection section) as Value.
Step 13. Add a step Compose to process the parsed JSON of image address. Write below code to decode the ContentBytes's content as below in Inputs field:
decodeDataUri(variables('varFileContent'))Step 14. Now, add a step Send an email(V2) to send an email with multiple attachments and add below code in the respective fields:
To => {x}varEmailAddress
Subject => Testing
Body => Testing Body
Attachments Name-1 => {x}varFileName
Attachments Content-1 => {x}Outputs (from Compose section) Below find the full Microsoft Flow code as below:
Step 15. Tadaaa...! Save the MS Flow as it's done ! Now, we only need to call this MS Flow from PowerApps... Let's quickly have a look it.. We are not far from out expected results now..
Calling the Microsoft Flow from PowerApps by passing input parameters:
Step 16. In your PowerApps, select the button Select attachments to Send Email via Ms Flow, go to Action tab and click Power Automate option. Then, select your flow which was created by you and click to add into your app.
Step 17. Add the below code in it's Select property :
'POCEmailImagesOfCDS'.Run(JSON(colFinalAttachment,JSONFormat.IncludeBinaryData),"recipient@mail.com");Note:
To send a collection as the input in Ms Flow, it must be serialized into JSON string by using syntax:
JSON(collectionName,JSONFormat.IncludeBinaryData);JSONFormat.IncludeBinaryData is optional but since we have an image field in our collection, it is very important to include the Binary Data format in JSON string.
Step 16. Save it and run the app.
Bravo!! Finally we are done and see how the magic works!!
Happy Coding !! :)
Do write me back as it matters to me! Will soon be back with next articles...
Comments