3
votes

I am new to the world of Google's Apps Script, and I am trying to create a basic UI for my end user to query data (stored in google spreadsheets) and display the data in a formatted / user friendly way.

Since I want to start off simple and add in components as I learn Apps Script I decided to create a basic form that will allow me to enter text in a text box, then assign that value to a label (what I thought would be a simple exercise in creating basic form components, and retrieving / assigning values).

Unfortunately the stumbling block I ran into is that there is no getText() or TextBox.getValue() function. I tried searching through online forums / google etc to find out the way around this, but nothing I try seems to work (previous searched led me totry and work this out in an event handler).

My question is this. If I have a textBox ('textBox1') and a button ('button1') and a label ('label1'). How to I get my web app to assign the value I enter in textBox1 to label1 when I click button1?

I realize this is probably the most basic of questions, and I know it has been asked before....but no matter how hard I dig through these old posts I can't seem to figure what should be an easy bit of code out.

Thanks in advance.

1
You didn't search very well... a simple search on this forum with the gas tag returned dozens of results... for example this one : simple and clear!Serge insas

1 Answers

2
votes

Suppose you have code that looks like this:

var textbox = app.createTextBox().setName("textboxName");
var buttonHandler = app.createServerHandler("updateLabelText").addCallbackElement(textbox);
var button = app.createButton("Click me").addClickHandler(buttonHandler);
var label = app.createLabel().setId("label");

Then in your function:

function updateLabelText(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById("label").setText(e.parameter.textboxName);
  return app;
}

So the things to note:

  1. The button handler is given the name of a function that you define somewhere else in your code.
  2. The button handler also must be given a "callback element". This is required if you want to read the value of that element in your function. You can add a panel as a callback element and anything that's on that panel will be added to the callback.
  3. Values of callback elements are passed back through e.parameter. The property name is the name of the element. Example: e.parameter.textboxName.
  4. The label needs an ID so that you can reference it from your other function.