cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AFWright
Helper II
Helper II

Emailing Gallery / Pictures in Line with Text

Lots of posts describing similar challenges and solutions, but I can't quite find one that fits the specific result that I need to reach. 

 

Here is the simple explanation. I need to let users email a product list to themselves and customers. The key is preserving formatting of the gallery in the email, so the photos are in line with text, and preserving text formatting as well. 

 

Additional challenge is that product list and images live in different databases, so the text contents of the gallery come from a collection, while images come from a onedrive link. 

 

AppSample.png

1 ACCEPTED SOLUTION

Accepted Solutions
RusselThomas
Microsoft
Microsoft

Hii @AFWright ,

The only way I can think of doing this with any degree of success from within PowerApps is to use HTML to render the entire gallery/collection of data dynamically.  

You would need to make sure the image URL's are available to anyone who wants to view them, as embedding images into email is tricky at best.  But in theory they would have needed to be able to see them anyway so it shouldn't be that far a leap from what you have configured currently.

To create the HTML, create the starting and ending HTML tags for the form, then loop through your source to create each item.

For this example I'll use your gallery as the source, seeing as it already contains all the logic of where data came from - this uses values in controls (not data fields) in the gallery row - to use a collection or the actual source, you just need to change myGallery.AllItems to the name of the source and update the dynamic fields inserts to the relevant field names).

Create a Button and set it's onSelect: property to;

 

//starting HTML
Set(HTMLPrefix, "<p>This is your output;</p> <p><span style='text-decoration: underline;'>Gallery of Items</span></p> <table style='width: 498px;' border='2'> <tbody> <tr>");

//Looping table HTML Set(HTMLTable, Concat(ForAll(myGallery.AllItems, "<tr> <td style='width: 238px;'> <p>" & labelTitle.Text & "</p> <p><img src='" & image.Image & "' width='64' /></p> <p><strong>" & labelTitle.Text & "</strong><strong><br /></strong>" & labelDescription.Text & "</p> </td> <td style='width: 248px;'> <p>" & labelWithCodes.Text & "</p> <p>" & anotherLabelWithCodes.Text & "</p> <p>Rated:" & labelRating.Text & "</p> <p>Production:" & labelProduction.Text & "</p> </td> </tr>"), Value));

//Then, your wrap up HTML Set(HTMLSuffix, "</tbody> </table> <p>The end</p>");

//Finally, string it all together to place into the body of your email Set(HTMLEmailBody, Concatenate(HTMLPrefix, HTMLTable, HTMLSuffix))

Obviously I've made some guesses as to label names, you can fill in the correct ones.  The image URL stored in the image.Image property may or may not be email friendly, depending on how you're rendering it as part of the data set.  It might take some extra effort to get this right depending on how you're doing it.
Ultimately, you should be able to populate your email with the HTMLEmailBody string and can obviously make your HTML a lot nicer than mine with fonts and the like - you can use an online HTML editor to see the output, or you can render the output in an HtmlText control inside PowerApps, but do keep in mind this control has limited HTML rendering capabilities - this shouldn't stop you from creating what you need as your ultimate limitation will be the email client reading the email, not PowerApps.
Also if you're copying and pasting from outside HTML into PowerApps, you may want to replace all your " with ' - otherwise you'll spend your life escaping double quotes and it's not pretty to read.  Only escape double quotes where HTML absolutely has to have double quotes - otherwise, for most of the time, you can just Replace All html code double quotes with single quotes to make life easier.

Hope this helps,

RT

View solution in original post

5 REPLIES 5
RusselThomas
Microsoft
Microsoft

Hii @AFWright ,

The only way I can think of doing this with any degree of success from within PowerApps is to use HTML to render the entire gallery/collection of data dynamically.  

You would need to make sure the image URL's are available to anyone who wants to view them, as embedding images into email is tricky at best.  But in theory they would have needed to be able to see them anyway so it shouldn't be that far a leap from what you have configured currently.

To create the HTML, create the starting and ending HTML tags for the form, then loop through your source to create each item.

For this example I'll use your gallery as the source, seeing as it already contains all the logic of where data came from - this uses values in controls (not data fields) in the gallery row - to use a collection or the actual source, you just need to change myGallery.AllItems to the name of the source and update the dynamic fields inserts to the relevant field names).

Create a Button and set it's onSelect: property to;

 

//starting HTML
Set(HTMLPrefix, "<p>This is your output;</p> <p><span style='text-decoration: underline;'>Gallery of Items</span></p> <table style='width: 498px;' border='2'> <tbody> <tr>");

