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.
