How to make the last item added to a flextable ret

Question

Could someone please show me how to make the last item added to the flextable go directly underneath the existing item?

function doGet() {
  var app = UiApp.createApplication();
  var listBox = app.createListBox();
  listBox.addItem("item 1").addItem("item 2").addItem("item 3").setName("myListBox");

  var handler = app.createServerHandler("buttonHandler");
  // pass the listbox into the handler function as a parameter
  handler.addCallbackElement(listBox);

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

  var button = app.createButton("+", handler);
  app.add(listBox);
  app.add(button);
  app.add(table);
  return app;
}

function buttonHandler(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById("myTable").insertRow(0).insertCell( 0, 0).setText( 0, 0, e.parameter.myListBox);
  return app;
}

Answer 1

The following piece of code is doing the same, but with the usage of a ScriptProperties method. Nothing fancy to it and works like a charm:

function doGet() {
  var app = UiApp.createApplication();

  // create listBox and add items
  var listBox = app.createListBox().setName("myListBox")
    .addItem("item 1")
    .addItem("item 2")
    .addItem("item 3");

  // set position
  ScriptProperties.setProperty('position', '0'); 

  // create handle for button
  var handler = app.createServerHandler("buttonHandler").addCallbackElement(listBox);

  // create flexTable and button
  var table = app.createFlexTable().setId("myTable");
  var button = app.createButton("+", handler);

  // add all to application
  app.add(listBox)
    .add(button)
    .add(table);

  // return to application
  return app;
}

function buttonHandler(e) {
  var app = UiApp.getActiveApplication();

  // get position
  var position = parseInt(ScriptProperties.getProperty('position'),10);

  // get myTable and add 
  app.getElementById("myTable").insertRow(position).insertCell(position, 0).setText(position, 0, e.parameter.myListBox);

  // increment position
  var newPosition = position++;

  // set position  
  ScriptProperties.setProperty('position', newPosition.toString()); 

  // return to application
  return app;
}

Please de-bug the code, so that the authorization process is initiated.

Reference: Script and User Properties

Answer 2

The idea is to keep in memory the index of the row you write to. One can use many ways to achieve this but the most straightforward is probably to write this row index in the table or listBox tag, something like this (I didn't test the code but hope I made no error):

---

EDIT : the tag solution didn't seem to work, so I changed to a hidden widget solution.(tested)

function doGet() {
  var app = UiApp.createApplication();
  var listBox = app.createListBox();
  listBox.addItem("item 1").addItem("item 2").addItem("item 3").setName("myListBox");
  var hidden = app.createHidden().setName('hidden').setId('hidden')
  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);

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

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

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

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