Outlook add-in - Insert HTML with background image

Question

I have an outlook add-in that should insert HTML into an appointment. This can be done by calling:

item.body.setSelectedDataAsync

My problem is that I'm trying to insert HTML with a background image. This works fine when using Outlook in the browser, but the Outlook client requires workarounds using VML as described here: https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds

I guess item.body.setSelectedDataAsync strips the comments needed for VML (like <!--[if gte mso 9]> ) from the HTML passed to insert?

How can I accomplish adding HTML with background image from my add-in that works across different Outlook versions (browser and client)?

Below is example of javascript code used to insert HTML:

let  htmlToInsert = '<table cellpadding="0" cellspacing="0" border="0" width="' + imageWidth + '" >';
    htmlToInsert += '<tr><td style="text-align: center; font-size: x-large">' + this.props.roomMap.mapTitle + '</td></tr>';
    htmlToInsert += '<tr><td valign="top" style="min-height:' + imageHeight + 'px;height:' + imageHeight + 'px; background-repeat: no-repeat; background-position: center bottom; width:' + imageWidth +';min-height:' + imageHeight + 'px;height:' + imageHeight + 'px;" background="' + this.props.roomMap.thumbnailUrl + '">';
    htmlToInsert += '<!--[if gte mso 9]>';
    htmlToInsert += '<v:rect style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;" strokecolor="none">';
    htmlToInsert += '<v:fill type="tile" src="'+ this.props.roomMap.thumbnailUrl +'" /></v:fill>';
    htmlToInsert += '</v:rect>';
    htmlToInsert += '<v:shape id="NameHere" style="position:absolute;width:' + imageWidth + 'px;height:' + imageHeight + 'px;">';
    htmlToInsert += '<![endif]-->';
    htmlToInsert += '<img src="https://www.meetingroommap.net/images/marker.png"/ style="margin-left:' + markerX + 'px; margin-top:' + markerY + 'px">';
    htmlToInsert += '<!--[if gte mso 9]>';
    htmlToInsert += '</v:shape>';
    htmlToInsert += '<![endif]-->';
    htmlToInsert += '</td></tr>';
    htmlToInsert += '<tr><td style="text-align: center; font-size: xx-small">Powered by <a target="_blank" href="https://www.meetingroommap.net" >www.MeetingRoomMap.net</a></td></tr>';
    htmlToInsert += '</table>';


    console.log(htmlToInsert);
    item.body.setSelectedDataAsync(
        htmlToInsert,
        { coercionType: Office.CoercionType.Html, 
        asyncContext: { } },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed){
                    console.log("Error calling item.body.setSelectedDataAsync: " + asyncResult.error.message);
            }
            else {
                // Successfully set data in item body.
            }
        });

As far as I know outlook doesn't support setting a background image with css. There is a great article about what's supported and what's not [here](https://www.campaignmonitor.com/css/email-client/outlook-2007-16/). And there is another SO thread over [here](https://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook) with a similar problem. — Akaino, Jan 16 '18 at 12:44
Exactly - I already know this and found workarounds like the one I linked to in my question. Setting background image using tables and VML is the 'normal' workaround for this. But I can't get this to work from my add-in, as it seems the setSelectedDataAsync strips away all the comments in the HTML that makes this work. — Thomas N. Sørensen, Jan 16 '18 at 13:14
It's not Outlook. It's a well known workaround in Outlook to use tags like — Thomas N. Sørensen, Jan 18 '18 at 08:58
setSelectedDataAsync, will strip out those comments. It essentially renders the HTML elsewhere and inserts the rendered HTML into the body. Comments will be dropped out. body.setAsync, will directly set the HTML body, and preserve those comments. Having said that, the workaround of using [if gte mso 9] tags is not consistent. I tried a small example, and got it to work after resizing an e-mail, but also noticed that the background image did not load consistently when the e-mail was received and also did not render in OWA. I will post the code snippet I used in the next comment. — Outlook Add-ins Team - MSFT, Jan 29 '18 at 21:16
var oBody = "
Hello World
" Office.context.mailbox.item.body.setAsync( oBody, { coercionType: Office.CoercionType.Html}); — Outlook Add-ins Team - MSFT, Jan 29 '18 at 21:24
To summarize: setAsync will set HTML directly, but the [gte mso 9] tags appear to be inconsistent / not officially supported. Perhaps you can get it to work with setAsync, but a better long term scenario may be to avoid background images via css if possible. — Outlook Add-ins Team - MSFT, Jan 29 '18 at 21:25

score 0 · Accepted Answer · answered Feb 07 '18 at 01:14

Thank you for your feedback. After further investigation, it appears there's no great workaround to achieve your scenario. We continue to learn about the new requirements add-in developers have, which helps us enable great scenarios on our platform. We track Outlook add-in feature requests on our user-voice page. Please add your request there. Features on user-voice are also considered when we go through our planning process.

Link to user voice: https://officespdev.uservoice.com/forums/224641-general/category/131778-outlook-add-ins.

Thanks again for your feedback,
Outlook Add-ins Engineering Team

Outlook add-in - Insert HTML with background image

1 Answers1