GAS...Gui Editor...forms for mobile

1
votes

I have a simple GAS form that I want to be mobile friendly. Here is what it looks like:

https://script.google.com/macros/s/AKfycbxn6ZasFshHZ6AR0TQzPCv0CUtVNBVbWLSwt1fbOtnc/dev

Q1- I'd like the form to scale automatically to fit the (mobile) screen. It was built using the GUI Editor. The textboxes are set to scale as a % of width and height.

I don't know HTML5, but it seems that is the way to go for mobile formatting. Can you integrate HTML5 into the code that the GUI editor uses? Do you have any other formatting suggestions within GUI Editor?

Q2 - Rather than putting text in the textbox, I want it to be placeholder text that disappears when the box is selected. Is this possible?

Thanks, Nathan

2
google-apps-script
The link provided when you choose "Test your latest code" is only available to you. So just letting you know, we can't see what you are hosting at the link you posted. - Phil Bozak
Hmm..Phil, thanks for pointing that out. I think if you replace dev with exec it should work..maybe not.. the script deployment is set for anyone to run it. It doesn't matter too much what it looks like. The form is simply 3 textboxes, 1 password box, and a submit button. - user2012403

2 Answers

2
votes

Q1: I can't answer completely, but it looks like you can set most elements to a percentage width and height using setWidth, setHeight, or setSize.

Q2: What you want to do is set an onFocus handler so that text goes away when the user clicks on the field (this action is called "focusing" on the element). This can be done with a ClientHandler, which means it will be fast.

var text = app.createTextBox().setId("textbox").setName("textbox")
    .setStyleAttribute("color","gray").setValue("Input text here");
var focusHandler = app.createClientHandler().forEventSource().setText("")
    .setStyleAttribute("color","black");
text.addFocusHandler(focusHandler);

If the user leaves the field blank, you can then change it back to the original text and color it gray again, but you will have to use a ServerHandler this time because we need to check if the field is blank. Also, leaving the field is called "blurring".

var blurHandler = app.createServerHandler("textboxBlurred").addCallbackElement(text);
text.addBlurHandler(blurHandler);
...
function textboxBlurred(e) {
  var app = UiApp.getActiveApplication();
  if (e.parameter.textbox=="") {
    var box = app.getElementById("textbox");
    box.setValue("Input text here");
    box.setStyleAttribute("color", "gray");
  }
  return app;
}
2
votes

For the textholder thing, it is possible to do it without serverhandler, by using validator.

  var textbox = app.createTextBox().setValue('placeholder').setStyleAttribute('color', 'gray');
  textbox.addFocusHandler(app.createClientHandler().validateMatches(textbox, '^placeholder$').forEventSource().setText('').setStyleAttribute('color','black'));
  textbox.addBlurHandler(app.createClientHandler().validateLength(textbox, 0, 0).forEventSource().setText('placeholder').setStyleAttribute('color','gray'));