如何使用HtmlService运行服务器端功能 [英] How do I run Server-side functions using HtmlService
问题描述
我是编程新手，我试图用jQuery使用Google-apps-script连接几个按钮。我有一个电子表格和一个菜单添加到它打开HtmlService对话框。
在对话框中，我有两个按钮，一个关闭对话框，另一个执行一个服务器功能，目前只将hello world写入单元格a1。close按钮可以完美地工作，然而更新似乎没有做任何事情，我不太清楚如何调试客户端。
< script>
$ （document）.ready（function（）{
$（＃update）。click（function（）{
var params = {}
params.url = $ （#url）。val（）
params.owner = $（＃owner）。val（）
params.type = type
google.script.run.update params）;
}）;
$（＃close）。click（function（）{
//这个是有效的，为什么不是update按钮？
google.script.host.close（）
}）
}）
< / script>
<标题> ; AJAXtabs.html< /标题>
< / head>
< body>
< div id =content>
< table border =1>
< tr>
< th><？= type？> URL< / th>
< td>< input type =textid =urlname =url>< / td>
< / tr>
< tr>
新所有者电子邮件地址< / th>
< td>< input type =textid =ownerEmailname =ownerEmail>< / td>
< / tr>
< tr>
< / table>
< / div>
< div id =message>
< / div>
< / body>
< / html>
Code.gs摘录
function update（params）{
var sheet = SpreadsheetApp.getActiveSpreadsheet（）。getSheets（）[0];
var row = sheet.getLastRow（）
var col = sheet.getLastColumn（）
sheet.getRange（'a1'）。setValue（'Hello world !!'）
}
函数onOpen（）{
var ss = SpreadsheetApp.getActiveSpreadsheet（）;
var menuEntries = [];
//当用户点击addMenuExample，然后菜单条目1时，函数function1是
//执行。
menuEntries.push（{name：Set file，functionName：fileUi}）;
menuEntries.push（null）; // line separator
menuEntries.push（{name：Set Folder，functionName：folderUi}）;
ss.addMenu（Setters，menuEntries）;
}
function fileUi（）{
var htmlApp = HtmlService.createTemplateFromFile（'View template'）
htmlApp.type ='File';
SpreadsheetApp.getActiveSpreadsheet（）。show（htmlApp.evaluate（）。setHeight（300）.setTitle（'Chan ge Owner'））;
$ b函数folderUi（）{
var htmlApp = HtmlService.createTemplateFromFile（'View template'）
htmlApp.type ='文件夹'
SpreadsheetApp.getActiveSpreadsheet（）。show（htmlApp.evaluate（））;
以下是您的修改版本html和gs文件，其中两个按钮都起作用。我相信唯一需要改变的是包含jQuery库。
调试
一般在调试器/ IDE中，调试客户端函数的最佳位置是使用适当的技术。您可以在 为了支持调试，此脚本依赖Peter Herrmann的 BetterLog库。您需要通过资源 - 管理库...将其添加到您的项目中。有了它，再加上下面的帮助函数，您将有一种有效的方式记录客户端和服务器端功能的操作。 （因为您已经在使用电子表格了，您可以登录到该工具...该工具将创建一个新标签。） 额外使用BetterLog为您提供在多个平台或环境中跟踪执行的方式，比内置Logger具有更好的历史记录。这个例子几乎没有涉及到该工具的功能 - 但它对于大多数用途来说已经足够了！ 为了说明，各种日志消息已经存在。 > 示例日志
2013-07-31 00：02：17：332 -0400 000128 INFO in ready
2013-07-31 00：02：17：419 -0400 000094 INFO在html脚本中
2013-07-31 00:02:23 ：508 -0400 000178 INFO in update.click
2013-07-31 00：02：24：081 -0400 000163更新信息（服务器）
2013-07-31 00:02:24： 104 -0400 000186 INFO {url：adsfasdfsad，owner：null，type：null}
2013-07-31 00：02：24：166 -0400 000248 INFO完成更新）
2013-07-31 00：03：14：355 -0400 000248 close.click中的信息
Code.gs
Logger = BetterLog.useSpreadsheet（' - Spreadsheet-ID--'）;
$ b $ / **
*通过
* google.script.run.log（字符串）使BetterLogger可用于客户端脚本。
* /
函数log（字符串）{
Logger.log（string）;
}
function update（params）{
Logger.log（'in update（server）'）;
Logger.log（JSON.stringify（params））;
var sheet = SpreadsheetApp.getActiveSpreadsheet（）。getSheets（）[0];
var row = sheet.getLastRow（）
var col = sheet.getLastColumn（）
sheet.getRange（'a1'）。setValue（'Hello world !!'）
Logger.log（'done update（server）'）;
函数onOpen（）{
var ss = SpreadsheetApp.getActiveSpreadsheet（）;
var menuEntries = [];
//当用户点击addMenuExample，然后菜单条目1时，函数function1是
//执行。
menuEntries.push（{
name：Set file，
functionName：fileUi
}）;
menuEntries.push（null）; //行分隔符
menuEntries.push（{
name：Set Folder，
functionName：folderUi
}）;
ss.addMenu（Setters，menuEntries）;
}
function fileUi（）{
var htmlApp = HtmlService.createTemplateFromFile（'View template'）
htmlApp.type ='File';
var html = htmlApp.evaluate（）
.setSandboxMode（HtmlService.SandboxMode.NATIVE）
.setHeight（300）
.setTitle（'Change Owner'）;
SpreadsheetApp.getActiveSpreadsheet（）。show（html）;
$ b函数folderUi（）{
var htmlApp = HtmlService.createTemplateFromFile（'View template'）
htmlApp.type ='Folder'
var html = htmlApp.evaluate（）
.setSandboxMode（HtmlService.SandboxMode.NATIVE）
.setHeight（300）
.setTitle（'Change Owner'）;
SpreadsheetApp.getActiveSpreadsheet（）。show（html）;
}
查看template.html
< div id =content>
< table border =1>
< tr>
< th><？= type？> URL< / th>
< td>< input type =textid =urlname =url>< / td>
< / tr>
< tr>
新所有者电子邮件地址< / th>
< td>< input type =textid =ownerEmailname =ownerEmail>< / td>
< / tr>
< tr>
< td colspan =2id =buttonRow>
< button id =updatetype =button>更新< / button>
< button id =closetype =button>关闭< / button>
< / td>
< / tr>
< / table>
< / div>
< div id =message>
< / div>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script>
google.script.run.log（在html脚本中）;
$（document）.ready（function（）{
google.script.run.log（in ready）;
$（＃update）。click （function（）{
google.script.run.log（in update.click）;
var params = {}
params.url = $（＃url）。 val（）
params.owner = $（＃owner）。val（）
params.type = type
google.script.run.update（params）;
（））;
$（＃close）。click（function（）{
google.script.run.log（in close.click）;
google .script.host.close（）
}）
}）
< / script>
I am new to programming and I am trying to wire up a couple of buttons with jQuery using Google-apps-script. I have a spread sheet and a menu added to it the opens a dialog box from HtmlService.
In the dialog box I have two buttons, one closes the dialog the other executes a server function, which for now only writes "hello world to cell a1. The "close" button works perfectly, however the "update" doesn't seem to do anything. I'm not exactly sure how to debug the client-side.
<script>
$(document).ready(function(){
$("#update").click(function (){
var params = {}
params.url = $("#url").val()
params.owner = $("#owner").val()
params.type = type
google.script.run.update(params);
});
$("#close").click(function(){
// This one works. why not the "update" button???
google.script.host.close()
})
})
</script>
<title>AJAXtabs.html</title>
</head>
<body>
<div id="content">
<table border="1">
<tr>
<th><?= type ?>URL</th>
<td><input type="text" id="url" name="url"></td>
</tr>
<tr>
<th>New Owner email</th>
<td><input type="text" id="ownerEmail" name="ownerEmail"></td>
</tr>
<tr>
<td colspan="2" id="buttonRow" ><button id="update" type="button" >Update</button><button id="close" type="button">Close</button></td>
</tr>
</table>
</div>
<div id="message">
</div>
</body>
</html>
Code.gs excerpt
function update(params){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
var row = sheet.getLastRow()
var col = sheet.getLastColumn()
sheet.getRange('a1').setValue('Hello world!!')
}
function onOpen() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var menuEntries = [];
// When the user clicks on "addMenuExample" then "Menu Entry 1", the function function1 is
// executed.
menuEntries.push({name: "Set file", functionName: "fileUi"});
menuEntries.push(null); // line separator
menuEntries.push({name: "Set Folder", functionName: "folderUi"});
ss.addMenu("Setters", menuEntries);
}
function fileUi(){
var htmlApp = HtmlService.createTemplateFromFile('View template')
htmlApp.type = 'File';
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp.evaluate().setHeight(300).setTitle('Chan ge Owner'));
}
function folderUi(){
var htmlApp = HtmlService.createTemplateFromFile('View template')
htmlApp.type = 'Folder'
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp.evaluate());
}
Below are modified versions of your html and gs files, in which both buttons work. I believe that the only thing that needed to change was the inclusion of the jQuery library.
Debugging
Generally speaking, the best place to debug your client-side functions is in the debugger / IDE, using the techniques appropriate there. You may find some ideas that help you in this tutorial, and these answers:
- Stepping through code in Google Apps Script (equivalent VBA-GAS )
- How can I test a trigger function in GAS?
To support debugging, this script relies on Peter Herrmann's BetterLog library. You will need to add that to your project, by "Resources - Manage Libraries...". With it, plus the helper function included below, you will have an effective way to log operations of both your client and server side functions. (Since you're using a spreadsheet already, you can log to it... the utility will create a new tab.)
The additional use of BetterLog gives you a way to trace execution across multiple platforms or environments, with better history keeping than the built-in Logger. This example is barely scratching the surface of what that utility does - but it's enough for most purposes!
Various log messages have been left in place, to illustrate.
Example Logs
2013-07-31 00:02:17:332 -0400 000128 INFO in ready
2013-07-31 00:02:17:419 -0400 000094 INFO In html script
2013-07-31 00:02:23:508 -0400 000178 INFO in update.click
2013-07-31 00:02:24:081 -0400 000163 INFO in update (server)
2013-07-31 00:02:24:104 -0400 000186 INFO {"url":"adsfasdfsad","owner":null,"type":null}
2013-07-31 00:02:24:166 -0400 000248 INFO done update (server)
2013-07-31 00:03:14:355 -0400 000248 INFO in close.click
Code.gs
Logger = BetterLog.useSpreadsheet('--Spreadsheet-ID--');
/**
* Make BetterLogger available to client-side scripts, via
* google.script.run.log(string).
*/
function log(string) {
Logger.log(string);
}
function update(params){
Logger.log('in update (server)');
Logger.log(JSON.stringify(params));
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
var row = sheet.getLastRow()
var col = sheet.getLastColumn()
sheet.getRange('a1').setValue('Hello world!!')
Logger.log('done update (server)');
}
function onOpen() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var menuEntries = [];
// When the user clicks on "addMenuExample" then "Menu Entry 1", the function function1 is
// executed.
menuEntries.push({
name: "Set file",
functionName: "fileUi"
});
menuEntries.push(null); // line separator
menuEntries.push({
name: "Set Folder",
functionName: "folderUi"
});
ss.addMenu("Setters", menuEntries);
}
function fileUi() {
var htmlApp = HtmlService.createTemplateFromFile('View template')
htmlApp.type = 'File';
var html = htmlApp.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.setHeight(300)
.setTitle('Change Owner');
SpreadsheetApp.getActiveSpreadsheet().show(html);
}
function folderUi() {
var htmlApp = HtmlService.createTemplateFromFile('View template')
htmlApp.type = 'Folder'
var html = htmlApp.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.setHeight(300)
.setTitle('Change Owner');
SpreadsheetApp.getActiveSpreadsheet().show(html);
}
View template.html
This has been restructured as per the best practices, and of course log messages are included.
<div id="content">
<table border="1">
<tr>
<th><?= type ?>URL</th>
<td><input type="text" id="url" name="url"></td>
</tr>
<tr>
<th>New Owner email</th>
<td><input type="text" id="ownerEmail" name="ownerEmail"></td>
</tr>
<tr>
<td colspan="2" id="buttonRow" >
<button id="update" type="button" >Update</button>
<button id="close" type="button">Close</button>
</td>
</tr>
</table>
</div>
<div id="message">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
google.script.run.log("In html script");
$(document).ready(function(){
google.script.run.log("in ready");
$("#update").click(function (){
google.script.run.log("in update.click");
var params = {}
params.url = $("#url").val()
params.owner = $("#owner").val()
params.type = type
google.script.run.update(params);
});
$("#close").click(function(){
google.script.run.log("in close.click");
google.script.host.close()
})
})
</script>
这篇关于如何使用HtmlService运行服务器端功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
