David's Tech Blog

I recently wrote a post reviewing Google Apps Scripts. Buried in that post was a code snippet that showed my workaround for the lack of CSS or global styling in Google Apps Scripts.  The problem is that it is in the middle of my venting about some of this service’s limitations, and most people will likely overlook it.  So I’m editing that post and putting that piece of it here on its own.

Google Apps Scripts doesn’t allow you to work with CSS at all.  Instead, they provide a mechanism for setting in-line styles as style attributes to your HTML elements.  This is done by using the setStyleAttribute method, which is available on several of the classes.  This method takes two string arguments, a style name (“line-height”, “font-size”, and so on) and the value for that style setting (10px, 1.1em, 90%, ‘bold’, etc).  These aren’t CSS styles, they are inline style attributes.  Its been a while since I’ve worked with this attribute, and I may have forgotten some of what I once knew about using these.   I found that it didn’t work well to set a “font” attribute to “110% bold serif,” you needed to set that with three separate setStyleAttribute calls.  You can chain these, which is still verbose but does make it somewhat easier.

var label = app.createLabel("Text for the label").setStyleAttribute("font-size","110%").setStyleAttribute("font-weight","bold");

That works fine, except that you end up with LOTS of setStyleAttribute calls throughout your script, and if you want to change something uniformly you’ll be copy and pasting all over the place.  That gets old fast.  So I wrote a little function as a workaround for this issue, and it seems to work reasonably well.

First, I created an object to hold my global styles

var appStyles = {
  "tableheaders": {
    "font-weight": "bold",
    "font-size": "1.1em",
    "padding": "0px 5px 0px 5px",
    "text-decoration": "underline"
  } ,
  "listtable": {
    "border-top": "1px solid #CCC" ,
    "margin-top": "6px",
    "width": "99%"
  },
  "helptext": {
    "font-size": ".9em",
    "color": "#999"
  }
};

Actually, pasting that in I realized that you don’t need the quotes around the property names. My fingers have been typing too much JSON. That does work as it appears there though, and its what I’ve tested, so I’ll leave it for now.

The next part is the function to apply the styles, uncreatively called applyStyles:

function applyStyles(element, style){
  if(!element.setStyleAttribute || !(style in appStyles)) return element;
  for(var attribute in appStyles[style]){
    element.setStyleAttribute(attribute, appStyles[style][attribute]);
  }
  return element;
}

Many of the classes in Google Apps Scripts support setStyleAttribute, but not all. So we’re checking before we try to use it. Then, we iterate over the attributes in the appStyles object and apply the styles that match the passed in style name to the element. You can pass any element that supports setStyleAttribute to this function and it will be styled, and instead of copied styles all across your script you have one place to tweak the style headings.

This isn’t an ideal solution, and if I was going to use it much I’d probably do more with it. However, it is a start at a way to turn unmanageable styles in Google Apps Scripts into something you can work with and maintain.