//Looping table HTML Set(HTMLTable, Concat(ForAll(myGallery.AllItems, "<tr> <td style='width: 238px;'> <p>" & labelTitle.Text & "</p> <p><img src='" & image.Image & "' width='64' /></p> <p><strong>" & labelTitle.Text & "</strong><strong><br /></strong>" & labelDescription.Text & "</p> </td> <td style='width: 248px;'> <p>" & labelWithCodes.Text & "</p> <p>" & anotherLabelWithCodes.Text & "</p> <p>Rated:" & labelRating.Text & "</p> <p>Production:" & labelProduction.Text & "</p> </td> </tr>"), Value));

//Then, your wrap up HTML Set(HTMLSuffix, "</tbody> </table> <p>The end</p>");

//Finally, string it all together to place into the body of your email Set(HTMLEmailBody, Concatenate(HTMLPrefix, HTMLTable, HTMLSuffix))

Obviously I've made some guesses as to label names, you can fill in the correct ones.  The image URL stored in the image.Image property may or may not be email friendly, depending on how you're rendering it as part of the data set.  It might take some extra effort to get this right depending on how you're doing it.
Ultimately, you should be able to populate your email with the HTMLEmailBody string and can obviously make your HTML a lot nicer than mine with fonts and the like - you can use an online HTML editor to see the output, or you can render the output in an HtmlText control inside PowerApps, but do keep in mind this control has limited HTML rendering capabilities - this shouldn't stop you from creating what you need as your ultimate limitation will be the email client reading the email, not PowerApps.
Also if you're copying and pasting from outside HTML into PowerApps, you may want to replace all your " with ' - otherwise you'll spend your life escaping double quotes and it's not pretty to read.  Only escape double quotes where HTML absolutely has to have double quotes - otherwise, for most of the time, you can just Replace All html code double quotes with single quotes to make life easier.

Hope this helps,

RT

View solution in original post

Thank you, RT. 

 

This is a great start. I've had some success with creating emailable tables in Poweapps, so formatting is not an issue. 

 

Making images shareable is another story... My internal users have access to the image links and the solution you are proposing would work for them, however external users would not be able to see them.

 

There is a very clunky way to insert the raw contents of a jpeg into an html ( I don't think that's a good idea), but is there a more elegant solution on how to move a one-drive folder folder to make it pulbicly accessible? Or is this an opportunity to use blob storage or another feature of Azure?

 Hi @AFWright ,

Definitely the latter in my opinion Smiley Happy  

It's worth testing, but my guess is that Onedrive for Business (like SPO) image links are unlikely to render in email clients unless you can provide a share that is 'web native' and allows anonymous.  You can mess with image attachments and internally linking, but I've never had much luck in that area and it'll be super clunky with lots of images.

Depending on your cost limitations for using non-365 storage, you might also want to consider converting your HTML into PDF to attach - not sure how that might work with linked images - a long shot might even be manually building docx. and then converting to pdf using OneDrive, but I've never tried creating a docx file manually so I can't say if it will even work.  If azure blobs are easy access for you then they're probably the best way to go, just remember the new licensing coming down the line could make your app suddenly very expensive later on.

Kind regards,

RT

Great feedback. Thank you. 

 

The obvious solution would be for Microsoft to enable a "public" folder in One Driver that can host images like these. Considering we are already paying for storage and more. That way they are readily available and easy for our team to edit on the fly. 

In the absence of that, finding third-party storage for these files is probably the best plan. 

 

PS: Tried linking One Drive images in the email, but without any luck.

Hi @AFWright ,

OneDrive and SPO do allow for anonymous access and 'public' sharing to document libraries, but the mechanism of resource location is different to, say, a public website with a direct URL to an image file.  PowerApps even has/had trouble rendering images stored in document libraries via embedded controls until the more recent releases - but as a general rule, embedded resource rendering within other apps requires generally requires them to be "document library" friendly.

Considering the dynamic nature of the list and related images, the various Flow methods might also be difficult to implement (base64 embedding or attaching all images and ensuring the HTML code refers to them correctly).  I've had limited success with these, but might be worth checking in to see if any advancements have been made.

Attaching, embedding or linking images in emails has been an issue since email branding and spam became a thing - with each method being slowly strangled by spam filters, content filters and email client security blocks.  These would be my order of personal preference/ease of experience when email images;

  1. Attach a document containing all the relevant content
  2. Link the images to a public URL (depending on the client, might still have to 'opt in' to download the images)
  3. Embed images - Attach the images and reference them in the email HTML body (I've had mixed results - sometimes good, sometimes bad) - this is how the Outlook client apparently embeds images in emails - it's got a way of blind-attaching the images and the cid (content id?) references you see in the email body are actually referencing the image attachments.  This method just relies on the attached image name and the img src being the same, but like I said, I've had mixed results here.

Kind regards,

RT

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Top Kudoed Authors
Users online (3,594)