Unanswered

Embedding Power Apps image gallery in a Power Automate Send Email function

(0) Share

Report

Posted on by csbassplayer200

Hello Everyone,

I am attempting to write a flow that will embed a Power Apps Canvas image gallery in to a Power Automate send email function. All of the tutorials i have looked at involve SharePoint, the PowerApps email function, etc....

I have an image upload feature in Power Apps, that successfully adds to the gallery and stores the images to a gallery. I then have a send button with the following function:

Set(stuff, JSON(pics,JSONFormat.IncludeBinaryData));
PowerappsGallerySend.Run(stuff)

"pics" is the name of the image gallery

"stuff" is the JSON variable name (these are both mainly placeholders)

I can get this function using Power Automate to send to SharePoint and they look fine, so the data is packaging properly, the issue is i want to embed those images in to a Send Email(V2) function without using SharePoint. So an image gallery embedded directly to the email. I know it probably needs to be converted back to base64, but im not sure how to insert the dynamic info/image gallery generated from PowerApps in to the expression properly. So far it just shows up with a dead image box and I have tried about a dozen different ways of doing it.

I appreciate any assistance.

Thank you!

Categories:

Building flows

I have the same question (0)

All responses (10)

Answers (1)

Matthy79 4,180 Super User 2024 Season 1 on at

Like (0)

Report
Hello @csbassplayer200

The object for the attachment has to look like this:

[ { "Name": "Picturename1.png", "ContentBytes": { "$content-type": "application/octet-stream", "$content": "iVBORw0KGgo....=" } }, { "Name": "Picturename2.png", "ContentBytes": { "$content-type": "application/octet-stream", "$content": "iVBORw0KGgo....=" } } ]

Can you make it from here or do you need help to format it this way? If you need further help, please provide sample data of the trigger body.

Was this reply helpful? Yes No
csbassplayer200 36 on at

Like (0)

Report
When the photos go in to the image gallery collection (and subsequent variable) they are formatted as such:

Collect(pics, { Pic: UploadedImage1.Image, Name: Rand() & ".jpg"})

This is the output direct from Power Apps:
{
    "schema": {
        "type": "object",
        "properties": {
            "ParseJSON_Content": {
                "type": "any",
                "x-ms-powerflows-param-ispartial": false
            }
        },
        "required": [
            "ParseJSON_Content"
        ]
    }
}

Previously i was using a JSON schema like this:
{ "type": "array", "items": { "type": "object", "properties": { "Name": { "type": "string" }, "Pic": { "type": "string" } }, "required": [ "Name", "Pic" ] } }
Let me know if this makes sense or if you need additional info. The picture name is just set as a random within PowerApps and i dont use any other definitions when its attached to the gallery.

The flow as of current:

Was this reply helpful? Yes No
Matthy79 4,180 Super User 2024 Season 1 on at

Like (0)

Report

OK, this looks good. Now you have to use this JSON to create your array. You can use "apply to each" and a compose action to create it or you can use one select action. Can you provide a screenshot of the triggerbody (look at one run history). I just want to know if it looks like this for example:

Was this reply helpful? Yes No
csbassplayer200 36 on at

Like (0)

Report
Using the compose, the output looks like this (for one of the photos):

