将侧边栏的html表单传递给Google脚本

我在这方面遇到了困难......我阅读了文档，但无法完成此操作。将侧边栏的html表单传递给Google脚本

我想在Google文档的侧栏中创建一个小的html表单。此表单将从联系人中提取联系人组，以便用户可以选择一个并将t传递给我的脚本。

这是我做了什么：

page.html中

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" /> 
    </body> 
</html>

menu.gs

function doGet() { 
    return HtmlService 
     .createTemplateFromFile('Page') 
     .evaluate(); 
} 

function onOpen() { 
    DocumentApp.getUi() // Or DocumentApp or FormApp. 
     .createMenu('Custom Menu') 
     .addItem('Show sidebar', 'showSidebar') 
     .addToUi(); 

} 

function showSidebar() { 

    var html = HtmlService.createHtmlOutputFromFile('Page') 
     .setTitle('Chose the Contact Group') 
     .setWidth(300); 

    var groups = ContactsApp.getContactGroups(); 

    // add this to the html file Page.html 
    html.append ('<form onsubmit="google.script.run.myFunction(formObject)">'+ 
       '<select>'); 

    for (var i = 0; i < groups.length; i++) { 
    html.append('<option name="chosenGroup" value="' + groups[i].getName() + '">' + groups[i].getName() + '</option>'); 
    } 

    html.append('</select><input type="submit">'); 

    //this is commented because I was testing it 
    //html.append("<script>function handleFormSubmit(formObject) { google.script.run.myFunction(formObject); } </script>"); 

    DocumentApp.getUi() // Or DocumentApp or FormApp. 
     .showSidebar(html); 

}

Code.gs

myFunction (formObject) { 

Logger.log(formObject.chosenGroup); 

}

当我点击提交按钮一个新的空白页面打开一个url like：

https://n-wuewuewuee98efgdsf98769s8d76f9s76df-0lu-script.googleusercontent.com/userCodeAppPanel？

来源

2017-06-12 Kintaro

发生这种情况是因为'form'标记的'action'属性。当您提交表单时，浏览器会重定向到'action'属性中指定的路由。通常，此URL模式将映射到接收表单发布的数据的服务器上的代码。

有在你的代码的其他问题，应首先解决：

1）只有当你部署脚本的Web应用程序需要使用doGet（）函数。 doGet（）中的代码在浏览器中打开该应用的URL时执行，即向应用发送“GET”请求。你的脚本是文档绑定的，所以不需要doGet（）

2）你的业务逻辑的各个方面。 showSideBar（）必须完成它应该做的事情，即显示侧边栏。 getContactGroups（）必须返回联系人组数组等。

3）请记住，您可以将变量传递到HTML页面并使用模板化HTML动态创建UI。不需要逐行添加！ https://developers.google.com/apps-script/guides/html/templates

4）最后，重定向到另一个页面可以很容易地通过使用jQuery来解决。

请参阅下面的示例代码。我的脚本是电子表格绑定的，所以您只需用DocumentApp替换SpreadsheetApp即可。

服务器代码（main.gs）

function onOpen(){ 

var ui = SpreadsheetApp.getUi(); 

ui.createMenu('Menu') 
    .addItem('Show sidebar', 'showSidebar') 
    .addToUi(); 


} 


function showSidebar() { 

var ui = SpreadsheetApp.getUi(); 
var template = HtmlService.createTemplateFromFile('sidebar'); 

template.contactGroups = getContactGroups(); //adding contactGroups as a property of the template object. 

ui.showSidebar(template.evaluate()); //Calling evaluate() executes the inline JS code in sidebar.html, populating the dropdown list 


} 

function getContactGroups(){ 

try { 

var contactGroups = ContactsApp.getContactGroups(); 

} catch(error) { 

Logger.log(error); 

} 

return contactGroups; 

} 

function processFormResponse(formObject){ 


Logger.log(formObject.chosenGroup); 



}

而这里的sidebar.html。请注意html文件内联代码的特殊语法。调用e.preventDefault（）负责重定向到另一个页面。由于我们将contactGroups作为属性添加到模板对象，因此在调用evaluate（）时此变量将可用。下面的内联代码将动态填充组名称的下拉列表。

<!DOCTYPE html> 
    <html> 
     <head> 
     <base target="_top"> 
     </head> 
     <body> 
     Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" /> 

     <form> 
     <select name="chosenGroup"> 

     <? for (var i=0; i < contactGroups.length; i++) { ?> 

     <option value="<?= contactGroups[i].getName()?>"><?= contactGroups[i].getName()?></option> 


     <?}?> 
     </select> 
     <input type="submit" value="Submit"> 
     </form> 



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script> 

     $(document).ready(function(){ 

       $('form').submit(function(e){ 

       e.preventDefault(); 

       google.script.run.processFormResponse(this); 


       }); 


     }); 

     </script> 


     </body> 
    </html>

UPDATE

没有什么特别之处jQuery的。这是一个JS库，旨在简化DOM树的导航，但它是建立在浏览器中相同的DOM API之上的。长话短说，你不需要jQuery来实现这个结果。 1）为您的'表单'标签指定一个唯一的ID，例如

<form id="form">

2）创建一个函数，将事件侦听器添加到侦听'submit'事件的表单中。第二个参数是事件处理函数。使用'点击'而不是'submit'会强制你通过id引用文本字段并获取用户输入来手动创建表单对象。

<script> 
     function addEventListeners() { 

     document.getElementById('form').addEventListener('submit', function(e){ 

     e.preventDefault(); 
     google.script.run.processFormResponse(this); 


     }); 



     } 
     </script>

最后，在加载时调用该函数。

<body onLoad="addEventListeners()">

我在前面的例子中的jQuery代码做了完全相同的事情，但是更易于阅读和维护。

来源

2017-06-12 16:42:44

谢谢安东，它工作，但我不能'理解为什么我们需要jQuery在这里，是不可能添加“google.script.run.processFormResponse（this）;”在onlick？但也许我误解了这个页面：https：//developers.google.com/apps-script/guides/html/communication#forms（用于网络应用程序，而不是形式绑定脚本，对吧？） – Kintaro

请参阅更新的答案。 –

将侧边栏的html表单传递给Google脚本

回答

相关问题