1

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;
}

1 Answer 1

0

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")) ?

5
  • Hello Serge, this works like a charm. Thanks so much for your help. I really appreciate your time. I don't think I was clear enough in with my last question, that's my fault. I am learning one day at a time. Thx again. Nov 25, 2012 at 0:09
  • Hi Serge, the 5 is to make the "Size Label" shift over enough so it looks nice when "Item 1" and "Item A" are right next to each other in the flextable, otherwise they are very close to each other within the flextable. It there another way to space them out next to each other when added to the flextable? Nov 25, 2012 at 1:05
  • You can define the flextable width to give more place to the headers... try like this : var table = app.createFlexTable().setId("myTable").setWidth('200'); and table.setBorderWidth(1).setCellPadding(2);Then keep a 1 for cell position Nov 25, 2012 at 8:31
  • have you tried to use a changeHandler on the listBox itself ? like this : listBox.addChangeHandler(handler) it becomes easier to manipulate ;-) Nov 25, 2012 at 17:42
  • I haven't... I like that handler like that. It feels like it keeps everything more organized as well. I shall try that. I am trying your flextable width tip as well right now. Thx Serge. Nov 25, 2012 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.