How to use css class within the Email Script used Style Sheet - template.print() ?

[Elton2]

Hi everyone, how are you?!

I am using Email Script Template Notification, (which is being called ${mail_script} image_example) I created a table, but I would NOT like to use it inline css style of <table> <th> or <td> Tags, as there are many lines repeated with the same styling and the code contains a lot of information.

Could you tell me if there is a way for me to create a Style Sheet and include Class within the Tags? And what could I call this Style Sheet?

This is my code:

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,

          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,

          /* Optional GlideRecord */ event) {

template.print('<table>')

template.print('<tr>')

template.print('<th style="font-size:12px; border:1px solid #000;background: #808000"> Company  </th>')

template.print('<th style="font-size:12px; border:1px solid #000;background: #808000"> Department </th>')

template.print('<th style="font-size:12px; border:1px solid #000;background: #808000"> Employeess </th>')

template.print('<th style="font-size:12px; border:1px solid #000;background: #808000"> Roles </th>')

template.print('</tr>')

var gr = new GlideRecord('ci_business_company')

gr.query();

while(gr.next()){

template.print('<tr>')

template.print('<td style="border:1px solid #000; text-align: center"> + gr.getDisplayValue('u_company') + </td>')

template.print('<td style="border:1px solid #000; text-align: center"> + gr.getDisplayValue('u_department') + </td>')

template.print('<td style="border:1px solid #000; text-align: center"> + gr.getDisplayValue('u_employeess') + </td>')

template.print('<td style="border:1px solid #000; text-align: center"> + gr.getDisplayValue('u_roles') + </td>')

template.print('</tr>')

}

template.print('</table>')

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

Example of how I would like to do it, but I don't know how to call this style sheet within the email script (example_img1)

like this, using Class inside de tag that way it would be perfect:

template.print('<th class="thStyle"> Company </th>')

template.print('<td class="tdStyle"> + gr.getDisplayValue('u_company') + </td>')

Thank you!!!

[harshav · Accepted solution]

You can write the template using your mail script and add the class as needed. Now in your email template source code try to add your content from the stylesheet instead of the style sheet. 

<style type ="text/css">
.th{
background-color: red;
}
</style>

[ChrisBurks · Accepted solution]

Hi @Elton2 , 

@harshavis correct. Style tags can be used to apply CSS. A stylesheet isn't necessary.

template.print('<style type="text/css"> .thStyle { font-size:12px; border:1px solid #000;background: #808000; } .tdStyle {border:1px solid #000; text-align: center;}</style>');

The above statement would add the styles within the email and will be applied to those elements that are using the thStyle and tdStyle class names.

However, if you didn't want to include the "style" tags then another way to do this is refactor your code to use arrays with the headers and the field names with one of their methods like map and join.

For example:

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

// Since you know the headers and field names place those into their own array to iterate through them
	var headers = ['Company', 'Department', 'Employees', 'Roles'];
	var grFields = ['u_company', 'u_department', 'u_employees', 'u_roles'];
	
// Since these are similar in fashion create a function to parse them placing the headers/fields in the correct place with one statement; leveraging JavaScript array methods
	function createTableRows(gr){
		return function(field){
			//if no gr is passed create header markup for each header
			if(!gr)
				return '<th style="font-size:12; border:1px solid #000; background: #808000">'+ field +'</th>';
				
			
			//if there is a gr create table data cells for each field value
			if(gr)
				return '<td style="border:1px solid #000; text-align: center">' + gr.getDisplayValue(field) + '</td>';
				
		};
	}
	
	//createTableRows from the headers array
	var thRow = headers.map(createTableRows()).join("");
	
	//start initial table markup and header row
	template.print("<table><tr>");
	
	//pass in the header rows html markup
	template.print(thRow);
	
	//close out the header row
	template.print("</tr>");
	
	var gr = new GlideRecord('ci_business_company');
       //Maybe set a limit here unless you know there aren't many records
	gr.query();
	while(gr.next()){
		//start the first row of values for the fields passed. Each while iteration will create a new row for the each record found
		template.print("<tr>");
		
		//create a row for the record found of the values for each field name passed
		var tdRow = grFields.map(createTableRows(gr)).join("");
		
		//print the html markup for the record
		template.print(tdRow);
		
		//close out the row for the record
		template.print("</tr>");
	}
	
	//close out the table
	template.print("</table>");
	
})(current, template, email, email_action, event);

