在我的Google Web应用程序上建立报告历史记录 [英] Build a reporting history on my google web app
本文介绍了在我的Google Web应用程序上建立报告历史记录的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想建议我应该怎么做.
I would like some advise how I should do.
上下文: 我有一个使用Google Apps脚本构建的网络应用.我的Web应用程序占用了16张电子表格，并显示在HTML页面上.
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.
我现在的目标是建立该报告的历史记录(例如，每次单击按钮时，它会将报告保存在新链接中).
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).
我考虑了两个选择:
首先:保存html内容->创建一个新的html页面并插入html内容. (然后循环到存储库以获取链接).
First: Save html content -> create a new html page and insert the html content. ( then loop to the repository to get link).
第二:每次都保存电子表格(但是我不确定如何动态获取新电子表格的ID).
Second: Save spreadsheet each time (but I am not sure how to dynamically get the id of the new spreadsheet).
有什么建议吗?
编辑 Codes.gs//获取SpreadSheet数据.
Edit Code.gs //to get spreadSheet data.
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< datas.length; i++){
var temp = 0;
temp = getSheetDetails(datas[i]);
allSheets.push(temp);
}
return allSheets
}
Page-js//使用javascript显示我的表格
Page-js // display my tables with javascript
function genereTable(data) {
for (var index = 0; index<data.length; index++){
for (i = 0; i < 1; i++) {
var row = document.createElement("tr");
for(j = 0; j<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< data[index].length; i++) {
var rowb = document.createElement("tr");
for (j = 0; j < data[index][i].length; j++) {
var colb = document.createElement("td");
colb.textContent = data[index][i][j];
rowb.appendChild(colb);
}
arrayBody[index].appendChild(rowb);
}
}
}
html页面
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<?!= include("page-css"); ?>
</head>
<body>
<nav>
<div class="nav-wrapper" id="navbar">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#mwd" target="test" onclick="document.getElementById('mwd').scrollIntoView();">mwd</a></li>
<li><a href="#bis">Cockpipt</a></li>
<li><a href="">Gagné/Perdu</a></li>
</ul>
</div>
</nav>
<h1> Reporting</h1>
<section>
<h2> Cockpit </h2>
<div id="cps">
<table class="striped">
<thead id="table-cps-head">
</thead>
<tbody id="table-cps">
</tbody>
</table>
</div>
</section>
....
15 more tables
我成功 在ziganotschka的帮助下，我做了一个按钮，将电子表格保存在驱动器目录中
I success With the help of ziganotschka, i made a button to save my spreadsheet in an drive directory
function createSsheet(date) {
var dest = DriveApp.getFolderById("xxxxxxx");
DriveApp.getFileById(SpreadsheetApp.openByUrl("xxxx").getId()).makeCopy("Report: " + date, dest);
return true ;
}
在我的HTML页面中的链接:
in my Html page for the link :
<ul id="dropdown1" class="dropdown-content">
<? for(var i =0; i<list.length; i++) {?>
<li><a href="#" onClick="getHistory(<?=list[i]?>)" target="_self"><?= listNames[i] ?></a> </li>
<?} ?>
在我的JS上，我将旧的电子表格传递给了我的参数
on my JS i pass the old Spreadsheet on my params
function getHistory(params) {
document.getElementById("table-cps-head").innerHTML ="";
document.getElementById("table-cps").innerHTML= "";
for (var i = 0; i<arrayHead.length; i++) {
arrayHead[i].innerHTML ="";
}
for (var i = 0; i<arrayBody.length; i++) {
arrayBody[i].innerHTML ="";
}
google.script.run.withSuccessHandler(cockpitTab).withFailureHandler(oops).getCockpit(params);
google.script.run.withSuccessHandler(genereTable).withFailureHandler(oops).getallDatas(params);
}
推荐答案
您可以执行以下操作:
- 实现一个将与
google.script.run一起运行的按钮，该功能是可读取电子表格当前版本的Apps脚本功能 - 通过
withSuccessHandler转换为JS函数 - 动态创建一个链接到动态创建的新HTML页面的新按钮
- 将
data嵌入新的html页面 +每次您单击Add new Spreadsheet按钮，都会创建一个具有当前电子表格版本data的新网站-通过该网站，您可以跟踪data历史记录 - 以下代码说明了如何使用Apps脚本动态读取数据并将其传递回
html文件，该文件可用于动态创建网站和按钮-请根据您的需要进行调整 - Implement a button that will run with
google.script.runa function an Apps Script function that reads the current version of your spreadsheet - Pass the spreadsheet
datawithwithSuccessHandlerinto a JS function - Create dynamically a new button linked to a dynamically created new HTML page
- Embed
datainto the new html page +Every time you click on theAdd new Spreadsheetbutton, a new website with the current version of the spreadsheetdatawill be created - with enables you to track thedatahistory - The following code illustrates how you can dynamically read data with Apps Script and pass it back into the
htmlfile where it can be used to dynamically create websites and buttons - please adapt it to your needs
You can do the following:
var url = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
var ss = SpreadsheetApp.openByUrl(url);
var cps = ss.getSheetByName("Cockpit 2019");
var sts = ss.getSheetByName("TCD - STEAM");
var datas= [cps, sts];
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page");
return tmp.evaluate();
}
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< datas.length; i++){
var temp = 0;
temp = getSheetDetails(datas[i]);
allSheets.push(temp);
}
return allSheets
}
<body>
<input type="button" onClick="google.script.run
.withSuccessHandler(addButton)
.getallDatas()" value="Add new Spreadsheet">
<script>
function genereTable(data) {
...
}
function addButton(data) {
var d = new Date();
var newButton = document.createElement("input");
newButton.type = "button";
newButton.value = "This is the new report created on "+d;
newButton.name = "Button "+d;
newButton.onclick = function makePage(body) {
genereTable(data);
// more information how to implement a new makePage() function here: https://stackoverflow.com/questions/32379444/how-do-i-create-a-new-html-webpage-onclick
};
document.body.appendChild(newButton);
}
</script>
</body>
这篇关于在我的Google Web应用程序上建立报告历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
