Email notification script

[surajkumar95]

I have a requirement to build a email notification script, where i need to create a button that will be used in notification wherever it is required. So, I have created it but the issue i am facing is the button is appearing correctly on the outlook web and preview but outlook desktop it is not appearing as expected. The requirement is to display the button on outlook desktop, mobile app android and iOS, as it is appearing on the outlook web.

Can anyone provide a solution? is there a restriction in html tags which didn't support in outlook apps but can work on outlook web.

var instanceURL = gs.getProperty('glide.servlet.uri');
var tableName = current.getTableName();
var sysId = current.getValue('sys_id');

var ticketURL = instanceURL +
'now/sow/record/' +
tableName +
'/' +
sysId;

var buttonHtml =
'<a href="' + ticketURL + '" ' +
'style="background-color:#1A45D7;' +
'border-radius:4px;' +
'color:#FFFFFF;' +
'display:inline-block;' +
'font-family:Arial;' +
'font-size:14px;' +
'font-weight:bold;' +
'line-height:20px;' +
'padding:10px 18px;' +
'text-align:center;' +
'text-decoration:none;">' +
'View Ticket' +
'</a>';

template.print(buttonHtml);

})(current, template, email, email_action, event);

[joshuajacks]

The short answer is that they use different rendering engines so they will treat html differently. Here are a couple articles about that topic:
Why can an HTML email look different across email clients? | AWeber

Why Outlook Breaks HTML Emails And How to Fix It | GlockApps

[Ankur Bawiskar]

@surajkumar95 

this is outlook rendering issue and not ServiceNow issue

try this workaround and see

(function runMailScript(current, template, email, email_action, event) {

    var instanceURL = gs.getProperty('glide.servlet.uri');
    var tableName = current.getTableName();
    var sysId = current.getUniqueValue();
    var ticketURL = instanceURL + 'now/sow/record/' + tableName + '/' + sysId;

    var buttonHtml = ''
    + '<table role="presentation" border="0" cellspacing="0" cellpadding="0">'
    + '<tr>'
    + '<td align="center">'
    + '<!--[if mso]>'
    + '<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" '
    + 'xmlns:w="urn:schemas-microsoft-com:office:word" '
    + 'href="' + ticketURL + '" '
    + 'style="height:40px;v-text-anchor:middle;width:150px;" '
    + 'arcsize="10%" strokecolor="#1A45D7" fillcolor="#1A45D7">'
    + '<w:anchorlock/>'
    + '<center style="color:#FFFFFF;font-family:Arial, sans-serif;font-size:14px;font-weight:bold;">'
    + 'View Ticket'
    + '</center>'
    + '</v:roundrect>'
    + '<![endif]-->'
    + '<!--[if !mso]><!-- -->'
    + '<a href="' + ticketURL + '" '
    + 'style="background-color:#1A45D7;border:1px solid #1A45D7;border-radius:4px;'
    + 'color:#FFFFFF;display:inline-block;font-family:Arial,sans-serif;font-size:14px;'
    + 'font-weight:bold;line-height:40px;text-align:center;text-decoration:none;'
    + 'width:150px;-webkit-text-size-adjust:none;">'
    + 'View Ticket'
    + '</a>'
    + '<!--<![endif]-->'
    + '</td>'
    + '</tr>'
    + '</table>';

    template.print(buttonHtml);

})(current, template, email, email_action, event);

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[surajkumar95]

it didn't help, appearing same as previous.

[surajkumar95]

It seems like the issue is not with the script, it is the outlook classic desktop app on which the button appearance is not correct, but when I checked the new outlook desktop app the button is appearing perfectly in email.