Responsive Design for Email Templates - Mobile & Desktop

Responsive Email Templates for Mobile & Desktop

A Responsive Email Template Design is about how you can send an Email/Notification to the End Users that can appear based on the Device i.e. Desktop/Mobile. It gives a proper look and feel on all your devices.

It automatically adjusts the screen size based on the different devices and viewports.

Step by Step Configuration

Design/Customize CSS: In order to have a responsive email template, first you should decide which CSS that you would like to use. There are several ways to define this as we have several websites that provide responsive css. I took one from W3 Schools.

Create a record under Service Portal → CSS
Copy the content from this link and paste it in CSS field.
Save the Record

Create a Script Include - Give the name as "EmailTemplate" and copy the below content

var EmailTemplate = Class.create();
EmailTemplate.prototype = {
    initialize: function(gr) {
        this.current = gr;
    },
    applyStyle: function() {
        var gr = new GlideRecord('sp_css');
                //Change the SYSID here 
        gr.addQuery('sys_id', '<sysid of your css file>'); 
        gr.query();
        if(gr.next()) {
            return "<style>" +  gr.css.toString() + "</style>";
        }
    },
    IncidentOpened: function() {
        var html = "<html>";
        html += this.applyStyle();
        html += "<body>";
        html += this.addLogo(); //Remove this in case Logo is not needed
        html += '<div class="w3-row-padding">';

        html += '<div class="w3-third"><h2>Incident Number</h2><p>' + this.current.number.toString() + '<p></div>';
        html += '<div class="w3-third"><h2>Short Description</h2><p>' + this.current.short_description + '<p></div>';
        html += '<div class="w3-third"><h2>Description</h2><p>' + this.current.description + '<p></div>';

        html += "<b>Your Incident has been submitted successfully.  Incident has been assigned to " + this.current.assignment_group.getDisplayValue() + '.  Someone from this group will contact you in resolving your issue.<br><br> Have a nice day!';
        html += "</div></body></html>";

        return html;
    },
    addLogo: function() {
                //You can add your own logo over here
        return '<img src="mylogo.png" width="200" height="200"/>';
    },
    type: 'EmailTemplate'
};

Create a Notification Email Script - Give name as "incident_open" and copy the below content

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
          /* Optional GlideRecord */ event) {
    var obj = new EmailTemplate(current);
    template.print(obj.IncidentOpened());
          // Add your code here

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

Notification Update - I took the OOTB Notification "Incident opened for me" and called with the above email script

You are all set now and the Email looks like this on Mobile & Desktop

Desktop

Mobile

References

Logo Creation : https://www.freelogodesign.org/

Responsive Templates : https://www.w3schools.com/css/css%5Frwd%5Ftemplates.asp

Please provide your feedback so that I can update this Article with new content if needed.

Thanks,

Narsing