Displaying PopupPanel - google-apps-script

Question

THREE QUESTIONS:
Why does my popupPanel not display correctly?
How can I only get it to appear once if clicked multiple times?
How can I add a Close button to the popupPanel?
function showPassword(e){
var app = UiApp.getActiveApplication();
var vrtPanel = app.getElementById("vrtPanel");
//Create Spreadsheet Source
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dF92dGp3c2RORGNkY011dGFnMjBXbXc');
var spTeacherList = spSheet.getSheetByName('TeacherList');
//Create the form elements
var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtPanel);
var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlTeacherName);
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
lstTeacherNames.sort();
for (var l = 0; l < lstTeacherNames.length; l++) {
lbxTeacherName.addItem(lstTeacherNames[l],l);
}
var lblTeacherName = app.createLabel('Teacher Name:');
var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);
var lblExt = app.createLabel('Ext:');
var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');
var lblEmail = app.createLabel('Email:');
var txtEmail = app.createTextBox().setName('txtEmail').setId('txtEmail');
var lblSchool = app.createLabel('School:');
var txtSchool = app.createTextBox().setName('txtSchool').setId('txtSchool');
var btnCreate = app.createButton('Create Event');
//Create validation handler
var valSubmit = app.createServerClickHandler('valSubmit');
valSubmit.addCallbackElement(vrtPanel);
//Add this handler to the button
btnCreate.addClickHandler(valSubmit);
//Add all the elemnts to the panel
var formTable = app.createFlexTable().setCellPadding(3);
vrtPanel.add(formTable);
formTable
.setWidget(0,0,lbxTeacherName)
.setWidget(0,1,txtExt)
.setWidget(0,2,txtTeacherName)
.setWidget(1,0,txtEmail)
.setWidget(2,0,btnCreate);
//Add all the panel to the popup
var popPassword = app.createDecoratedPopupPanel(false, true).setId("popPassword");
popPassword.add(vrtPanel);
app.add(vrtPanel);
app.add(popPassword);
return app;
}

Answer 1

There is some disorder in the way you use the popupPanel, you have to add it to your main panel and add the table you want to show in it to the popup itself.
You should also decide where you want to show it.
Here is the relevant part of your code working :
//Add all the elemnts to the panel
var formTable = app.createFlexTable().setCellPadding(3);
formTable
.setWidget(0,0,lbxTeacherName)
.setWidget(0,1,txtExt)
.setWidget(0,2,txtTeacherName)
.setWidget(1,0,txtEmail)
.setWidget(2,0,btnCreate);
var popPassword = app.createDecoratedPopupPanel(false, true).setPopupPosition(150,300).setId("popPassword");
vrtPanel.add(popPassword.add(formTable));
popPassword.show();
return app;
}
To answer the second point : il won't show up multiple time, just once.
point 3 : if you want to close it with a button you will have to add a button and a server handler to close it (by getting it with an ID just as any other widget) but it would be easier and userfriendly to take advantage of the autohide feature, just change the definition parameters like this :
var popPassword = app.createDecoratedPopupPanel(true).setPopupPosition(150,300).setId("popPassword");
edit : in the example above you can also use
app.getElementById('popPassword').hide()
in your 'valSubmit' function (called by the button) even without the autohide so the popup will hide when the handler function executes.