Apps Script GUI and createClientHandler

Question

I am trying to use a client handler to validate an entry to make sure that the entry is indeed a number. So if an entry contains a letter, for example, then I want to disable a button so that a user cannot proceed. I have built a GUI using the GUI builder, but the client handler, specifically validateNotNumber, does not work if called from the GUI.

So far for a text box I am trying to get the validator to work in, I have in the GUI builder with the ID (Base) = Name (Input Fields), for the Events section I have the "on Key Press" filled in with the name of the function that has the client handler and the name of the form the text box resides on (in my case, AbsolutePanel1).

The function called is:

function isitnotnumbers(e) {
var app = UiApp.getActiveApplication();
app.createClientHandler().validateNotNumber(app.getElementById('ThisOdometer'))
.forTargets(app.getElementById('ButtonCalcMPG')).setEnabled(false);
return app;
};

The function is indeed called I have tested it by having a message displayed when a key is press in the text box. But the button specified is not disabled as it should when a non-number key is pressed.

The examples I found listed the validators in hand coded UI widgets, so I am not sure where I am going wrong when using the GUI builder.

So, where did I go wrong and how can I fix this? Is there a work around if the GUI builder does have limitations with client handlers (such as using the HTML service)?

My other attempt(s):

I have tried to add a click handler to the text box, which is a modification to the code above:

var app = UiApp.getActiveApplication();  
var handlernumbers = app.createClientHandler()
    .forTargets(app.getElementById('LabelUserMessage'))
    .setText('THe message');
var odobox = app.getElementById('ThisOdometer');
odobox.addClickHandler(handlernumbers);
return app;

score 1 · Answer 1 · edited Jan 07 '13 at 05:50

1

Try this:

function isitnotnumbers(e) {
var app = UiApp.getActiveApplication();
app.getElementById('ThisOdometer').addKeyUpHandler(app.createClientHandler().validateNotNumber(app.getElementById('ThisOdometer'))
.forTargets(app.getElementById('ButtonCalcMPG')).setEnabled(false));
return app;
};

Edit: You don't need this code in a separate function, just add the following line to your doGet() or in the main function (so that the handler is created only once when the app launches):

app.getElementById('ThisOdometer').addKeyUpHandler(app.createClientHandler().validateNotNumber(app.getElementById('ThisOdometer'))
    .forTargets(app.getElementById('ButtonCalcMPG')).setEnabled(false));

edited Jan 07 '13 at 05:50

thegeorge

19
8

answered Jan 06 '13 at 08:39

jad

552
2
9
19

Thanks! That worked perfectly. I was hoping that GUI builder would take serve as the key press handler as that seemed intuitive to me, a newb. Am I incorrect in that thinking, that in GUI builder having an key press event point to the function with the client handler should be the way it should work? – thegeorge Jan 07 '13 at 05:57
There's no difference to how client/server handlers work whether created from GUI builder or manually by code. Client handlers do no point to a function (rather they define their action at time of creation as in our case), but they need to be linked to an element in the UI and a trigger event. – jad Jan 07 '13 at 08:22

score 0 · Accepted Answer · answered Mar 26 '13 at 07:39

0

To answer my own question, I will say that it does not matter as google is deprecating gui builder, and will cease to function after September.

I should, or perhaps I should have started to, learn uiservice or htmlservice.

answered Mar 26 '13 at 07:39

thegeorge

19
8

Apps Script GUI and createClientHandler

2 Answers2