Creating a formatted HTML table in an email body

This is the second part of a short series looking at the Snippets Bakery's Project which entails an Order Form and automatic response emails.

Let's take a look at how we got that (relatively!) nicely styled table in to the body of the email. The Google Apps Script MailApp.SendEmail method allows for an HTML body so we could have just hand written the table out as follows (note that we would need to switch the response values to the references to the object properties where the response values are stored - I took the HTML right from my browser console which is why they are just plain text):

<table style="border:2px solid black;width:500">

<tbody>

<tr><th colspan="2" bgcolor="#c7ced4">Section One: Product Details</th></tr>

<tr bgcolor="#d0eaf9"><td>Size</td><td>10" - £25</td></tr>

<tr><td>Style</td><td>Victoria Sponge Cake</td></tr>

<tr bgcolor="#d0eaf9"><td>Filling</td><td>Strawberry Jam</td></tr>

<tr><td>Topping</td><td>Buttercream</td></tr>

<tr bgcolor="#d0eaf9"><td>Decoration</td><td>Marshmallows, Strawberries, "Happy Birthday!"</td></tr>

<tr><th colspan="2" bgcolor="#c7ced4">Section Two: Delivery Details</th></tr>

<tr bgcolor="#d0eaf9"><td>First name</td><td>Joe</td></tr>

<tr><td>Family name</td><td>Bloggs</td></tr>

<tr bgcolor="#d0eaf9"><td>Email Address</td><td>gassnippets@gmail.com</td></tr>

<tr><td>Address</td><td>1 Main Street York</td></tr>

<tr bgcolor="#d0eaf9"><td>Delivery</td><td>Delivery within 10 Miles of York - £3</td></tr>

<tr><td>Delivery Date</td><td>15-Nov-2012</td></tr>

<tr bgcolor="#d0eaf9"><td>Notice</td><td>4 days - £5 Fast track surcharge</td></tr>

<tr><td>Total Cost</td><td>£33.00</td></tr>

</tbody>

</table>

view raw HTMLTable.htm hosted with ❤ by GitHub

Writing out that table would be incredibly tedious and involve a lot of repetition, not to mention that if we want to change any of the variables we would constantly need to edit it - there must be a better way. Luckily, there is. We can get Google Apps Script to write the table for us!

	/* ----- BUILD HTML RESPONSE TABLE ----- */
	var HTMLtable = "<table style=\"border:2px solid black;width:500\" >";
	var rowCount = 0;
	for (var property in NewSubmission) {
	if(NewSubmission[property].length != 0){
	if(property.substring(0,7) === "Section"){
	HTMLtable += "<tr><th colspan=\"2\" bgcolor=\"#c7ced4\">"+ property +"</th></tr>";
	} else {
	if(rowCount % 2 === 0){
	HTMLtable += "<tr><td>" + property + "</td><td>" + NewSubmission[property] + "</td></tr>";
	} else {
	HTMLtable += "<tr bgcolor=\"#d0eaf9\"><td>" + property + "</td><td>" + NewSubmission[property] + "</td></tr>"
	}
	}
	rowCount++;
	}
	}
	// don't forget to close your table tags!
	HTMLtable += "</table>";

view raw HTMLTable.js hosted with ❤ by GitHub

With this code we are aiming to generate all of the HTML we need and add it to the HTMLtable string. We are using a for..in loop to iterate over all of the properties in our NewSubmission object - the object where we stored all of our form response values.

We've adjusted this object slightly so let's have a look at how it's created.

	/* ----- CREATE NEWSUBMISSION OBJECT ----- */
	var NewSubmission = {};
	var Properties = ["Section One: Product Details","Size","Style","Filling","Topping","Decoration",
	"Section Two: Delivery Details","First name","Family name","Email Address","Address","Delivery","Day","Month","Year"];
	var i = 0;
	var iSkip = 0;
	for(i = 0; i < Properties.length; i++){
	if(Properties[i].slice(0,7) == "Section"){
	NewSubmission[Properties[i]] = " ";
	iSkip++;
	} else {
	//add 1 because Timestamp is e.values[0] and we don't need this
	NewSubmission[Properties[i]] = e.values[(i+1)-iSkip];
	}
	}

view raw CreateNewObject.js hosted with ❤ by GitHub

We're still using a for loop as previously discussed however we've add an if..else statement to capture the Section Headings that we've added in. As these aren't associated with any of the response values we need to treat them differently (their values are arbitrarily set as space character, " ", not an empty string for reasons we will arrive at shortly) and we need to adjust the value of i when we pass in e.values[i] as they will be out of sync due to these empty properties we've added. That is why we've added in the variable iSkip, incremented it for each heading and subtracted it from i when getting items from the e.values[] array.

Right, back to our table. Three points to make:

• As we iterate over the properties in NewSubmission, we've added a check that the length of these properties is non-zero; that is, the question they refer to has actually been answered. This isn't strictly necessary in our case as as each question on our form is designated as "Required" - however there may be situations where this is not the case. This is the reason our the values of our Section Headings properties are not set to empty strings - if they were, this check would eliminate them.
• We've added a check for Section Headings - defined as property names which start "Section". We format these differently and don't include their values which are inconsequential.
• Using the modulus operator we check if our table row count is odd or even. If it's odd we apply a different background colour - this is how we achieve the stripped table effect. The row count value starts at zero and is incremented each time we successfully add a row to the HTMLtable string.
• Finally, don't forget to close the <table> tags outside of the loop or the rest of your email will sit inside your table. It's not a very pleasant sight, I assure you!