Google Apps Script Panel Removal - google-apps-script

Question

I want to use a web page to gather data in stages. When the user clicks next I want to have the current panel removed from the app and a new panel added and I am having trouble making it work.
Here is my current code:
function doGet() {
//Create Application
var app = UiApp.createApplication();
//Set Application Title
app.setTitle("New Lead Form");
/////////////////////////////////Step 1///////////////////////////////////
// Create a Panel for Step 1 Data
var nextbuttonstep1 = app.createButton("Next");
// Create the entry form, a 6 x 2 grid with text boxes for First Name, Last Name, Phone Number, Email, & Property State that is then added to a vertical panel
var grid = app.createGrid(5, 2);
var propertystate = app.createListBox().setName('propertystate').setId('propertystate')
propertystate.addItem('AL');
propertystate.addItem('FL');
propertystate.addItem('IN');
propertystate.addItem('KY');
grid.setWidget(0, 0, app.createLabel('First Name:'));
grid.setWidget(0, 1, app.createTextBox().setName('firstname').setId('firstname'));
grid.setWidget(1, 0, app.createLabel('Last Name:'));
grid.setWidget(1, 1, app.createTextBox().setName('lastname').setId('lastname'));
grid.setWidget(2, 0, app.createLabel('Phone Number:'));
grid.setWidget(2, 1, app.createTextBox().setName('phonenumber').setId('phonenumber'));
grid.setWidget(3, 0, app.createLabel('Email Address:'));
grid.setWidget(3, 1, app.createTextBox().setName('emailaddress').setId('emailaddress'));
grid.setWidget(4, 0, app.createLabel('Property State:'));
grid.setWidget(4, 1, propertystate);
// Create a vertical panel and add the grid to the panel
var step1panel = app.createFlowPanel();
step1panel.add(grid);
step1panel.add(nextbuttonstep1);
app.add(step1panel)
var handler = app.createServerHandler('proceedtostep2');
handler.addCallbackElement(step1panel)
nextbuttonstep1.addClickHandler(handler);
return app;
}
function proceedtostep2(eventInfo) {
var parameter = eventInfo.parameter;
var panel =parameter.step1panel;
var app = UiApp.getActiveApplication();
app.remove(panel);
return app;
}

Answer 1

Panels don't show up as parameters, only input fields do. You will have to retrieve the panel you want to remove using it's ID:
...
// Create a vertical panel and add the grid to the panel
var step1panel = app.createFlowPanel().setId('someUniqueIdString');
...
and
...
function proceedtostep2(eventInfo) {
var app = UiApp.getActiveApplication();
app.remove(app.getElementById('someUniqueIdString'));
return app;
}
But removing all elements from a application window does not close the window. The Window only remains in a ugly state.
Adding other widgets after the remove is OK but you should use some fresh ID's. If you use old ID strings with new widgets bad things happen.