Question

I am wondering how to add a duplicate panel underneath the previous existing panel (“productOtherPanel”) using the “Add Product” button. I would like the new panel to be inserted below the existing “productOtherPanel” and above the “Add Product” button. I would also like this new panel to contain the same drop down list and text box as the original “productOtherPanel”. I need this panel to duplicate an infinite number of times. Is this possible?

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

  var productOtherPanel = app.createHorizontalPanel().setId('productOtherPanel');
  var productPanel = app.createVerticalPanel().setId('productPanel');
  var productList = app.createListBox().setName("productList").setId('productList');
  productList.addItem("8:1 Compressed Blocks");
  productList.addItem("8:1 Compressed Briquettes");

  var pricePerTonPanel = app.createVerticalPanel().setId('pricePerTonPanel');
  var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox")
  .setText("$0.00");

  var buttonPanel = app.createVerticalPanel().setId('buttonPanel');
  var button = app.createButton("Add Product");

  app.add(productOtherPanel);
  productOtherPanel.add(productPanel);
  productPanel.add(productList);

  productOtherPanel.add(pricePerTonPanel);
  pricePerTonPanel.add(pricePerTonTextBox);

  app.add(buttonPanel);
  buttonPanel.add(button);

  return app;
}

Answer 1

Try to see if this code is what you are looking for:

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

  var productOtherPanel = app.createVerticalPanel().setId('productOtherPanel');
  var productPanel = app.createHorizontalPanel().setId('productPanel');

  // Product list dropdown
  var productList = app.createListBox().setName("productList").setId('productList');
  productList.addItem("8:1 Compressed Blocks");
  productList.addItem("8:1 Compressed Briquettes");

  // Product Price Textbox
  var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox").setText("$0.00");

  productPanel.add(productList);
  productPanel.add(pricePerTonTextBox);

  var buttonPanel = app.createVerticalPanel().setId('buttonPanel');
  var button = app.createButton("Add Product");
  button.addClickHandler(app.createServerHandler("addProductHandler").addCallbackElement(productOtherPanel));

  app.add(productOtherPanel);
  productOtherPanel.add(productPanel);

  app.add(buttonPanel);
  buttonPanel.add(button);

  return app;
}

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

    var productPanel = app.createHorizontalPanel().setId('productPanel');

    // Product list dropdown
    var productList = app.createListBox().setName("productList").setId('productList');
    productList.addItem("8:1 Compressed Blocks");
    productList.addItem("8:1 Compressed Briquettes");

    // Product Price Textbox
    var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox").setText("$0.00");

    productPanel.add(productList);
    productPanel.add(pricePerTonTextBox);

    var panel = app.getElementById("productOtherPanel");
    panel.add(productPanel);

    return app;
 }