Tag Archives: css

Stylesheets in Google Apps Script UiApp

Despite the documentation, it is quite well possible to use style sheets in a Google Apps Script UiApp.

The documentation of Google Apps Script is quite clear: “… there is no way to use custom style sheets in UiApp.”. This is mentioned in relation to the stylename methods, such as setStyleName(). However, most elements in the UiApp have the  setStyleAttributes() method. This accepts an object with style attributes, e.g.

label.setStyleAttributes({background: "black", color: "green"});

This is how you can assign style information to an element.

The essence of a style sheet is to separate the formatting from the content and the program logic. Separate style sheets make the script more readable and enable you to change the appearance and layout of all pages in a UiApp, just by editing one single file.

In Google Apps Script, you can realize this by setting the style attributes using named objects, and define these objects in a separate file. The following example shows how this works.

Continue reading