Question

The aim is to remove only the last row at any time and only by the last remove button.

There is a user interface which building up as a multiplication of the same row. The number of rows are controlled by ‘Add’ & ‘Remove’ buttons which are also elements of the row. The problem is that the hidden widgets – that are applied for each row to distinguish the instances by storing their row numbers – are storing the very same number which is the last one. Except the first (0) hidden widget which stores the proper number (0). Where am I missing the point? How should this be resolved?

As per the remove buttons have two different purposes (not detailed here), we use a cacheService to distinguish the last row from all the others. Only the last row should be removed at any time.

 var cache = CacheService.getPrivateCache();

we clear the cache and create the first instance

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.createVerticalPanel().setId('mainContainer'));
  cache.removeAll([]);
  ui(0);
  cache.put('numberOfInstances',0);
  return app; }

each instance is held by a horizontal panel which contains the mentioned hidden widget, a label which informs about the instance number, and the Add & Remove buttons.

function ui(instance) {
  var app = UiApp.getActiveApplication();
  var eventContainer = app.createHorizontalPanel()
      .setId('eventContainer' + instance);
  var instanceContainer = app.createHidden('instanceContainer',instance);
  var showInstance = app.createLabel(instance)
      .setId('showInstance' + instance);
  var addButton = app.createButton('Add')
      .setId('add' + instance)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(instanceContainer));
  var removeButton = app.createButton('X')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(instanceContainer));
  app.getElementById('mainContainer')
    .add(eventContainer
         .add(instanceContainer)
         .add(showInstance)
         .add(addButton)
         .add(removeButton));
  return app; }

and the event handling…

function add(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  ui(instance+1);
  cache.put('numberOfInstances',instance+1);
  return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  var numberOfInstances = cache.get('numberOfInstances')
  if( (instance != 0) && (instance = numberOfInstances) ) {
    app.getElementById('mainContainer').remove(app.getElementById('eventContainer' + instance));
    cache.put('numberOfInstances',instance-1);
    app.getElementById('add' + (instance-1)).setEnabled(true); } //avoiding multiple click during server response
  return app; }

The aim is to remove only the last row at any time and only by the last remove button.

Many Thanks.

Answer 1

Why don’t you simply use a clientHandler just as you did on the ‘add’ button? You could target the preceding ‘remove’ button and disable it each time you create a new one and change /update each time you remove one row.

EDIT : I can suggest you something, feel free to have a look, I changed a bit the approach but it is working and I hope you’ll find it at least interesting 😉

Link to the online test

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

  var counter = app.createHidden().setName('counter').setId('counter').setValue('1');

  var mainContainer = app.createVerticalPanel().setId('mainContainer')
  app.add(mainContainer.add(counter));

  var event1Container = app.createHorizontalPanel()
  var showInstance = app.createLabel('1')
  var addButton = app.createButton('Add')
      .setId('add1')
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove1')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    mainContainer.add(event1Container
                 .add(showInstance)
                 .add(addButton)
                 .add(removeButton));
  return app; }



function add(inst) {
  var app = UiApp.getActiveApplication();
  var hiddenVal =inst.parameter.counter;
  var counterVal = Number(hiddenVal);
  var mainContainer = app.getElementById('mainContainer')
  var counter = app.getElementById('counter')
  ++ counterVal
  counter.setValue(counterVal.toString())
  var eventContainer = app.createHorizontalPanel().setId('eventContainer'+counterVal)
  var showInstance = app.createLabel(counterVal.toString())
  var addButton = app.createButton('Add')
      .setId('add'+counterVal)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove'+counterVal)
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    app.add(eventContainer
       .add(showInstance)
       .add(addButton)
       .add(removeButton));
 if(counterVal>1){app.getElementById('remove'+(counterVal-1)).setEnabled(false)}      
return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var counterVal = Number(inst.parameter.counter);
  var counter = app.getElementById('counter')
  if(counterVal ==1) {return app}
  var maincontainer =  app.getElementById('mainContainer')
  app.getElementById('eventContainer' + counterVal).setVisible(false)
  --counterVal
  counter.setValue(counterVal.toString())
  app.getElementById('add'+counterVal).setEnabled(true)
  app.getElementById('remove'+counterVal).setEnabled(true)
  return app; 
  }

NOTE : I didn’t make use of .remove(widget) since this is a fairly new method and I don’t know exactly how it works… I’ll test it later. Until then I used setVisible(false) instead, sorry about that 🙂

Note 2 : I didn’t use the cache since the hidden widget is sufficient to keep track of what is going on… if you needed it for something else then you could always add it back .