CODEWITHSUNDEEP
outlook-addinoffice-jsoutlook-2013outlook-web-appoutlook-2016
Steve M
Steve M

Reputation: 167

Line Spacing Increased Issue When Updating Email Body With Office.js

I’m working on an add-in for Microsoft Outlook, and one behavior of my add-in is to insert an image into a message body from compose view. I use the Office.js method Office.context.mailbox.item.body.getAsync() with a coercion type of HTML to get the email body in HTML form. I add my image to the email’s HTML, and then I replace the email’s body with my updated HTML using the Office.js method Office.context.mailbox.item.body.setAsync(), again with a coercion type of HTML.

From the Outlook Web App, everything works as expected. From an Outlook desktop platform (Outlook 2016, Outlook 2013, and Outlook for Mac), unexpected formatting changes are made to the email body. This might have to do with Outlook desktop platforms using Microsoft Word as their text editor.

I think the method Office.context.mailbox.item.body.getAsync() is causing two side effects:

These two side effects will cause each line in an email to take more vertical space than before. Is there a way to prevent these two side effects?

I’ve written some Javascript code to reproduce this issue. Run this code from compose view to see the HTML body value printed is different in the Outlook Web App vs. a desktop platform.

Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html, function(asyncResult) {
    if (asyncResult && asyncResult.status === Office.AsyncResultStatus.Succeeded) {
        console.log('Value retrieved from getAsync(): ');
        console.log(asyncResult.value);

        // Isolate the email body's HTML, in case a word doc has been returned
        var parser = new DOMParser();
        var dom = parser.parseFromString(asyncResult.value, 'text/html');
        var body = $(dom.body);

        console.log('HTML body:');
        console.log(body.html());

        // Setting the email's body to be our html content:
        Office.context.mailbox.item.body.setAsync(body.html(), {
            coercionType: Office.CoercionType.Html
        }, function() {
            console.log('Complete');
        });
    }
});

Using this sample code, the HTML body value for a test email was the following in the Web App:

<div id="divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;" dir="ltr">
  <div id="x_divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:#000000; font-family:Calibri,Helvetica,sans-serif">
    <p style="margin-top:0; margin-bottom:0">Hello,</p>
    <p style="margin-top:0; margin-bottom:0"><br></p>
    <p style="margin-top:0; margin-bottom:0">This is a test email.</p>
    <p style="margin-top:0; margin-bottom:0"><br></p>
    <p style="margin-top:0; margin-bottom:0">Thank you,</p>
    <p style="margin-top:0; margin-bottom:0">Steve</p>
    <div id="x_Signature">
      <div id="x_divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:rgb(0,0,0); font-family:Calibri,Helvetica,sans-serif,EmojiFont,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;,NotoColorEmoji,&quot;Segoe UI Symbol&quot;,&quot;Android Emoji&quot;,EmojiSymbols">
        <p style="margin-top:0; margin-bottom:0"></p>
      </div>
    </div>
  </div>
</div>

And in Outlook 2016, this value was:

<div class="WordSection1">
  <p class="MsoNormal">Hello,<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">This is a test email.<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">Thank you,<o:p></o:p></p>
  <p class="MsoNormal">Steve<o:p></o:p></p>
</div>

Running this code in Outlook 2016 caused a change in the line spacing of my test email, pictured here.

Upvotes: 2

Views: 1266

Answers (1)

Philip Andersson
Philip Andersson

Reputation: 1

If i read your sample correctly you only write the asyncResault.value's body to the setAsync function. I ran in to the same problem and finnaly found where the problem lies.

This section from Outlook 2016 tries to find MsoNormal which is an Office style, o:p is also a hint that this is styled see more in this answer, that you must include in setAsync.

<div class="WordSection1">
  <p class="MsoNormal">Hello,<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">This is a test email.<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">Thank you,<o:p></o:p></p>
  <p class="MsoNormal">Steve<o:p></o:p></p>
</div>

If you include the header from asyncResault, example here preserve the resault.value in the option object, to the setAsync function the output format will find MsoNormal there and keep the original email format. So either preserve header like below or include it in option object.

SetAsync(parsedom.header.innerHTML + parsedom.body.innerHTML + addedhtml, option)

Hope this helps the next one that finds this thread here.

Upvotes: 0

Related Questions