Client validation of multiple widgets - google-apps-script

Question

I have a submit button whose enablement state depends on several other widgets' state; and I can't come up with a client side solution in Google Apps Script to do the validation.
For example, take three checkboxes. The submit button should be enabled iff (if-and-only-if) at least one checkbox is enabled.
I know I could do this with server side validation but there shouldn't be any need for something this simple. Any suggestions? Thanks.

Answer 1

It perfectly possible to write client side handlers that depend on multiple widgets' states, as you can just chain many validateX calls on a single handler. The problem here is just that clientHandlers cannot validate checkboxes state.
I have opened an issue regarding this problem, you may want to star it to keep track of updates and kind of vote for it:
Issue 2220: UiApp handler validateValue of checkbox
Anyway, it is possible to workaround this, and I'll just to show you that it is possible to have handlers depending on multiple widgets value, but this code will be much simpler when issue 2220 is solved:
function doGet(e) {
var app = UiApp.createApplication().setTitle('Checkbox Test');
var panel = app.createVerticalPanel(),
noChecked = app.createClientHandler(),
button = app.createButton('Test').setEnabled(false);
for( var i = 0; i < 3; ++i ) {
var cb1 = app.createCheckBox('cb'+i),
cb2 = app.createCheckBox('cb'+i).setVisible(false),
tb = app.createTextBox().setValue('false').setVisible(false);
cb1.addClickHandler(app.createClientHandler().forTargets(cb2).setValue(true).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('true'));
cb2.addClickHandler(app.createClientHandler().forTargets(cb1).setValue(false).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('false'));
cb1.addClickHandler(app.createClientHandler().forTargets(button).setEnabled(true));
cb2.addClickHandler(noChecked.validateMatches(tb,'false'));
panel.add(cb1).add(cb2).add(tb);
}
noChecked.forTargets(button).setEnabled(false);
return app.add(panel.add(button));
}

Answer 2

ClientHandlers are intentionally simple. You can do arbitrary code with ServerHandlers and the speed difference should be relatively small. Otherwise, yes, this is by design and if you need more complicated client logic you need to use HtmlService.
The tradeoff between UiApp and HtmlService related to how we guarantee that you can't serve malicious code from a script. UiApp code uses simple builder patterns that are limiting but definitely safe, while HtmlService uses complex sandboxing to achieve that goal, with tradeoffs of not working on older browsers and some other limitations.
This specific use case sounds workable in UiApp, if I understand you correctly. If you want an example of a show/hide button that flips, here is one:
function doGet() {
var app = UiApp.createApplication();
var label = app.createLabel("I am a toggleable widget").setVisible(false);
var show = app.createButton("show");
var hide = app.createButton("hide").setVisible(false);
show.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(true).forTargets(show).setVisible(false));
hide.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(false).forTargets(show).setVisible(true));
return app.add(show).add(hide).add(label);
}
Basically, use 2 buttons and flip the visibility of the button too.
Checkboxes are in fact validated - but it is their text that is validated, not their value:
var app = UiApp.createApplication();
var check = app.createCheckBox();
check.setText("foo").addClickHandler(
app.createServerHandler("clicked").validateMatches(check, "foo"));
return app.add(check);
The issue tracker request is reasonable though.