一个如何使用Google UI Builder和Apps脚本的清晰例子 [英] a clear example of how to use Google UI Builder and Apps script

问题描述

我到处搜索，无法找到如何使用Google Apps UI Builder和应用程序脚本的清晰示例。我不知道我错过了什么。我认为这应该很简单：v / YES，我已经阅读过所有的Google文档，看过vids等等 - 有几次 - 没有GUIB（emu的UI Builder）和回调处理函数的组合，我可以找到。

编辑：有SpreadSheets的示例 - 不是GSites

我需要做的是：

我想嵌入一个文本框和按钮，以便在用户的Google网站页面上收集搜索短语。我用一个流程面板，文本框和按钮构建了非常简单的用户界面，但无论我做什么，都只能从Logger.log（）返回未定义（请参阅​​下面的代码）。

有点咆哮：

我一直非常小心地命名，并用正确的名字来呼叫。我试过在GUIB中使用一个formpanel，但你只能在其中放置一个小部件？！ ...一个提交按钮只会进入一个窗体 - 呵呵 - 我不能把我的文本框放在里面！？ （为什么还要用formpanel - 我不明白！...是的，我知道doPost（）自动被提交时调用）。我希望这些小部件保持活动状态，并且在一次使用后不会消失，所以也许formpanel / submitbutton无法正常工作 - 或者不是正确的方法吗？

商业用途：

无论如何，我尝试的是将常规按钮和文本下面的代码在流程面板中的框...

编辑：我在这里删除了我的原始内容并重新发布此部分...

  // Google Sites和UIBuilder（GUIB） -  kgingeri（Karl）
 //  - 此脚本嵌入GSite页面通过：插入 - > Apps脚本小工具。 
 // 
 //使用GUIB我已经定义了：
 //  - 一个名为'pnlMain'的FlowPanel 
 //  - 在一个名为'tbxQuery'的文本框和一个名为'btnSearch'
 //  - 对于btnSearch，我已经定义了一个回调函数
 // btnSearchHandler（请参阅下面的doGet（））。 b $ b //并输入'tbxQuery'
 // 
 // GUIB compnent树看起来像这样... 
 // 
 // [ - ] testGui 
 // [ - ] pnlMain 
 // btnSearch 
 // tbxQuery 
 // 
 // btnSearch事件部分看起来像这样... 
 // 
 //事件
 //在鼠标点击
 // [X] [btnSearchHandler] [ - ] 
 // [tbxQuery]<  - '
 / / [添加服务器] 
 // ... 
 // 
 //所以... 
 // 1）当页面打开时，doGet（）函数是称为，显示已定义的UI 
 // 2）文本输入到文本框中并单击按钮
 // 3）tbxQuer中的数据y是** SUPPOSED TO BE **返回为e.parameter.tbxQuery 
 //在函数'btnSearchHandler（e）'中** **但不是**：v（
 // 
 //（此功能似乎在电子表格中工作？！ - 奇怪？！）
 
 // 
 // [预定义函数---谷歌在页面打开时调用] 
 // 
 // ...这个工作原理'as advertised'; v）
 // 
函数doGet（e）{
 var app = UiApp.createApplication（）; 
 app.add（app.loadComponent（testGui））; // ...在G / UIBuilder中显示的标题
返回应用程序; 
} 
 
 // 
 // [单击按钮时的回调函数] 
 // 
 // ...我总是得到'Resp ：在视图中返回[未定义]  - >记录菜单？！ 
 // ...我也尝试将'pnlMain'放入事件[+]参数中，否则：v（
 // 
 function btnSearchHandler（e）{
 var resp = e.parameter.tbxQuery // ...我想在textBox小部件中获得的数据
 Logger.log（'Resp：['+ e.parameter.tbxQuery +']'）; 
 // ...更多的代码来，一旦这个工程！
} 
  

我也尝试添加代码来手动设置doGet（）中的处理程序等，并且不使用GUIB Event设置，但也无济于事。

结论？

给出的是什么？我必须手动编写GUI并且不使用GUIB吗？我知道这次很简单，但是如果我能做到这一点，我肯定会看到更好的

感谢您的阅读！

解决方案

