title: Build a reporting history on my google web app
body: <p>I would like some advise how I should do.</p>
  
  <p>Context: 
  I have a web app that I build with Google Apps Script. My web app takes 16 sheets of my spreadsheet and display on an HTML page.</p>
  
  <p>My goal now, is to build a history of that reporting  (each time we click on a button for instance, its save reports in a new link).</p>
  
  <p>I thought about two options:</p>
  
  <p>First: Save html content -> create a new html page and insert the html content. ( then loop to the repository to get link).</p>
  
  <p>Second: Save  spreadsheet each time (but I am not sure how to dynamically get the id of the new spreadsheet).</p>
  
  <p>Any advice?</p>
  
  <p>Edit 
  Code.gs //to get spreadSheet data.</p>
  
  <pre><code>var url = "https://docs.google.com/spreadsheets/d/1klU634iH2nHNMiFeLxAL39KfV8pwoGtstEkWS21gK48/edit#gid=785104696";
  var ss = SpreadsheetApp.openByUrl(url);
  var cps = ss.getSheetByName("Cockpit 2019").getRange(9,1,27,10).getValues();
  ...
  ...
  var sts = ss.getSheetByName("TCD - STEAM");
  var datas= [wls, bss, bis, mwds,hds ,bfas,ess, its, rs, itses, secus, ddfs, d2sis, dmcs, gclouds, sts];
  
  function doGet(e) {
    var tmp = HtmlService.createTemplateFromFile("page");
  
  
  
  
    return tmp.evaluate(); 
  }
  
  function include(File) {
    return HtmlService.createHtmlOutputFromFile(File).getContent();
  };
  
  function getSheetDetails(datas) {
    var rows = datas.getLastRow();
    var cols = datas.getLastColumn();
    return datas.getRange(1,1,rows, cols).getValues();
  }
  
  function getallDatas() {
    var allSheets = []
    for(var i = 0; i&lt; datas.length; i++){
       var temp = 0;
      temp = getSheetDetails(datas[i]);
      allSheets.push(temp);
    }
  return allSheets
  }
  </code></pre>
  
  <p>Page-js // display my tables with javascript</p>
  
  <pre><code> function genereTable(data) {
          for (var index = 0; index&lt;data.length; index++){
                for (i = 0; i &lt; 1; i++) {
                    var row = document.createElement("tr");
                    for(j = 0; j&lt;data[index][i].length; j++) {
                        var col = document.createElement("th");
                        col.textContent = data[index][i][j];
                        row.appendChild(col);
                 }
                    arrayHead[index].appendChild(row);
              }
  
              for (i = 1; i&lt; data[index].length; i++) {
                  var rowb = document.createElement("tr");
                  for (j = 0; j &lt; data[index][i].length; j++) {
                      var colb = document.createElement("td");
                      colb.textContent = data[index][i][j];
                      rowb.appendChild(colb);
              }
              arrayBody[index].appendChild(rowb);
          }
      }         
  }
  </code></pre>
  
  <p>html page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base target="_top"&gt;
        &lt;!-- Compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
       &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
         &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
   &lt;?!= include("page-css"); ?&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
    &lt;nav&gt;
      &lt;div class="nav-wrapper" id="navbar"&gt;
        &lt;a href="#" class="brand-logo"&gt;Logo&lt;/a&gt;
        &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
          &lt;li&gt;&lt;a href="#mwd" target="test" onclick="document.getElementById('mwd').scrollIntoView();"&gt;mwd&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#bis"&gt;Cockpipt&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Gagné/Perdu&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;h1&gt; Reporting&lt;/h1&gt;
    &lt;section&gt;
      &lt;h2&gt; Cockpit &lt;/h2&gt;
      &lt;div id="cps"&gt;
         &lt;table class="striped"&gt;
           &lt;thead id="table-cps-head"&gt;
           &lt;/thead&gt;
          &lt;tbody id="table-cps"&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;/section&gt;
  ....
  15 more tables
  </code></pre>
  
  <p>EDIT: I success
  With the help of ziganotschka, i made a button to save my spreadsheet in an drive directory </p>
  
  <pre><code>function createSsheet(date) {
    var dest = DriveApp.getFolderById("xxxxxxx");
    DriveApp.getFileById(SpreadsheetApp.openByUrl("xxxx").getId()).makeCopy("Report: " + date, dest);
    return true ;
  } 
  </code></pre>
  
  <p>in my Html page for the link :</p>
  
  <pre><code> &lt;ul id="dropdown1" class="dropdown-content"&gt;
    &lt;? for(var i =0; i&lt;list.length; i++) {?&gt;
    &lt;li&gt;&lt;a href="#" onClick="getHistory(&lt;?=list[i]?&gt;)" target="_self"&gt;&lt;?= listNames[i] ?&gt;&lt;/a&gt; &lt;/li&gt;
    &lt;?} ?&gt;
  </code></pre>
  
  <p>on my JS i pass the old Spreadsheet on my params</p>
  
  <pre><code>function getHistory(params) {
     document.getElementById("table-cps-head").innerHTML ="";
     document.getElementById("table-cps").innerHTML= "";
     for (var i = 0; i&lt;arrayHead.length; i++) {
         arrayHead[i].innerHTML ="";
      }
     for (var i = 0; i&lt;arrayBody.length; i++) {
         arrayBody[i].innerHTML ="";
      }
  
      google.script.run.withSuccessHandler(cockpitTab).withFailureHandler(oops).getCockpit(params);
      google.script.run.withSuccessHandler(genereTable).withFailureHandler(oops).getallDatas(params);
  
  }
  
  </code></pre>