[{"Name":"0.34818907.jpg","Pic":"data&colon;image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD

Was this reply helpful? Yes No

Matthy79

4,180 Super User 2024 Season 1 on at

Like (1)

Report

Hello @csbassplayer200

Here are 2 solutions:

Here is the scope to copy:

{"id":"32ff573f-ee3b-4a4b-bc9c-7fb566c65f1b","brandColor":"#8C3900","connectionReferences":{"shared_office365_1":{"connection":{"id":"/emh_Office365OutlookMatthias"}}},"connectorDisplayName":"Control","icon":"data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=","isTrigger":false,"operationName":"Scope_attachments","operationDefinition":{"type":"Scope","actions":{"Apply_to_each_attachment":{"type":"Foreach","foreach":"@body('Parse_JSON')","actions":{"Compose_attachment":{"type":"Compose","inputs":{"Name":"@{items('Apply_to_each_attachment')['Name']}","ContentBytes":"@base64ToBinary(split(items('Apply_to_each_attachment')['Pic'], ',')[1])"},"runAfter":{},"description":"base64ToBinary(split(items('Apply_to_each_attachment')['Pic'], ',')[1])","metadata":{"operationMetadataId":"219b13b9-d621-4d24-8105-6c86df9585f2"}}},"runAfter":{},"metadata":{"operationMetadataId":"957721b2-c86b-46d4-b974-af5a9bfb211d"}},"Compose_all_attachments":{"type":"Compose","inputs":"@outputs('Compose_attachment')","runAfter":{"Apply_to_each_attachment":["Succeeded"]},"description":"outputs('Compose_attachment')","metadata":{"operationMetadataId":"593568d1-df28-4023-880c-ad69949433e1"}}},"runAfter":{"Parse_JSON":["Succeeded"]},"metadata":{"operationMetadataId":"66c131ad-8823-49ef-bb77-359f14447f8e"}}}

It is also possible to just have a single select statement to do the work:

{"id":"d11c8d1a-3492-406b-a942-82e675653c58","brandColor":"#8C6CFF","connectionReferences":{"shared_office365_1":{"connection":{"id":"/emh_Office365OutlookMatthias"}}},"connectorDisplayName":"Data Operations","icon":"data&colon;image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiA8cGF0aCBmaWxsPSIjOEM2Q0ZGIiBkPSJtMCAwaDMydjMyaC0zMnoiLz4NCiA8ZyBmaWxsPSIjZmZmIj4NCiAgPHBhdGggZD0iTTEzLjE4NyAxNC4wNzloNi4xODd2LjY2NGwtMi4zMjEgMi4zMzd2Mi40MDFoLTEuNTQ1di0yLjQwMWwtMi4zMjEtMi4zMjF6bTUuODAzLjQ5NnYtLjExMmgtNS4zODd2LjExMmwyLjMyMSAyLjMyMXYyLjIwOWguOHYtMi4yMDl6IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuMjUiLz4NCiAgPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjggMCAwIC44IDMuMTk4IDIuNjczKSIgZD0iTTYgMTYuMDdhMi4yNCAyLjI0IDAgMCAwIC45LS4xOSAyLjM2IDIuMzYgMCAwIDAgMS4yNC0xLjI0IDIuMjIgMi4yMiAwIDAgMCAuMTktLjl2LTEuMjlhOC4yMiA4LjIyIDAgMCAxIDAtMS4yNiA0LjY4IDQuNjggMCAwIDEgLjMtMS4xOSAzLjA5IDMuMDkgMCAwIDEgLjcxLTEgMy40MiAzLjQyIDAgMCAxIDEuMTQtLjc1IDMuNTEgMy41MSAwIDAgMSAxLjM0LS4yNnYxLjExYTIuMjEgMi4yMSAwIDAgMC0uOS4xOSAyLjM2IDIuMzYgMCAwIDAtMS4yNCAxLjI0IDIuMjMgMi4yMyAwIDAgMC0uMTkuOXYyYTcgNyAwIDAgMS0uMDkuOTMgMy43MyAzLjczIDAgMCAxLS4yNS44NiAzLjI3IDMuMjcgMCAwIDEtLjQ3Ljc4IDMuNDQgMy40NCAwIDAgMS0uNzcuNjkgMy40OCAzLjQ4IDAgMCAxIC43Ny42OSAzLjI5IDMuMjkgMCAwIDEgLjQ3Ljc4IDMuNzUgMy43NSAwIDAgMSAuMjUuODYgNyA3IDAgMCAxIC4wOS45M3YyYTIuMjIgMi4yMiAwIDAgMCAuMTkuOSAyLjM3IDIuMzcgMCAwIDAgMS4yMyAxLjE1IDIuMjIgMi4yMiAwIDAgMCAuOS4xOXYxLjE2YTMuNDkgMy40OSAwIDAgMS0xLjM0LS4yNiAzLjQxIDMuNDEgMCAwIDEtMS4xNC0uNzUgMy4wOSAzLjA5IDAgMCAxLS43MS0xLjA2IDQuNjcgNC42NyAwIDAgMS0uMjktMS4xOCA4LjI0IDguMjQgMCAwIDEgMC0xLjI2di0xLjI5YTIuMjMgMi4yMyAwIDAgMC0uMTktLjkgMi4zNSAyLjM1IDAgMCAwLTEuMjQtMS4yMyAyLjIyIDIuMjIgMCAwIDAtLjktLjE4em0xNC4xOS04LjEzYTMuNTEgMy41MSAwIDAgMSAxLjM0LjI2IDMuNDIgMy40MiAwIDAgMSAxLjEzLjggMy4wOSAzLjA5IDAgMCAxIC43MSAxIDQuNjggNC42OCAwIDAgMSAuMjkgMS4xOSA4LjIyIDguMjIgMCAwIDEgMCAxLjI2djEuMjlhMi4yMiAyLjIyIDAgMCAwIC4xOS45IDIuMzcgMi4zNyAwIDAgMCAxLjI0IDEuMjQgMi4yMiAyLjIyIDAgMCAwIC45LjE5djEuMTZhMi4yMSAyLjIxIDAgMCAwLS45LjE5IDIuMzYgMi4zNiAwIDAgMC0xLjI0IDEuMjQgMi4yMyAyLjIzIDAgMCAwLS4xOS45djEuMjlhOC4yNCA4LjI0IDAgMCAxIDAgMS4yNiA0LjY3IDQuNjcgMCAwIDEtLjI5IDEuMTggMy4wOSAzLjA5IDAgMCAxLS43MSAxLjA2IDMuNDEgMy40MSAwIDAgMS0xLjE0Ljc1IDMuNDkgMy40OSAwIDAgMS0xLjM0LjI2di0xLjE1YTIuMjQgMi4yNCAwIDAgMCAuOS0uMTkgMi4zNiAyLjM2IDAgMCAwIDEuMjQtMS4yNCAyLjIyIDIuMjIgMCAwIDAgLjE5LS45di0yYTcgNyAwIDAgMSAuMDctLjg4IDMuNzUgMy43NSAwIDAgMSAuMjUtLjg2IDMuMjkgMy4yOSAwIDAgMSAuNDctLjc4IDMuNDggMy40OCAwIDAgMSAuNzctLjY5IDMuNDQgMy40NCAwIDAgMS0uNzgtLjY3IDMuMjcgMy4yNyAwIDAgMS0uNDctLjc4IDMuNzMgMy43MyAwIDAgMS0uMjUtLjg2IDcgNyAwIDAgMS0uMDktLjkzdi0yYTIuMjMgMi4yMyAwIDAgMC0uMTktLjkgMi4zNSAyLjM1IDAgMCAwLTEuMjQtMS4yNCAyLjIyIDIuMjIgMCAwIDAtLjktLjE5di0xLjE2eiIvPg0KIDwvZz4NCjwvc3ZnPg0K","isTrigger":false,"operationName":"Select_Attachments","operationDefinition":{"type":"Select","inputs":{"from":"@body('Parse_JSON')","select":{"Name":"@item()['Name']","ContentBytes":"@json(concat('{ \"$content-type\": \"application/octet-stream\", \"$content\": \"', split(item()['Pic'], ',')[1], '\"}'))"}},"runAfter":{"Scope_attachments":["Succeeded"]},"metadata":{"operationMetadataId":"44b379d8-37d7-4089-8945-fb77788d873b"}}}

Pick the solution you like better.

Not sure if it is the cleanest way to do such things but it should work.

Was this reply helpful? Yes No

csbassplayer200 36 on at

Like (0)

Report

I think I am still missing something. When you say "scope to copy", where is that supposed to go?

So far i have this:

This results in this error:

Am i using an improper HTML script or did something else get left out/needed to be done?

Was this reply helpful? Yes No
Matthy79 4,180 Super User 2024 Season 1 on at

Like (0)

Report

Hello @csbassplayer200 ,

Sorry. I misunderstood the requirement. So you do not want the images to be attached to the email but inline embedded, correct? What is the filename for in that case? Do you want all the images embedded or do you want one image (a snapshot of the gallery) embedded?

Was this reply helpful? Yes No
csbassplayer200 36 on at

Like (0)

Report

So Power Apps contains a gallery/collection of images. When i hit the (created) send button in Power Apps, i want the images contained in the gallery to be embedded in an email created by Power Automate (i can live with attached to the email also, i just thought embedded would be easier to do).

So for example:

Results in:

(Or they can be attachments instead of embedded)

In addition to the photos, other data is being added to the email body based on some conditions, but that part is already worked out, the photos are just the last piece to figure out. This is going to be used for remote vehicle inspections. The text fields contain the main data on the vehicle, and the photos will be used for things like damage, irregularities. All the data gets formatted in to an email based on what type of vehicle it is (using conditional statements on the other data). I just can't get the photos part to work properly on the email send.

Was this reply helpful? Yes No
Verified answer

Matthy79 4,180 Super User 2024 Season 1 on at

Like (1)

Report
OK,

so the previous code works already. You just have to put it where the attachments are. You have to "Switch to text" and insert the output of select or compose (depends on the solution you picked).

Embedded images work a little different. This should work:

{"id":"f4a1e436-6013-482f-a681-fc9234d20bb7","brandColor":"#8C3900","connectionReferences":{"shared_office365_1":{"connection":{"id":"/emh_Office365OutlookMatthias"}}},"connectorDisplayName":"Control","icon":"data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=","isTrigger":false,"operationName":"Scope_embedded_image","operationDefinition":{"type":"Scope","actions":{"Apply_to_each_image":{"type":"Foreach","foreach":"@body('Parse_JSON')","actions":{"Compose_img_src":{"type":"Compose","inputs":"<img src=\"data&colon;image/jpg;base64,@{split(items('Apply_to_each_image')['Pic'], ',')[1]}\">","runAfter":{}}},"runAfter":{}},"Compose_embedded_images":{"type":"Compose","inputs":"@join(outputs('Compose_img_src'),'')","runAfter":{"Apply_to_each_image":["Succeeded"]}}},"runAfter":{"Parse_JSON":["Succeeded"]}}}
If you use it that way you can put it into the body wherever you want the images to be.

Was this reply helpful? Yes No
csbassplayer200 36 on at

Like (0)

Report

Thank you thank you thank you thank you thank you!

Both solutions work flawlessly and i can adapt them to my needs to finish the application. I appreciate all of your time on this! Does exactly what i need.

Was this reply helpful? Yes No