这是一个共享电子表格，其中包含（创建它的一个副本，使它可编辑）或看到它工作在这里，我想你可能会相信GUI建设者是一个非常强大的工具。

I have searched everywhere and cannot find a clear example of how to use Googles UI Builder and apps script. I have no clue what I'm missing. I think this should be simple :v/ YES, I've read all Googles docs, watched vids etc - several times - there is no combination of GUIB (Google's UI Builder) and a callback handler function, that I can find.
EDIT: there are examples for SpreadSheets - not GSites

What I need to do:
I would like to embed a textbox and button to collect a search phrase from a user, on a Google site page. I have built the very simple UI with a single flowpanel, textbox and button, but can only ever get "Undefined" returned from Logger.log() no matter what I do (see code below).

A bit of a rant:
I have been very careful to name, and call by the right names. I've tried using a formpanel BUT in GUIB, you can only put ONE widget in it?! ...AND a submit button will only go into a formpanel - huh - I can't put my text box in as well!? (Why bother with the formpanel then - I don't get that! ...yeah I know about doPost() automatically being called on submit). I want the widgets to remain active and not disappear after one use, so maybe formpanel/submitbutton won't work anyway - or isn't the right way to do it?

Down to business:
At any rate, what I've tried is to put the regular button and text box in a flowpanel with the following code...
EDIT: I deleted my original content here and reposted this section...

// Google Sites and UIBuilder (GUIB) - kgingeri (Karl)
// - this script is embedded in a GSite page via: Insert -> Apps Script Gadget.
//
// Withing GUIB I have defined:
// - a FlowPanel named 'pnlMain'
// - inside that a textBox named 'tbxQuery' and a button called 'btnSearch'
// - for btnSearch, I have defined (in the Events subsection) a callback function
//   btnSearchHandler (see it below doGet() here.  I expanded the [+] beside that
//   and entered 'tbxQuery'    
//
// the GUIB compnent tree looks like this...
//
//  [-] testGui
//    [-] pnlMain
//          btnSearch
//          tbxQuery
//
// btnSearch Event section looks something like this...
//
// Events
//  On Mouse Clicks
//  [X][btnSearchHandler][-]
//  [tbxQuery         ]<--'
//  [Add Server]
//  ...
//
// So... 
// 1) when the page is opened, the doGet() function is called, showing the defined UI 
// 2) when text is entered into the textBox and the button is clicked
// 3) the data from tbxQuery is **SUPPOSED TO BE** returned as e.parameter.tbxQuery
//    in the function 'btnSearchHandler(e)' **BUT IS NOT**  :v(
//
// (this functionality appears to work in a spreadsheet?! - weird?!)

//
//    [ predefined function --- Google calls on page open ]
//
// ...this works 'as advertised' ;v)
//
function doGet(e) {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("testGui"));  // ...the title that shows in G/UIBuilder
  return app;
}

//
//    [ callBack for when a button is clicked ]
//
// ...I always get 'Resp: [Undefined]' returned in the View -> Logs menu?!
// ...I also tried to put 'pnlMain' in the Event [+] param, no go :v(
//
function btnSearchHandler(e) {
  var resp = e.parameter.tbxQuery  // ...the data I want in the textBox widget
  Logger.log('Resp: [' + e.parameter.tbxQuery + ']');
  // ...more code to come, once this works!
}

I've also tried adding code to manually set handlers etc in doGet(), and not use GUIB Event settings, but to no avail either.

Conclusion?
What Gives? Do I have to hand-code the GUIs and not use GUIB? I know it's a simple one this time, but if I can get this working I can sure see being much nicer to build other apps with GUIB! Can anyone give me or point me to a clear example?!

Thanks for reading!

解决方案

here is a shared spreadsheet with an example of GUI builder

when you're in the GUI builder look at the properties of the element you want to trigger a function, at the end of the parameter list there is an 'EVENT' properties where you can add the function name and the callbackElements as well. !

Hoping it's clear enough, cheers, Serge

EDIT : if you want to have a look at a more complex example please open this one (create a copy of it to make it editable) or see it working here, I think you might be convinced that the GUI builder is a really powerfull tool .

这篇关于一个如何使用Google UI Builder和Apps脚本的清晰例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！