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

Elton2 · ‎11-25-2023

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 · ‎11-25-2023

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>

View solution in original post

ChrisBurks · ‎11-25-2023

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.

View solution in original post

Amit Gujarathi · ‎11-26-2023

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);

Was this answer helpful?

Please consider marking it correct or helpful.

Your feedback helps us improve!

Thank you!

Regards,

Amit Gujrathi

View solution in original post

harshav · ‎11-25-2023

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 · ‎11-25-2023

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 · ‎11-26-2023

Hi @ChrisBurks and @harshav how are you?!

Firstly, I would like to thank all of you for your attention and professionalism!!!

I'm using your code to perform some tests, I changed it according to my needs, but it's only bringing the "Headers" information, <th></th> unfortunately it's not bringing the dynamic part of <td></td> ( attachment image_1).I've debugged and rewrote it a few times, but it's not working.

This is script:

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

var headers = ['Company', 'Department', 'Employees', 'Area Customer', 'Roles', 'Manager', 'General Area'];

var grFields = ['u_company', 'u_department', 'u_employees', 'u_area_customer', 'u_roles', 'u_manager', 'u_general_area'];

function createTableRows(grCiCompany) {

return function(field) {

if (!grCiCompany) {

return '<th style="font-size:12; border:1px solid #000; background: #808000">' + field + '</th>';

}

if (grCiCompany) {

return '<td style="border:1px solid #000; text-align: center">' + grCiCompany.getDisplayValue(field) + '</td>';

}

};

}

var thRow = headers.map(createTableRows()).join("");

template.print("<table><tr>");

template.print(thRow);

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

var grCiCompany = new GlideRecord('ci_business_company');

grCiCompany.addEncodedQuery("u_bus_partner_depart.u_holder=" + ci_head);

grCiCompany.query();

while (grCiCompany.next()) {

template.print("<tr>");

var tdRow = grFields.map(createTableRows(grCiCompany)).join("");

template.print(tdRow);

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

}

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

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

Obs.: The first tip with style type worked, but the lines keep repeating and the code has many lines

Thank you for the support! 😉

ChrisBurks · ‎11-26-2023

Hi @Elton2 ,

My first thought would be that something is incorrect with the query because even if any of the values were blank for those fields, as is, the script would still output the other table row but with null or blank cells. But it wouldn't print out any row if the grCiCompany.next() is false; meaning the while loop didn't run.

I see in the query that it is using a dynamic using a variable named ci_head, however, I don't see it defined anywhere in the posted script.