Class Error Vertical Panel--Google Apps - google-apps-script

Question

I am getting a class error when I add a vertical panel to my widget and cannot seem to find why. Can you even add a vertical panel to a widget? Or is there maybe another way I can add to the Name and Attribute Labels outside of a Vertical Panel?
maxImgs = 6; // Number of images in grid
colUrl = 45; // Column containing URL
colName = 48; // Column containing Name
colAttr = 46; // Column containing Attributes
function doGet(e) {
var app= UiApp.createApplication().setTitle('Not Here')
var abspanel= app.createAbsolutePanel();//.setHeight('100%').setWidth('100%');
var stackpanel=app.createStackPanel();
var grid = app.createGrid(8,8);
var titleLabel= app.createLabel('Not Here');
titleLabel.setStyleAttribute("text-align", "center");
titleLabel.setStyleAttribute("font-size", "135%");
titleLabel.setStyleAttribute("font-weight", "bold");
var insertlabel= app.createLabel('Which Schedule? (Insert Document Key)');
var inserttxtbox=app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
var loadbtn= app.createButton('Load Pictures').setId('loadbtn');
var resetbtn= app.createButton('Refresh').setId('rbtn').setVisible(false);
var daylabel= app.createLabel('Select Day');
var mon= "P - Mon"
var tues= "P - Tues"
var wed= "P - Wed"
var thurs= "P - Thurs"
var fri= "P - Fri"
var dayListBox= app.createListBox().setWidth('140px').setId('day').setName ('sday')
dayListBox.addItem(mon);
dayListBox.addItem(tues);
dayListBox.addItem(wed);
dayListBox.addItem(thurs);
dayListBox.addItem(fri);
var spinner= app.createImage('http://www.zho.ae/_layouts/ZHO/AR/Images/loader_spinner.gif').setVisible(false).setId('spinner');
var loadSpinner = app.createClientHandler()
.forTargets(spinner)
.setVisible(true);
loadbtn.addClickHandler(loadSpinner);
var loadhandler=app.createServerHandler('loadPics');
loadhandler.addCallbackElement(stackpanel);
loadbtn.addClickHandler(loadhandler);
grid
.setWidget(1,0,insertlabel)
.setWidget(1,1,inserttxtbox)
.setWidget(2,0, daylabel)
.setWidget(2,1, dayListBox)
.setWidget(3,1, loadbtn)
.setWidget(3,2,resetbtn)
.setWidget(4,2,spinner)
var image = [];
for (var img = 0, row = 5; img < maxImgs; img++) {
image[img] = app.createImage().setPixelSize(250, 250).setId('image' + img).setVisible(false);
var imageName = app.createLabel().setId('name'+img).setVisible(false);
var imageAttr = app.createLabel().setId('attr'+img).setVisible(false);
var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image);
grid.setWidget(row + Math.floor(img / 3), 1 + (img % 3), vertPan);
}
abspanel.add(titleLabel);
stackpanel.add(grid);
app.add(abspanel);
app.add(stackpanel);
return app;
}
function loadPics(e){
var app= UiApp.getActiveApplication();
var ss= SpreadsheetApp.openById(e.parameter.ttbox);
var list=ss.getSheetByName(e.parameter.sday);
var data = list.getDataRange().getValues().splice(1); // Get whole spreadsheet, without headers
// In this example, URLs are in A, Name in B, Attributes in C
for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
var rowData = data[row];
if (rowData[colUrl] != '') {
var image = app.getElementById('image' + img);
var imageName = app.getElementById('name'+img);
var imageAttr = app.getElementById('attr'+img);
image.setUrl(rowData[colUrl])
.setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName])
.setVisible(true);
imageName.setText(rowData[colName])
.setVisible(true);
imageAttr.setText(rowData[colAttr])
.setVisible(true);
img++;
}
}
app.getElementById('spinner').setVisible(false);
return app;
}

Answer 1

