personalizing google app script ui for example with css

Question

I have some google script code in a spreadsheet like this:

function doGet(e) {
  var app = UiApp.createApplication();

  //////////////////////////////////////////////////////////
  var buttonEntrata = app.createButton('Entrata');
  app.add(buttonEntrata);

  var labelEntrata = app.createLabel('Entrata!')
                 .setId('statusLabelEntrata')
                 .setVisible(false);
  app.add(labelEntrata);

  var handlerEntrata = app.createServerHandler('myClickHandlerEntrata');
  buttonEntrata.addClickHandler(handlerEntrata);

  /////////////////////////////////////////////////////////////
  var buttonUscita = app.createButton('Uscita');
  app.add(buttonUscita);

  var labelUscita = app.createLabel('Uscita!')
                 .setId('statusLabelUscita')
                 .setVisible(false);
  app.add(labelUscita);

  var handlerUscita = app.createServerHandler('myClickHandlerUscita');
  buttonUscita.addClickHandler(handlerUscita);

  return app;
}

function myClickHandlerEntrata(e) {
  var app = UiApp.getActiveApplication();

  var labelEntrata = app.getElementById('statusLabelEntrata');
  labelEntrata.setVisible(true);

  entrata()

  app.close();
  return app;
}

function myClickHandlerUscita(e) {
  var app = UiApp.getActiveApplication();

  var labelUscita = app.getElementById('statusLabelUscita');
  labelUscita.setVisible(true);

  uscita()

  app.close();
  return app;
}

This creates me 2 buttons that do what they have to.

the problem is that when I call the page like this:

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

I get a really ugly page which id like to personalize, for example aligning the buttons in the center of the page, resizing them maybe dynamically based on the screen resolution, etc....

how can I do this since this is a script and not an html page? does google script support something like css?

TNX :)

Serge insas · Accepted Answer · 2014-03-07 20:02:35Z

1

There are a lot of CSS equivalents (attributes have the same name but are written differently, using camelCase and no hyphens)that you can use in UiApp, the full list is here.

You can use it with setAttribute(key,value) or setAttributes({key:value,key:value}) , the second one allowing for any number of parameters, doc here.

answered Mar 7, 2014 at 20:02

Serge insas

46.9k7 gold badges113 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndreA Over a year ago

Can you link me an example?

Kavitha Madhavaraj · Accepted Answer · 2015-06-26 12:22:13Z

0

UiApp has been deprecated. Try HTMLService Instead.

Example:

function doGet(){
var html=HtmlService.createHtmlOutputFromFile("name_of_html_file");
html.setTitle("Some_Title");
return html;
}

Note: When you give link to others, deploy and give the URL that ends with "/exec".

URL that ends with /dev is that only the owner of the app can use!

answered Jun 26, 2015 at 12:22

Kavitha Madhavaraj

5921 gold badge6 silver badges24 bronze badges

Collectives™ on Stack Overflow

personalizing google app script ui for example with css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related