How to get HTML code, based on a template with data from Google Sheets

0
votes

I have some HTML template. I also have a list of products with some data in my spreadsheet. I need HTML code for each of product(So I can copy&paste it where I need it). Additionally, all product data should be populated to HTML template. For example:

  1. I have some product "A" in google sheets.

    • pirce
    • color
    • size

  2. The price, color and size are inserted into my HTML template

  3. I get the HTML code.
  4. The same for product B, product C and so on

I just built some functions on JavaScript to handle some calculations, but I was not able to find how it actually works with HTML. Any high-level or preferably low-level steps are fine. Any links and / or suggestion will be also good.

1
htmlgoogle-apps-scriptgoogle-sheets
Welcome. Please add a brief description of you search/research efforts as is suggested on How to Ask. If you didn't this yet, please read developers.google.com/apps-script/guides/sheets - Rubén

1 Answers

0
votes

This function produces html for a table. Data is from a Products sheet which is shown at the bottom. Data is displayed as a dialog but could easily become a webapp.

function getProductData() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Products');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var html='<style>th,td{border:1px solid black;}</style><table><tr><th>Item</th><th>Name</th><th>Color</th><th>Size</th><th>Price</th></tr>';
  for(var i=1;i<vA.length;i++) {
    html+=Utilities.formatString('<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',vA[i][0],vA[i][1],vA[i][2],vA[i][3],vA[i][4]);
  }
  html+='</table>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'My Products');
}

This is what my Products sheet looks like:

enter image description here