如何使用 Google UI Builder 和 Apps 脚本的清晰示例

Question

我到处搜索，找不到如何使用 Google 的 UI Builder 和应用程序脚本的明确示例。我不知道我错过了什么。我认为这应该很简单：v/ 是的，我已经阅读了所有 Google 的文档，观看了视频等 - 好几次 - 没有 GUIB （Google 的 UI Builder） 和回调处理函数的组合，我可以找到。
编辑：有电子表格的示例 - 不是 GSites

我需要做什么：
我想在谷歌网站页面上嵌入一个文本框和按钮来收集用户的搜索短语。我用单个流程面板、文本框和按钮构建了非常简单的 UI，但无论我做什么，都只能从 Logger.log() 返回“未定义”（请参阅下面的代码）。

有点啰嗦：
我一直非常小心地命名，并以正确的名字称呼。我试过在 GUIB 中使用表单面板，但你只能在其中放置一个小部件？！ ...而且提交按钮只会进入表单面板 - 嗯 - 我也不能把我的文本框放进去！？ （那为什么还要使用表单面板 - 我不明白！...是的，我知道 doPost() 在提交时会自动被调用）。我希望小部件在一次使用后保持活动状态并且不会消失，所以表单面板/提交按钮可能无论如何都不起作用 - 或者不是正确的方法吗？

言归正传：
无论如何，我尝试使用以下代码将常规按钮和文本框放在流程面板中...
编辑：我在此处删除了我的原始内容并重新发布了此部分。 ..

// 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!
}

我也尝试在 doGet() 中添加代码以手动设置处理程序等，并且不使用 GUIB 事件设置，但也无济于事。

结论？
是什么赋予了？我是否必须手动编码 GUI 而不使用 GUIB？我知道这一次很简单，但如果我能做到这一点，我肯定会看到使用 GUIB 构建其他应用程序会更好！谁能给我或指出一个明确的例子？！

感谢阅读！

Answer 1

这是一个带有example of GUI builder的共享电子表格

当您在 GUI 构建器中查看要触发函数的元素的属性时，在参数列表的末尾有一个“事件”属性，您可以在其中添加函数名称和回调元素作为出色地。 ！

希望它足够清楚， 干杯， 塞尔吉

编辑：如果您想查看更复杂的示例，请open this one（创建它的副本以使其可编辑）或查看它的工作原理here，我想您可能会相信 GUI 构建器是一个非常强大的工具。

Answer 2

非常感谢 Serge Insas！

答案如下图——我错过了两件事：

1. On Mouse Click 服务器处理程序旁边的小 [+] - 添加 要返回的参数

2. Name 是使用的 NOT ID - 设置在 tbxQuery 的输入字段部分

（注意：非数据元素没有名称 - 所以 fplMain 只有一个 ID，但仍然有效）

所以，这里是生成的代码，以及描述 GUIB 设置的 cmets：

// 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 'fplMain'
// - inside that, a textBox named 'tbxQuery' (see Input Fields section - this in NOT ID)
//   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 "fplMain" as the return param (it will return all data elements)   
//
// the GUIB compnent tree looks like this...
//
//  [-] SearchGui
//    [-] fplMain
//          btnSearch
//          tbxQuery
//
// "tbxQuery" Input Fields param, "Name"... **THIS MUST BE SET!
//
// Input Fields
//  ...
//  Name
//  [tbxQuery     ]
//
// "btnSearch" Event section looks like this...
//
// Events
//  On Mouse Clicks
//  [X][btnSearchHandler][-]
//  [fplMain          ]<--'
//  [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 returned as e.parameter.tbxQuery (as would be any other
//    params under the flow panel "fplMain") in the function 'btnSearchHandler(e)'

//
//    [ predefined function --- Google calls on page open ]
//
function doGet(e) {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("SearchGUI"));  // ...the title you choose in G/UIBuilder
  return app;
}

//
//    [ callBack for when a button is clicked ]
//
function btnSearchHandler(e) {
  var resp = e.parameter.tbxQuery  // ...the data in the textBox widget
  Logger.log('Resp: [' + e.parameter.tbxQuery + ']');
  //
  // ...more code goes here, to do something with the returned data
  //
}