Displaying Google Spreadsheets data in Google Sites as HTML?

Question

I have a google spreadsheet and I'm trying to build a webpage using Google sites. I don't want to embed the whole sheet, or even a range of cells. I just want my webpage to display text from some cells in the spreadsheet, and I want to be able to style that text using HTML.

For example, in the value in cell A1 is "There are 3 games today".

I want to be able to put this text in my webpage and then give it a font size, alignment, and put it in a box with a border and curved corners (border radius).

I think there may be several ways of acheiving this but the closest I have got is by inserting an 'Apps script gadget' into the page and using the doGet() method:

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

var ss = SpreadsheetApp.openById('SPREADSHEET_KEY');
var sheet = ss.getSheetByName("Sheet1");
var range = sheet.getRange('A1');
var dataRange =  range.getValue().toString();

 app.add(app.createHTML("There are " + dataRange + " games today"))
 return app;  
}

but I dont know how to then add HTML to the webpage to make it look fancy. I haven't even been able to set anything within the script e.g. font alignment. I've tried

.setHorizontalAlignment('center')

but I keep getting errors such as "Cannot find method (class)setHorizontalAlignment(string)". Can anyone kindly point me in the right direction?

Many thanks in advance

Answer 1

Most of the style attributes can be set with .setStyleAttributes().

.setStyleAttribute("fontSize","200%");

Note: Instead of writing font-size or margin-left, you need to use camelCase.

.setStyleAttributes({marginLeft:"15px",marginTop:"22px"});

These are just a few examples of how to use this.

In order to use horizontal alignment, you should use

.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER); 

Use the autocomplete feature of Google Scripts to see all the options that you can use.

---

If you're already familiar with HTML, then consider using HTML templates to pull variables from the spreadsheet into the HTML. Templated HTML