Home/ Questions/Q 7975241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T08:35:53+00:00

I have searched everywhere and cannot find a clear example of how to use

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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. !

    screen capture

    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 .

    • 0