If you send email notifications to GMail accounts, have you noticed that the message is not formated with the HTML table that is specified in the Action Script Package presentation script?
This is because GMail does not handle or blocks CSS Block code within the body of an email message.
However, GMail does handle or allows "in-line" CSS code within the body of an email message.
There are multiple ways to accomplish this and one approach is demonstrated below.
This example will focus on "Validating User Email Devices".
General Overview:
This approach uses variables to hold the CSS style for each of the elements that make up the message. The variables are then used while building the message instead of having a CSS block of code.
The Default "Out-of-the-Box" "devicevalidation" Action Script Package includes the following code in the "specific" script:
.
.
.
IF ($content.deviceclassification == "email")
$content.subject = "Validation Message For " & $event.devicename
$content.message = $content.message & "The validation code for your Device, " & $event.devicename & ", is " & $event.validationCode & ".\n\n"
$content.message = $content.message & "To validate your Device, do one of the following:\n\n"
$content.message = $content.message & "Enter the validation code into the AlarmPoint Web User Interface"
$content.choices = $main.choices
# add attachment to Email, and generate a unique ID for the attachment
$resourceURL = "java:resources/ui/logo.gif"
$cid = @script::generateUUID()
$content.attachments = $resourceURL &"|"& $cid
# Add style information.
$styleinfo = "<style type=\u0022text/css\u0022 media=\u0022all\u0022> <!--"
$styleinfo = $styleinfo & "div, p { color: #000; text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; }"
$styleinfo = $styleinfo & "table { font-size: 1em; display: block; }"
$styleinfo = $styleinfo & "a:link, a:visited, a:active { color: #174A7C; }"
$styleinfo = $styleinfo & "a:hover { color: #990033; }"
$styleinfo = $styleinfo & "table.param { border-collapse: collapse; table-layout: auto; }"
$styleinfo = $styleinfo & "table.param th { color: #FFF; background-color: #990033; font-size: 1.2em; padding: 4px 5px 4px 5px; border: solid #666; border-width: 1px 1px 1px 1px; }"
$styleinfo = $styleinfo & "tr.param_odd { background-color: #FFF; }"
$styleinfo = $styleinfo & "tr.param_even { background-color: #DEDEDE; }"
$styleinfo = $styleinfo & "td.param_key { text-align: right; font-weight: bold; border-collapse: collapse; padding: 3px 5px 3px 2px; border: solid #666; border-width: 1px 0px 1px 1px; }"
$styleinfo = $styleinfo & "td.param_val { text-align: left; font-weight: normal; border-collapse: collapse; padding: 3px 2px 3px 2px; border: solid #666; border-width: 1px 1px 1px 0px; }"
$styleinfo = $styleinfo & "p.instructions { font-style: italic; font-weight: bold; }"
$styleinfo = $styleinfo & "ol.responses { list-style: decimal inside; white-space: normal; }"
$styleinfo = $styleinfo & "li.response { font-weight: bold; }"
$styleinfo = $styleinfo & "div.warning_section { border: 1px solid #990033; padding: 3px; margin: 0; background-color: #FFCCCC; }"
$styleinfo = $styleinfo & "p.warning { font-style: italic; font-weight: bold; color: #990033; padding-left: 15px; }"
$styleinfo = $styleinfo & "--> </style>"
$content.htmlmessage = $styleinfo
$eventinfo = ""
# Display the image in the HTML Email
$eventinfo = $eventinfo & "<div id=\u0022eml_logo\u0022 class=\u0022logo\u0022><img src='cid:" & $cid & "'/></div>"
# Display event parameters.
$eventinfo = $eventinfo & "<html><body>"
$eventinfo = $eventinfo & "<div id=\u0022eml_param_section\u0022 class=\u0022param_section\u0022>"
$eventinfo = $eventinfo & "<table id=\u0022eml_params\u0022 class=\u0022param\u0022 summary=\u0022Event Parameters\u0022>"
$eventinfo = $eventinfo & "<tr id=\u0022eml_param_hdr\u0022 class=\u0022param\u0022>"
$eventinfo = $eventinfo & "<th id=\u0022eml_param_hdr_txt\u0022 class=\u0022param\u0022 colspan=\u00222\u0022>"
$eventinfo = $eventinfo & "Device Validation</th></tr>"
$eventinfo = $eventinfo & "<tr id=\u0022eml_param2\u0022 class=\u0022param_even\u0022>"
$eventinfo = $eventinfo & "<td id=\u0022eml_param_key2\u0022 class=\u0022param_key\u0022>"
$eventinfo = $eventinfo & "Time of Event:</td>"
$eventinfo = $eventinfo & "<td id=\u0022eml_param_val2\u0022 class=\u0022param_val\u0022>"
$eventinfo = $eventinfo & $userTime & "</td></tr>"
$eventinfo = $eventinfo & "<tr id=\u0022eml_param1\u0022 class=\u0022param_odd\u0022>"
$eventinfo = $eventinfo & "<td id=\u0022eml_param_key1\u0022 class=\u0022param_key\u0022>"
$eventinfo = $eventinfo & "Message:</td>"
$eventinfo = $eventinfo & "<td id=\u0022eml_param_val1\u0022 class=\u0022param_val\u0022>"
$eventinfo = $eventinfo & "Welcome to AlarmPoint. You are receiving a test message to validate your " & $event.devicename
$eventinfo = $eventinfo & ". Please validate your device.</td></tr>"
$eventinfo = $eventinfo & "</table></div>"
$eventinfo = $eventinfo & "</body></html>"
$content.htmlmessage::add($eventinfo)
$content.message = $content.message & $content.payload & "\n"
$content.message = $content.message & "Time of Incident: " & $userTime & "\n"
# Display response choices.
$responseinfo = "<div id=\u0022eml_response_section\u0022 class=\u0022response_section\u0022>"
$responseinfo = $responseinfo & "<p id=\u0022eml_response_instructions\u0022 class=\u0022instructions\u0022>"
$responseURL = $main.responseURL
$responseURL = $responseURL & "&username=" & $person.targetName
$responseURL = $responseURL & "&userId=" & $userId
$responseURL = $responseURL & "¬ificationId=" & $content.notification_key
$responseURL = $responseURL & "&deviceType=Email"
$responseinfo = $responseinfo & "Please validate your device by clicking the following link:"
$responseinfo = $responseinfo & "</p>"
$responseinfo = $responseinfo & "<ol id=\u0022eml_responses\u0022 class=\u0022response\u0022 title=\u0022Response Choices\u0022>"
$responseinfo = $responseinfo & "<li id=\u0022eml_response_item1\u0022 class=\u0022response\u0022>"
$responseinfo = $responseinfo & "<a id=\u0022eml_response_link1\u0022 class=\u0022response\u0022"
$responseinfo = $responseinfo & " href=\u0022" & $responseURL & "&responseChoice=Validate\u0022"
$responseinfo = $responseinfo & " title=\u0022Validate\u0022>Validate</a> - <i>Marks your device as Valid in AlarmPoint</i></li>"
$responseinfo = $responseinfo & "</ol></p></div>"
$content.htmlmessage::add( $responseinfo )
ELSE-IF ...
.
.
.
Screenshot of GMail message below:
Changes to make use of the in-line CSS reflected below:
.
.
.
IF ($content.deviceclassification == "email")
$content.subject = "Validation Message For " & $event.devicename
$content.message = $content.message & "The validation code for your Device, " & $event.devicename & ", is " & $event.validationCode & ".\n\n"
$content.message = $content.message & "To validate your Device, do one of the following:\n\n"
$content.message = $content.message & "Enter the validation code into the xMatters Web User Interface"
$content.choices = $main.choices
# add attachment to Email, and generate a unique ID for the attachment
$resourceURL = "java:resources/ui/xmatters_email.gif"
$cid = @script::generateUUID()
$content.attachments = $resourceURL &"|<" & $cid & ">"
$styleA_Link = "style=\u0022color: #174A7C; text-align: left; font-family: Gotham, Arial, sans-serif; font-size: 14px;\u0022"
$styleA_Visited = "style=\u0022color: #174A7C;\u0022"
$styleA_Active = "style=\u0022color: #174A7C;\u0022"
$styleA_Hover = "style=\u0022color: #990033;\u0022"
$styleDiv = "style=\u0022color: #000; text-align: left; font-family: Gotham, Arial, sans-serif; font-size: 14px;\u0022"
$styleDiv_WarningSection = "style=\u0022border: 1px solid #990033; padding: 3px; margin: 0; background-color: #FFCCCC;\u0022"
$styleTable = "style=\u0022font-size: 1em; display: block; border-collapse: collapse; table-layout: auto;\u0022"
$styleTH = "style=\u0022text-align: left; color: #C2CD23; background-color: #000000; font-family: Gotham, Arial, sans-serif; font-size: 1.2em; padding: 4px 5px 4px 5px; border: solid #666; border-width: 1px 1px 1px 1px;\u0022"
$styleTR_Odd = "style=\u0022background-color: #FFF; border: 1px solid black;\u0022"
$styleTR_Even = "style=\u0022background-color: #DEDEDE; border: 1px solid black;\u0022"
$styleTD_Key = "style=\u0022text-align: right; font-family: Gotham, Arial, sans-serif; font-weight: bold; border-collapse: collapse; padding: 3px 5px 3px 2px; border: solid #666; border-width: 1px 1px 1px 1px;\u0022"
$styleTD_Val = "style=\u0022text-align: left; font-family: Gotham, Arial, sans-serif; font-weight: normal; border-collapse: collapse; padding: 3px 2px 3px 2px; border: solid #666; border-width: 1px 1px 1px 1px;\u0022"
$styleP_Instructions = "style=\u0022font-style: italic; font-weight: bold; color: #000; text-align: left; font-family: Gotham, Arial, sans-serif; font-size: 14px;\u0022"
$styleP_Warning = "style=\u0022font-style: italic; font-weight: bold; color: #990033; padding-left: 15px;\u0022"
$styleOL_Responses = "style=\u0022list-style: decimal inside; white-space: normal;\u0022"
$styleLI_Response = "style=\u0022color: #000; font-weight: bold; text-align: left; font-family: Gotham, Arial, sans-serif; font-size: 14px;\u0022"
$content.htmlmessage = ""
$eventinfo = ""
$eventinfo = $eventinfo & "<html><body>"
# Display the image in the HTML Email
$eventinfo = $eventinfo & "<div " & $styleDiv & "><img src='cid:" & $cid & "'/></div>"
$eventinfo = $eventinfo & "<div " & $styleDiv & ">"
$eventinfo = $eventinfo & "<table " & $styleTable & " summary=\u0022Event Parameters\u0022>"
$eventinfo = $eventinfo & "<tr>"
$eventinfo = $eventinfo & "<th " & $styleTH & " colspan=\u00222\u0022>"
$eventinfo = $eventinfo & "Device Validation</th>"
$eventinfo = $eventinfo & "</tr>"
$eventinfo = $eventinfo & "<tr " & $styleTR_Even & ">"
$eventinfo = $eventinfo & "<td " & $styleTD_Key & ">"
$eventinfo = $eventinfo & "Time of Event:</td>"
$eventinfo = $eventinfo & "<td " & $styleTD_Val & ">"
$eventinfo = $eventinfo & $userTime & "</td></tr>"
$eventinfo = $eventinfo & "<tr " & $styleTR_Odd & ">"
$eventinfo = $eventinfo & "<td " & $styleTD_Key & ">"
$eventinfo = $eventinfo & "Message:</td>"
$eventinfo = $eventinfo & "<td " & $styleTD_Val & ">"
$eventinfo = $eventinfo & "Welcome to xMatters. You are receiving a test message to validate your " & $event.devicename
$eventinfo = $eventinfo & ". Please validate your device.</td></tr>"
$eventinfo = $eventinfo & "</table></div>"
$eventinfo = $eventinfo & "</body></html>"
$content.htmlmessage::add( $eventinfo )
$content.message = $content.message & $content.payload & "\n"
$content.message = $content.message & "Time of Incident: " & $userTime & "\n"
# Display response choices.
$responseinfo = "<div id=\u0022eml_response_section\u0022 class=\u0022response_section\u0022>"
$responseinfo = $responseinfo & "<p id=\u0022eml_response_instructions\u0022 " & $styleP_Instructions & ">"
$responseURL = $main.responseURL
$responseURL = $responseURL & "&username=" & $person.targetName
$responseURL = $responseURL & "&userId=" & $userId
$responseURL = $responseURL & "¬ificationId=" & $content.notification_key
$responseURL = $responseURL & "&deviceType=Email"
$responseinfo = $responseinfo & "Please validate your device by clicking the following link:"
$responseinfo = $responseinfo & "</p>"
$responseinfo = $responseinfo & "<ol id=\u0022eml_responses\u0022 " & $styleOL_Responses & " title=\u0022Response Choices\u0022>"
$responseinfo = $responseinfo & "<li id=\u0022eml_response_item1\u0022 " & $styleLI_Response & ">"
$responseinfo = $responseinfo & "<a id=\u0022eml_response_link1\u0022 " & $styleA_Link
$responseinfo = $responseinfo & " href=\u0022" & $responseURL & "&responseChoice=Validate\u0022"
$responseinfo = $responseinfo & " title=\u0022Validate\u0022>Validate</a> - <i>Marks your device as Valid in xMatters</i></li>"
$responseinfo = $responseinfo & "</ol></p></div>"
$content.htmlmessage::add( $responseinfo )
ELSE-IF ...
.
.
.
Screenshot of GMail message below:
