Generate html table from getValues function in google web app

Question

Now I have work funktion that take Values from google spreadshet table, and return it in google web app. But it have non table view. How I can represented it as html table?

code.gs

//generate web-app
            function doGet() {
              return HtmlService.createHtmlOutputFromFile('index');
            }

            function returnCellValue(range1) {
              return SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output').getRange(range1).getValues();
            }

            function test1() {
              var ss =  SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output');
              returnCellValue('A2:E10');
            }

//get data from form
            function emailTech(form){
              var ss =  SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output');
              var nameBox = form.techEmail;
              ss.getRange("A1").setValue(nameBox);
            }

index.html

<script type="text/javascript">
function onSuccess(B2Value) {
document.getElementById('output').innerHTML = B2Value;
}

google.script.run.withSuccessHandler(onSuccess).returnCellValue('A2:E10');

 function formSubmit() {
            google.script.run.emailTech(document.forms[0]);
        }
</script>

<div id="output">1</div> 
     <form>
       <input type="text" value=" " name="techEmail" />
       <input type="button" onClick="formSubmit(); google.script.run.test1(); google.script.run.withSuccessHandler(onSuccess).returnCellValue('A2:E10'); google.script.run.emailTech(document.forms[0])" value="Show" />
     </form>

It's all work fine, I publish it like web app and input in text box number from table on sheet 'data' (1024, 9710, 00/, etc.), then this number set in A1 on sheet 'output' and from this sheet i pull data to web app but it all look like simple text, not table. How to display it in table view?

link on web app https://script.google.com/macros/s/AKfycbwYkJfplYLVEaXy9FVV5b6BrXkZ6bPmF5ZHrlzrpuQ/dev

Robin Gertenbach · Accepted Answer · 2016-10-21 08:10:16Z

3

You didn't convert your data to an HTML table.

try converting B2Value to an html table before setting writing it to the output element.

Here's a primitive function:

function toHTMLTable(a) {
  var content = a.map(function(row, i) {
    var rowHTML = row.map(function (col) {
      return "<td>" + col + "</td>";
    }).join("");

    return "<tr>" + rowHTML + "</tr>";
  }).join("");
  return "<table>" + content + "</table>";
}

answered Oct 21, 2016 at 8:10

Robin Gertenbach

10.9k3 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Davagaz Over a year ago

thank you for your answer, but I have one question: How I should to embed toHTMLTable in code? I understand, that onSuccess(B2Value) get data from spreadsheet, returnCellValue('A2:H6') send it to html but not in html format, and your function convert it in html. But, I try to use onSuccess then send it to toHTMLTable and then show it in html. But I don't understand how use variables B2Value; a; range1 properly?

Robin Gertenbach Over a year ago

function onSuccess(x){var table=toHTMLTable(x); document.getElementById('output').innerHTML = table;}

Davagaz Over a year ago

Wow! Thank you Robin! It's work perfect! I shall now make a style for the table and get the full app!

Collectives™ on Stack Overflow

Generate html table from getValues function in google web app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related