Refresh Array of Images- Google Script - google-apps-script

Question

I want to be able to clear the whole array of images with the click of a button and reload the array with updated values. I cannot get this to work by clearing the vertPanel. Can this be done by somehow resetting all the data? Any help would be appreciated.
var maxImgs = 6; // Number of images in grid
var colUrl = 0; // Column containing URL
var colName = 2; // Column containing Name
var 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(350, 350).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 / 4), 1 + (img % 4), vertPan)
}
abspanel.add(titleLabel);
abspanel.add(grid);
app.add(abspanel);
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.getRange("A121:C230").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]).setStyleAttribute("font-size", "150%");
imageAttr.setText(rowData[colAttr]);
img++;
}
}
// Done loading, hide spinner
app.getElementById('spinner').setVisible(false);
return app;
}

Answer 1

Better define another grid and add it to abspanel, In the handler function, call the image grid by ID and then use method clear(); to clear the grid. And then reconstruct it for new images.
I hope you get it what I am trying to say.
in doGet() function use
var imgGrid = app.createGrid(1,1).setId('imgGrid');
abspanel.add(imgGrid);
in your handler function use
var imgGrid = app.getElementById('imgGrid').clear();
imgGrid.resize(row, column);
//Now manipulate this grid to show new images