The error doesn't come from the vertical panel... You're adding image which is an array of widgets, not a UiApp widget.
Try to add array elements in a for loop instead, something like
var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr);
for(var n in image){vertPan.add(image[n])};
EDIT : I re-read Mogsdad's answer on your other post and his code was different... you won't get that nice grid result with this version of the code ... I 'm not sure I understand why you created that array ???
EDIT2 : just for testing I tried Mogsdad's code with this slight modification to see how it shows up ...
for (var img = 0, row = 5; img < maxImgs; img++) {
var image = app.createImage().setPixelSize(250, 250).setId('image' + img).setVisible(true);
var imageName = app.createLabel('name').setId('name'+img).setVisible(true);
var imageAttr = app.createLabel('attr').setId('attr'+img).setVisible(true);
var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image);
grid.setWidget(row + Math.floor(img / 3), 1 + (img % 3), vertPan)
}
and I get this :
EDIT 3 : here is a modified verion of Mogsdad's code that should allow you to see more easily what is going on and is in a 2x2 matrix with visible (and colored) panels...
maxImgs = 4; // Number of images in grid
colUrl = 3; // Column containing URL
colName = 0; // Column containing Name
colAttr = 1; // Column containing Attributes
function doGet(e) {
var app = UiApp.createApplication().setTitle('Not Here');
var abspanel = app.createAbsolutePanel().setStyleAttribute('padding','25px');
var grid = app.createGrid(8, 8);
var titleLabel = app.createLabel('Not Here');
titleLabel.setStyleAttribute('margin-left','85px');
titleLabel.setStyleAttribute("font-size", "135%");
titleLabel.setStyleAttribute("font-weight", "bold");
var insertlabel = app.createLabel('Which Schedule? (Insert Document Key)');
var inserttxtbox = app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
var loadbtn = app.createButton('Load Pictures').setId('loadbtn');
var resetbtn = app.createButton('Refresh').setId('rbtn').setVisible(false);
var daylabel = app.createLabel('Select Day');
var mon = "P - Mon"
var tues = "P - Tues"
var wed = "P - Wed"
var thurs = "P - Thurs"
var fri = "P - Fri"
var dayListBox = app.createListBox().setWidth('140px').setId('day').setName('sday')
dayListBox.addItem(mon);
dayListBox.addItem(tues);
dayListBox.addItem(wed);
dayListBox.addItem(thurs);
dayListBox.addItem(fri);
// Borrowed from https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators
var spinner = app.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif')
.setVisible(false)
.setId('spinner');
// Client handler for loadbtn will start spinner when button clicked
// Server handler will stop spinner when done loading pictures
var loadSpinner = app.createClientHandler()
.forTargets(spinner)
.setVisible(true);
loadbtn.addClickHandler(loadSpinner);
var loadhandler = app.createServerHandler('loadPics');
loadhandler.addCallbackElement(abspanel);
loadbtn.addClickHandler(loadhandler);
grid
.setWidget(1, 0, insertlabel)
.setWidget(1, 1, inserttxtbox)
.setWidget(2, 0, daylabel)
.setWidget(2, 1, dayListBox)
.setWidget(3, 1, loadbtn)
.setWidget(3, 2, resetbtn)
.setWidget(2, 2, spinner)
.setCellSpacing(5);
for (var img = 0, row = 5; img < maxImgs; img++) {
var image = app.createImage().setPixelSize(250, 250).setId('image' + img);
var imageName = app.createLabel('name').setId('name'+img);
var imageAttr = app.createLabel('attr').setId('attr'+img);
var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image).setStyleAttributes({'padding':'15px','borderStyle':'solid','border-radius':'15px','background':'silver'}).setVisible(false).setId('vertPanel'+img);
grid.setWidget(row + Math.floor(img / 2), 1 + (img % 2), vertPan)
}
abspanel.add(titleLabel);
abspanel.add(grid);
app.add(abspanel);
return app;
}
function loadPics(e) {
e = {};
e.parameter = {};
e.parameter.ttbox = '0AnqSFd3iikE3dGFsUWNpb08zVWx5YjFRckloZ0NFZGc'
e.parameter.sday = 'Sheet1'
var app = UiApp.getActiveApplication();
var ss = SpreadsheetApp.openById(e.parameter.ttbox);
var list = ss.getSheetByName(e.parameter.sday);
var data = list.getDataRange().getValues().splice(1); // Get whole spreadsheet, without headers
for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
var rowData = data[row];
if (rowData[0] != '') {
var image = app.getElementById('image' + img);
var imageName = app.getElementById('name'+img);
var imageAttr = app.getElementById('attr'+img);
var vertPan = app.getElementById('vertPanel'+img).setVisible(true);
image.setUrl(rowData[colUrl])
.setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName]);
imageName.setText(rowData[colName]);
imageAttr.setText(rowData[colAttr]);
img++;
}
}
// Done loading, hide spinner
app.getElementById('spinner').setVisible(false);
return app;
}
SS viewable here
demo app available here
You can see that labels correspond to images (only 4 first links are used)