浏览器在Google Apps脚本中弹出 [英] Browser Pop up in Google Apps Script

问题描述

背景：我已经在Google应用程序脚本中的HTML服务中准备了一个表单，我用Code.gs中的DoGet函数调用这个表单。

 我的doget函数
函数doGet（）{
返回HtmlService.createTemplateFromFile（'HTMLUI'）。评估（）; 
} 
  

发布后，它会显示一个简单的浏览器表单，包含一些标签，输入框，提交，重置并找到它上面的按钮。用户将输入信息点击提交，数据将存储在电子表格（后台）中。 - 正常工作到这里。

现在，当用户点击查找按钮 - 弹出一种窗口需要填充时，在这个弹出窗口中，用户可以输入信息（从下拉菜单中）并将所选条目填充回输入框中，然后再次修改并提交。

问题：

<

我的HTML服务中的find按钮如下所示：

 < div>< input type =buttononclick =createPopup（）value =Find>< / div> 
  

最后调用javascript：

 < script type =text / javascript> 
函数createPopup（）{
 google.script.run.popup（document.forms [0]）; 
} 
< / script> 
  

CreatePopup（）javascript代码：

 函数popup（表单）{
 Logger.log（我第一次调用）; 
 // Mycode应该可能在这里我想... 
 Logger.log（我上次被调用）; 
} 
  

当查看日志时，显示我第一次打电话和我我的研究：
我发现Spreadsheet.toast（类似这样的）可以在电子表格上工作，但是我怎样才能得到小的窗口在浏览器上。

解决方案

jQuery对话框将满足您的需求。这是一个覆盖当前窗口 - 不是弹出。

演示代码可以很容易地适应Google Apps脚本。在这里，大部分额外的位被删除：

Code.js

 函数doGet （）{
 var template = HtmlService 
 .createTemplateFromFile（'ModalForm'）; 
 
 var htmlOutput = template.evaluate（）
 .setSandboxMode（HtmlService.SandboxMode.NATIVE）
 .setTitle（'jQuery UI Dialog  -  Modal form'）; 
 
返回htmlOutput; 
 
 $ / code> 





ModalForm.html

 <！ - 改编自http://jqueryui.com/dialog/#modal-form  - > 
 
< link rel =stylesheethref =https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/> 
< script src =https://code.jquery.com/jquery-1.9.1.js>< / script> 
< script src =https://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script> 
 
< script> 
 $（函数（）{
 var name = $（#name），
 email = $（#email），
 password = $（#password ），
 allFields = $（[]）.add（name）.add（email）.add（password），
 tips = $（.validateTips）; 
 function updateTips （t）{
 tips 
 .text（t）
 .addClass（ui-state-highlight）; 
 setTimeout（function（）{
 tips。 $ {
}，500）; 
} 
 $（＃dialog-form）.dialog（{
 autoOpen： false，
 height：300，
 width：350，
 modal：true，
按钮：{
添加用户：function（）{
 （bValid）{
 $（#users tbody）.append（< （+）+ 
< td>+ name.val（）+< / td>+ 
< td>+ email.val（） （+）< / td>+ 
< td>+ password.val（）+ .dialog（close）; 
} 
}，
取消：function（）{
 $（this）.dialog（close ）; 
 
 
 close：function（）{
 allFields.val（）.removeClass（）; 
} 
}）; 
 $（＃form-action）
 .button（）
 .click（function（）{
 $（＃dialog-form）.dialog（open ）; 
}）; 
}）; 
< / script> 
 
<！ -  body  - > 
< div id =dialog-formtitle =新建用户> 
< form> 
< fieldset> 
< label for =name>名称< / label> 
< input type =textname =nameid =nameclass =text ui-widget-content ui-corner-all/> 
< label for =email>电子邮件< / label> 
< input type =textname =emailid =emailvalue =class =text ui-widget-content ui-corner-all/> 
< label for =password>密码< / label> 
< input type =passwordname =passwordid =passwordvalue =class =text ui-widget-content ui-corner-all/> 
< / fieldset> 
< / form> 
< / div> 
< div id =users-containsclass =ui-widget> 
< h1>现有使用者：< / h1> 
< table id =usersclass =ui-widget ui-widget-content> 
< thead> 
< tr class =ui-widget-header> 
< th>名称< / th> 
< th>电子邮件< / th> 
< th>密码< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> John Doe< / td> 
< td> [e-mail]< / td> 
< td> johndoe1< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< button id =form-action>打开模态表单< / button> 
  

Background: I have prepared a form in HTML Service in Google apps script which I call with DoGet function from Code.gs.

my doget function
function doGet() {
  return HtmlService.createTemplateFromFile('HTMLUI').evaluate();
}

Once published it presents a simple browser form with some labels, input box, submit, reset and find buttons on it. The user(s) will input information click submit and the data will get stored in a spreadsheet (background). - Working fine till here.

Now when the user clicks find button - a popup kind of window needs to populated, in this popup user can enter information (from a dropdown) and the selected entry would be populated back in the input boxes which can be amended and submitted again.

Question:

How can I have a POP up kind off window in GAS when on browser.

my find button in HTML service is as follows:

<div><input type="button" onclick="createPopup()" value="Find"></div>

in end for calling the javascript:

<script type="text/javascript">
        function createPopup() {
        google.script.run.popup(document.forms[0]);
    }
</script>

the CreatePopup()javascript code:

function popup(form){
Logger.log("I am first called");
//Mycode should probably go here I think...  
Logger.log("I am last called");
}

When the log is viewed it shows "I am first called" and "I am last called".

My research: I found that the Spreadsheet.toast (something like this) works on spreadsheet, but how do I get the small window on browser..

解决方案

A jQuery dialog will suit your needs. It is an overlay to the current window - not a "pop up".

The demo code here can be easily adapted to Google Apps Script. Here it is, with much of the extra bits removed:

Code.js

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('ModalForm');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('jQuery UI Dialog - Modal form');

  return htmlOutput;
}

ModalForm.html

<!-- Adapted from http://jqueryui.com/dialog/#modal-form -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add User": function() {
var bValid = true;
allFields.removeClass( );
// validation removed
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass(  );
}
});
$( "#form-action" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>

<!-- body -->
<div id="dialog-form" title="Create new user">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[e-mail]</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="form-action">Open Modal Form</button>

这篇关于浏览器在Google Apps脚本中弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！