google apps script - Create Array of Images -

i want create array of images using createimage() reads urls google spreadsheet. want ignore empty cell values in range , able read values on adjacent column of url. example: url, name, attribute. have far cannot multiple values in url range load different image spaces.

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 image1= app.createimage().setpixelsize(250,250).setid('image1').setvisible(false); var image2=app.createimage().setpixelsize(250,250).setid('image2').setvisible(false); var image3=app.createimage().setpixelsize(250,250).setid('image3').setvisible(false); var image4=app.createimage().setpixelsize(250,250).setid('image4').setvisible(false); var image5=app.createimage().setpixelsize(250,250).setid('image5').setvisible(false); var image6=app.createimage().setpixelsize(250,250).setid('image6').setvisible(false);  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) .setwidget(5,1, image1) .setwidget(5,2, image2) .setwidget(5,3, image3) .setwidget(6,1, image4) .setwidget(6,2, image5) .setwidget(6,3, image6); 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 row= list.getlastrow()-1; var values2= list.getrange(2,47,1,1); var values3= list.getrange(2,48,1,1); var values4=list.getrange(row,49,1,1).getvalues(); var image1=app.getelementbyid('image1').setvisible(true); var image2=app.getelementbyid('image2').setvisible(true); values4 = values4.split(',');  for(var i=0;i<values4.length;i++){ if (values4[i][0] != '') image1.seturl(values4[i]);  }  values4=values4.split(','); for(var i=0;i<values4.length;i++){ if (values4[i][0] != '') image2.seturl(values4[i]);  }  return app;   } 

this version loads images wish. you'll need adjust spreadsheet access suit - see embedded comments.

the images created array, can populated , added grid within loop. image ids likewise created on fly, , loadpics() can follow similar pattern. example of adding value "name" column image title included.

edit / added bonus: working spinner, , support name & attributes pictures.

maximgs = 6;      // number of images in grid colurl = 0;       // column containing url colname = 1;      // column containing name colattr = 2;      // 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);    // borrowed https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators   var spinner = app.createimage('https://5079980847011989849-a-1802744773732722657'+                                 '-s-sites.googlegroups.com/site/scriptsexamples/progressspinner.gif')                                 .setvisible(false)                                 .setid('spinner');   // client handler loadbtn start spinner when button clicked   // server handler stop spinner when done loading pictures   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 img = 0, row = 5; img < maximgs; img++) {     var image = 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) {     e = {};     e.parameter = {};     e.parameter.ttbox = '0amkspnhhuowadfmxddhpaxflufdmnkstauzpdu5mr2c'     e.parameter.sday = 'p - mon'   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); // whole spreadsheet, without headers    (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);        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++;     }   }    // done loading, hide spinner   app.getelementbyid('spinner').setvisible(false);   return app; }