Question

How do I add items from the drop down list such as “Item 1”, “Item 2”, and “Item 3” underneath the existing labels within the flextable? The existing labels within the flextable are: “Product Type” and “Size”.

      function doGet() {
  var app = UiApp.createApplication();
  //Create listBox
  var listBox = app.createListBox();
  //Add items to listBox
  listBox.addItem("item 1").addItem("item 2").addItem("item 3").setName("myListBox");
  //Create hidden app      
  var hidden = app.createHidden().setName('hidden').setId('hidden')
  //Create button handler
  var handler = app.createServerHandler("buttonHandler");
  // pass the listbox into the handler function as a parameter and the hidden widget as well
  handler.addCallbackElement(listBox).addCallbackElement(hidden);

  //Create flextable 
  var table = app.createFlexTable().setId("myTable");

  //Create flex table style attributes
    table.setStyleAttribute("border-style", "solid")
    table.setStyleAttribute("border-width", "1px")  
    table.setCellPadding(1);



  //Create flex table headers  
  table.setWidget(0, 0, app.createLabel("Product Type")).setStyleAttribute("color", "blue");
  table.setWidget(0, 5, app.createLabel("Size")); 

  var button = app.createButton("+", handler);

  // add all widgets to the app
  app.add(table).add(hidden);
  app.add(listBox).add(button)
  return app;
}

function buttonHandler(e) {
  var app = UiApp.getActiveApplication();
  // get the position (is a string)
  var pos = e.parameter.hidden;
  // initial condition, hidden widget is empty
   if(pos==null){pos='0'};
  // convert to number
   pos=Number(pos);
  var table = app.getElementById("myTable");
  // add the new item at the right place
  table.insertRow(pos).insertCell( pos, 0).setText(pos, 0, e.parameter.myListBox);
  // increment position
  ++pos;
  // save value
  app.getElementById('hidden').setValue(pos);
  // update app
  return app;
}

Answer 1

here you are, just initialise hidden with value = ‘1’

(sorry I didn’t understand your request on the other post comment)

function doGet() {
  var app = UiApp.createApplication();
  //Create listBox
  var listBox = app.createListBox();
  //Add items to listBox
  listBox.addItem("item 1").addItem("item 2").addItem("item 3").setName("myListBox");
  //Create hidden app  with initial value    
  var hidden = app.createHidden().setName('hidden').setId('hidden').setValue('1')
  //Create button handler
  var handler = app.createServerHandler("buttonHandler");
  // pass the listbox into the handler function as a parameter and the hidden widget as well
  handler.addCallbackElement(listBox).addCallbackElement(hidden);

  //Create flextable 
  var table = app.createFlexTable().setId("myTable");

  //Create flex table style attributes
  // I changed this line also, seems you want to have borders
    table.setBorderWidth(1)
    table.setCellPadding(1);



  //Create flex table headers  
  table.setWidget(0, 0, app.createLabel("Product Type")).setStyleAttribute("color", "blue");
  table.setWidget(0, 5, app.createLabel("Size")); // why 5 ????? this creates empty cells in between

  var button = app.createButton("+", handler);

  // add all widgets to the app
  app.add(table).add(hidden);
  app.add(listBox).add(button)
  return app;
}

function buttonHandler(e) {
  var app = UiApp.getActiveApplication();
  // get the position (is a string)
  var pos = e.parameter.hidden;
  // initial condition, hidden widget is ='1'
  // convert to number
   pos=Number(pos);
  var table = app.getElementById("myTable");
  // add the new item at the right place
  table.insertRow(pos).insertCell( pos, 0).setText(pos, 0, e.parameter.myListBox);
  // increment position
  ++pos;
  // save value
  app.getElementById('hidden').setValue(pos);
  // update app
  return app;
  }

note : see comments, why 5 in setWidget(0, 5, app.createLabel("Size")) ?