Without all the comments the script looks like this

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

	var headers = ['Company', 'Department', 'Employees', 'Roles'];
	var grFields = ['u_company', 'u_department', 'u_employees', 'u_roles'];
	
	function createTableRows(gr){
		return function(field){
			if(!gr)
				return '<th style="font-size:12; border:1px solid #000; background: #808000">'+ field +'</th>';
				
			if(gr)
				return '<td style="border:1px solid #000; text-align: center">' + gr.getDisplayValue(field) + '</td>';
				
		};
	}
	
	var thRow = headers.map(createTableRows()).join("");

	template.print("<table><tr>");
	template.print(thRow);
	template.print("</tr>");
	
	var gr = new GlideRecord('ci_business_company');
	gr.query();
	while(gr.next()){
		
		template.print("<tr>");
		var tdRow = grFields.map(createTableRows(gr)).join("");
		template.print(tdRow);
		template.print("</tr>");
	}
	
	template.print("</table>");
	
})(current, template, email, email_action, event);

Or do a combination of both, adding the styles in style tag and just using the class names

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

	var styles = [
			"<style>",
			".thStyle {",
			"font-size: 12px;",
			"border:1px solid #000;",
			"background: #808000;",
			"}",
			".tdStyle {",
			"border:1px solid #000;",
			"text-align: center",
			"}",
			"</style>"
			
		].join("");
	
        template.print(styles);
	
	var headers = ['Company', 'Department', 'Employees', 'Roles'];
	var grFields = ['u_company', 'u_department', 'u_employees', 'u_roles'];
	
	function createTableRows(gr){
		return function(field){
			
			if(!gr)
				return  '<th class="thStyle">'+ field +'</th>';
			
			if(gr)
				return '<td class="tdStyle">' + gr.getDisplayValue(field) + '</td>';

		};
	}
	
	var thRow = headers.map(createTableRows()).join("");
	
	template.print("<table><tr>");
	template.print(thRow);
	template.print("</tr>");
	
	var gr = new GlideRecord('ci_business_company');
	gr.query();
	while(gr.next()){
		
		template.print("<tr>");
		
		var tdRow = grFields.map(createTableRows(gr)).join("");
		
		template.print(tdRow);
		template.print("</tr>");
	}
	
	template.print("</table>");
	
})(current, template, email, email_action, event);

Hopefully this helps.

[Elton2]

Hi @ChrisBurks , how are you?!

That's right! This query is dynamic, but when I made a replacement the <td> appeared, I'm thinking of another way to use the query.

Thank you for the tip!!!

[Amit Gujarathi · Accepted solution]

HI @Elton2 ,
I trust you are doing great.
Please find the updated code for the same.

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
          /* Optional GlideRecord */ event) {

    // Define CSS Styles
    var styleBlock = '<style>' +
                     '.thStyle { font-size: 12px; border: 1px solid #000; background: #808000; }' +
                     '.tdStyle { border: 1px solid #000; text-align: center; }' +
                     '</style>';

    // Print the style block
    template.print(styleBlock);

    // Start the table
    template.print('<table>');
    template.print('<tr>');

    // Using class in table headers
    template.print('<th class="thStyle">Company</th>');
    template.print('<th class="thStyle">Department</th>');
    template.print('<th class="thStyle">Employees</th>');
    template.print('<th class="thStyle">Roles</th>');

    template.print('</tr>');

    var gr = new GlideRecord('ci_business_company');
    gr.query();
    while(gr.next()){

        template.print('<tr>');

        // Using class in table data
        template.print('<td class="tdStyle">' + gr.getDisplayValue('u_company') + '</td>');
        template.print('<td class="tdStyle">' + gr.getDisplayValue('u_department') + '</td>');
        template.print('<td class="tdStyle">' + gr.getDisplayValue('u_employees') + '</td>');
        template.print('<td class="tdStyle">' + gr.getDisplayValue('u_roles') + '</td>');

        template.print('</tr>');
    }

    template.print('</table>');

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

[Elton2]

Hi @Amit Gujarathi , how are you?!

Firstly, I would like to thank you for your attention and support!

I Used your code to perform some tests and it worked!!!
Thanks again for your support and have a great day!!!

[Ashu_8871]

Hello everyone!

I have a requirement where agents composing emails from the workspace using the "Compose Email" feature need the ability to insert links that automatically appear in a specific color (provided as a hex code).

We’re currently using a default email template that includes a signature, and I’m trying to add inline CSS to this template to ensure all <a> tags default to the specified color.

Has anyone implemented something similar or can guide me on how to properly apply this styling within the template?

Thanks in advance for your help!