CODEWITHSUNDEEP
javascripthtmlemailgoogle-apps-scripthtml-email
Cjgeno
Cjgeno

Reputation: 37

Google App Script HTML table styling

I've created a function within GAS that takes data from google sheets and sends out individual emails based on a specific person; the function then loops to the next person and continues through the data.

What I am having issue with now is formatting the HTML table that I've created by looping through the data. When I run this the data shows up in a table format but I am unable to add borders, color, ect. I currently have the styling under the TABLEFORMAT variable but I've also tried putting the style tags within the table, th, td, tr tags, but it just seems to ignore it. However, I put the output into an HTML simulator and it comes out the way I want it.

Does anyone know why this wouldnt work with a gs file? Also, I'm trying to get cashGoalPosition to be in dollar format. Thanks in advance for the help; I've been racking my brain with this and can't seem to figure it out.

function Auto_Email(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var shData = ss.getSheetByName("E-mail Data");
  var shEmail = ss.getSheetByName("E-mail List");
  var dataRange = shData.getDataRange(); // Fetch values for each row in the Range.
  var emailRange = shEmail.getDataRange(); //fetch values for email list
  var data = dataRange.getValues();
  var nameData = emailRange.getValues();
  var lastCol = dataRange.getLastColumn();

   for (var i = 1; i < nameData.length; i++) {
      var rows = nameData[i];
      var emailAddress = rows[2];//position of email header -1
      var fullName = rows[1]; //position of name header -1
      var firstName = rows[3]// the first name only
      var cashGoalPosition = rows[0].toString(); //position of billing goal -1
      var subject = firstName+"'s Cash Goal";
      var htmltable = '';
      var htmlmessage = "";
     var TABLEFORMAT = '<!DOCTYPE html><html><style>table {border-collapse:collapse} table,td,th{border:1px solid black}</style>'
      var pre_html = '<p>Dear '+firstName+',</p><p>Your new balance is <b>'+cashGoalPosition+'</b>. Below is a list of the invoices past due or due in the current month.</p><table style="width:100.0%"><tbody>'
      var post_html = '<p>Regards,<br>John</p></html>'

      for (row = 0; row<data.length; row++)
      { 
        for (col = 0 ;col<data[row].length; col++){
          if (row == 0 && col == 0) {htmltable += '<tr><th>' + data[row][col] + '</th>';}
          else
            if (row == 0 && col == lastCol - 1) {htmltable+= '<th>' + data[row][col] + '</th></tr>';}
          else
            if (row == 0) {htmltable+= '<th>' + data[row][col] + '</th>';}
          else
            if (data[row][0] == fullName && col == 0) {htmltable += '<tr><td>' + data[row][col] + '</td>';}
          else
            if (data[row][0] == fullName && col == lastCol -1) {htmltable += '<td>' + data[row][col] + '</td></tr>';}
          else
            if (data[row][0] == fullName) {htmltable += "<td>" + data[row][col] + "</td>";}
}

      }

     htmltable += '</tbody></table>';
     htmlmessage = TABLEFORMAT + pre_html + htmltable + post_html;


     Logger.log(htmlmessage)
MailApp.sendEmail(Session.getActiveUser().getEmail(), subject,'' ,{htmlBody: htmlmessage})
      }(i);
   }

Upvotes: 2

Views: 4080

Answers (1)

Tanaike
Tanaike

Reputation: 201378

It seems that <style> doesn't work at htmlBody of Gmail. I think that it might be removed. So please use the table tag with the style.

In your case, <style>table {border-collapse:collapse} table,td,th{border:1px solid black}</style> and <table style="width:100.0%"> can be converted to <table style="width: 100%;border-collapse: collapse;border: 1px solid black">.

The modified script is as follows.

From :

var TABLEFORMAT = '<!DOCTYPE html><html><style>table {border-collapse:collapse} table,td,th{border:1px solid black}</style>'
var pre_html = '<p>Dear '+firstName+',</p><p>Your new balance is <b>'+cashGoalPosition+'</b>. Below is a list of the invoices past due or due in the current month.</p><table style="width:100.0%"><tbody>'

To :

var TABLEFORMAT = '<!DOCTYPE html><html>'
var pre_html = '<p>Dear '+firstName+',</p><p>Your new balance is <b>'+cashGoalPosition+'</b>. Below is a list of the invoices past due or due in the current month.</p><table style="width: 100%;border-collapse: collapse;border: 1px solid black"><tbody>'

If I misunderstand your question, I'm sorry.

Upvotes: 3

Related Questions