CODEWITHSUNDEEP
user-interfacegoogle-apps-scriptgoogle-sheets
BeNdErR
BeNdErR

Reputation: 17927

refresh panel content in event handler

I'm trying to create a simple gui with Google-app-script on a spreadsheet, that allows the user to enter n emails, updating the email list whenever the user adds the new email.

This is how the gui looks like, to give you an idea:

enter image description here

ISSUES

  1. I need to get the TextBox value. Googlin' around I found out that I need to use, in the event handler, e.parameter.elementName, but it's not working (Returns undefined) solved adding a addCallbackElement to the click handler

  2. I need to refresh the content of the scrollPanel, reloading the entire list adding the newly added email. for some reason, I'm able to get a reference to the scrollPanel element (if I print Logger.log(scrollPanel.getId()) it prints the correct id!), but I'm not able to clear the content and reload the list..

CODE

showDialog()

//--- in the future, this array will be populated dinamically
var emails = ["[email protected]", "[email protected]","[email protected]", "[email protected]","[email protected]", "[email protected]" ];

//--- called on spreadsheet open
function showDialog(){
    var app = UiApp.createApplication();
    var panel = app.createVerticalPanel().setWidth("100%");

    ... 
    var label = app.createLabel("New email address:");
    var txtBox = app.createTextBox()
                    .setName("myTextBox")
                    .setId("myTextBox");
    ...

    var addBtn = app.createButton("Add")
                    .addClickHandler(app.createServerHandler("addToList")
                                        .addCallbackElement(panel));

    var scrollPanel = app.createScrollPanel()
                         .setId("myScrollPanel");


    var emailList = getEmailList();

    scrollPanel.clear().add(emailList);

    //--- add everything to panel
    panel.add(addBtn);
    ...
    panel.add(scrollPanel);
    ...
    var doc = SpreadsheetApp.getActive();
    doc.show(app);
}

getEmailList()

function getEmailList(){
    var app = UiApp.getActiveApplication();
    var listGrid = app.createGrid(emails.length, 1)
                      .setId("listGrid"):
    for(var x = 0; x < emails.length; x++){
        var emailTxtBox = app.createTextBox();
        emailTxtBox.setValue(emails[x]);

        listGrid.setWidget(x, 0, emailTxtBox);
    }
    return listGrid;
}

addToList()

function addToList(e){
    var app = UiApp.getActiveApplication();
    var newEmailVal = e.parameter.myTextBox; //--- this is not working

    emails.push(newEmailVal) //--- add the new value to the array

    var scrollPanel = app.getElementById("myScrollPanel");
    scrollPanel.clear()
               .add(getEmailList());

}

Any idea? Thank you, best regards

Upvotes: 0

Views: 167

Answers (1)

Serge insas
Serge insas

Reputation: 46802

You don't need to clear the scrollPanel, you just have to update the textBox content with new values.

To achieve that simply give an name and an ID to each of them in the createList function. You don't show the code you are using to create the list of textBoxes but I suppose you are using some kind of loop then create IDs and names using a string composition that will be used to retrieve values and update contents like this :

  for(var n in emailArray){ // assuming emailArray is an array containing your old email list or whatever
    var textBox = app.createTextBox().setName('email'+n).setId('email'+n).setWidth(200).setText('Old Email = '+emailArray[n]+', enter new email ...');
    }

and then to get the values you can simply use e.parameter.email0 for the first one, email1 for the second etc or in a similar loop :

 var emails = [];
   for(var n in emailArray){
        emails.push(e.parameter.['email'+n]);// store each email in an array
   }

All in all your code will be shorter and easier to read even if the list gets long.

If you need more concrete indications related to your specific use case please show the createList function code.

EDIT : here is a full version that adds items to your list, (most recent on top for better readability) and brings an elegant solution to your global variable issue (you didn't mention it yet but your global array was read-only, now it is accessible from every function thanks to the TAG feature.

function showDialog(){
  var emails = ["[email protected]", "[email protected]","[email protected]", "[email protected]","[email protected]", "[email protected]" ];
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel().setWidth("100%");
  var label = app.createLabel("New email address:");
  var txtBox = app.createTextBox().setName("myTextBox").setId("myTextBox");
  txtBox.setTag(emails.toString());
  panel.add(txtBox);
  var addBtn = app.createButton("Add")
  .addClickHandler(app.createServerHandler("addToList").addCallbackElement(panel));

  var scrollPanel = app.createScrollPanel().setId("myScrollPanel");
  var listGrid = app.createFlexTable().setId("listGrid");
  for(var x = 0; x < emails.length; x++){
    var emailTxtBox = app.createTextBox().setValue(emails[x]).setId('mail'+x).setName('email'+x);
    listGrid.setWidget(x, 0, emailTxtBox);
  }
  scrollPanel.add(listGrid);
  panel.add(addBtn);
  panel.add(scrollPanel);
  app.add(panel);
  var doc = SpreadsheetApp.getActive();
  doc.show(app);
}


function addToList(e){
  var emails = e.parameter.myTextBox_tag.split(',');
  var app = UiApp.getActiveApplication();
  var listGrid = app.getElementById('listGrid');
  var newEmailVal = e.parameter.myTextBox; 
  emails.unshift(newEmailVal); 
  Logger.log(emails);
  Logger.log(emails.length);
  for(var x = 0; x < emails.length; x++){
    var emailTxtBox = app.createTextBox().setValue(emails[x]).setId('mail'+x).setName('email'+x);
    listGrid.setWidget(x, 0, emailTxtBox);
  }
  app.getElementById('myTextBox').setTag(emails.toString()).setText('next ? come on, just do it !');
  return app;
}

Upvotes: 1

Related Questions