Loadbox generating undefined error?

Question

So,I am trying to use a loadbox to select an index in a array. Unfortunately, it's not working. What am I doing wrong?

function sideBar(){

   var uiInstance = UiApp.createApplication()
     .setTitle('WriteWell')
     .setWidth(250);
  var panel = uiInstance.add(uiInstance.createVerticalPanel());
 //uiInstance.add(uiInstance.createLabel('A photograph on the dashboard taken years ago...'));
  var handler = uiInstance.createServerClickHandler('click');
  var box = uiInstance.createListBox().setId("select").setName("mySelector");
  var images = getImages();
  for(var i = 0; i<images.length; i++){
    box.addItem(""+i,i);
  }
  panel = uiInstance.add(box);
  panel.add(uiInstance.createButton("Add Icon").addClickHandler(handler));
  DocumentApp.getUi().showSidebar(uiInstance);
}

function click(eventInfo){
  var uiInstance = UiApp.getActiveApplication();
  //var box = app.getElementById("mySelector");
  var index = parseInt(eventInfo.parameter.mySelector);
  var id = "1ou_WBlXyV-yIEkZ595OTnlnz9la_km0Rfp3KKcZpyg0";
  var imageResource = DocumentApp.openById(id);
  var images = imageResource.getBody().getImages();
  DocumentApp.getActiveDocument().getCursor().insertInlineImage(images[index].getBlob().getAs("img/gif"));
}

When I run the script, it throws an error that .getBlob() is undefined, but it works when I manually specify an integer. I am not familiar with Javascript so any help would be appreciated.

Answer 1

There are a lot of basic errors in your code, the result was that the value returned by the listBox was undefined mainly because there was no CallBackElement with your handler.

Beside that, the construction of the UI was not correct as the listBox was not added to the panel.

In the click function you can simplify your code since the variable images[index] is already a blob and can directly be inserted in the document.

My test script goes like this, I changed the source reference to be able to test it on my side... don't forget to restore your values.

Btw, you can also improve the UI by adding some style attributes to make it look better but I guess this was a simplified draft version of your code ... wasn't it ?

function sideBar(){
  var uiInstance = UiApp.createApplication()
  .setTitle('WriteWell')
  .setWidth(250);
  var panel = uiInstance.createVerticalPanel();
  uiInstance.add(panel);
  var handler = uiInstance.createServerHandler('click').addCallbackElement(panel);
  var box = uiInstance.createListBox().setId("select").setName("mySelector");
  var images = [1,2,3,4,5];// restore your code here too, this was for test only...
  for(var i = 0; i<images.length; i++){
    box.addItem(""+i,i);
  }
  panel.add(box);
  panel.add(uiInstance.createButton("Add Icon").addClickHandler(handler));
  DocumentApp.getUi().showSidebar(uiInstance);
}

function click(eventInfo){
  var uiInstance = UiApp.getActiveApplication();
  var index = parseInt(eventInfo.parameter.mySelector);
  var id = "1E6yoROb52QjICsEbGVXIBdz8KhdFU_5gimWlJUbu8DI";// this is the ID of a shared document, not your doc.
  var imageResource = DocumentApp.openById(id);
  var images = imageResource.getBody().getImages();
  DocumentApp.getActiveDocument().getCursor().insertInlineImage(images[index]);
}

---

EDIT : I wrote a small script to test a bit further how I could manage image size and (slightly) improve the UI... here is the code you can test

function sideBar(){
  var uiInstance = UiApp.createApplication()
  .setTitle('WriteWell')
  .setWidth(250);
  var panel = uiInstance.createVerticalPanel().setStyleAttributes({'padding':'25px','background':'#ffffee'}).setHeight('100%').setWidth('100%');
  uiInstance.add(panel);
  var handler = uiInstance.createServerHandler('click').addCallbackElement(panel);
  var box = uiInstance.createListBox().setId("select").setName("mySelector");
  var id = "1E6yoROb52QjICsEbGVXIBdz8KhdFU_5gimWlJUbu8DI";// this is the ID of a shared document, not your doc.
  var imageResource = DocumentApp.openById(id);
  var images = imageResource.getBody().getImages();// I used it to get some images
  for(var i = 0; i<images.length; i++){
    box.addItem(images[i].getType()+'-'+i,i);
  }
  panel.add(box);
  panel.add(uiInstance.createButton("Add Icon").addClickHandler(handler));
  DocumentApp.getUi().showSidebar(uiInstance);
}

function click(eventInfo){
  var uiInstance = UiApp.getActiveApplication();
  var index = parseInt(eventInfo.parameter.mySelector);
  var id = "1E6yoROb52QjICsEbGVXIBdz8KhdFU_5gimWlJUbu8DI";// this is the ID of a shared document, not your doc.
  var imageResource = DocumentApp.openById(id);
  var images = imageResource.getBody().getImages();
  var newImage = DocumentApp.getActiveDocument().getCursor().insertInlineImage(images[index]);
  var originalH = newImage.getHeight();
  var originalW = newImage.getWidth();
  var ratio = originalW/originalH;
  newImage.setWidth(100).setHeight(100/ratio);
}