15 January 2011

Workaround for HTML in Apps Script UIApp

I've come across a frustrating issue in Google Apps Script in that it does not support HTML in UIApp widgets. Often, a simple task such as displaying some multi-paragraph help text can be an extremely frustrating issue.

A quick and easy work-around is to utilise a function to convert a formatted string, with new-lines and indents into a VerticalPanel with a series of Labels to represent each line. Here is one such function:
/** * Returns a widget formatted with the text. */ function formatTextPanel(a, text) { var app = a ; var panel = app.createVerticalPanel(); var lines = text.split("\n"); for (var i=0; i<lines.length; i++) { var cleaned = removeLeadingWhiteSpace(lines[i]); var label = app.createLabel(cleaned[1]); if (cleaned[1].length == 0) { label.setText("-"); label.setStyleAttribute("visibility", "hidden"); } if (cleaned[0] > 0) { var margin = cleaned[0] * 6; // 6 px per char label.setStyleAttribute("margin", "0px 0px 0px "+margin+"px"); } panel.add(label); } return panel; } /** * Remove whitespaces from start and report how many. */ function removeLeadingWhiteSpace(text) { var i = 0; var res = []; while (i < text.length && text[i] == ' ') { i = i+1; } res[0] = i; res[1] = text.substr(i); return res; }
To use, just copy and paste into your script and call formatTextPanel passing a UiInstance and the text that you want turned into a panel. Here is an example:

function renderHelpDialog() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var app = UiApp.createApplication(); app.setTitle("My Help Dialog"); app.setHeight(480); var helptext = "" + "This is a line.\n" + "A blank line will follow this one.\n\n" + " This line will be indented.\n" + " This will be indented some more.\n" ; var helpPanel = formatTextPanel(app,helptext); app.add(helpPanel); ss.show(app); }
There is scope to easily modify the formatting function to add styles to individual labels to, for example, offer bold formatting, larger font sizes, wiki-like syntax, and more.


  1. John,

    Thanks for putting this together. I am using it to display comma delimited text. I just simply replaced "\n" with ",".

    Just out of curiosity, how are you displaying those grey boxes around the code in your blogpost?

    Thanks again,

  2. Thanks John
    That is really helpful.

  3. Great! exactly what i want!
    Thanks a lot to share your code !

  4. Thanks a lot for sharing your code!