Display a pop up UI based on users' answer - google-apps-script

Question

I currently have a UI with drop down questions. When a user select a certain answer in the drop down list, I want to show another UI that will allow the user to answer more questions. Then, I would like to close this window and return the user to the first UI and continue answering questions.
I have tried popuppanel, set one Ui's invisibility to false but nothing seems to work.
NOTE: Since the data in my first UI are dynamic, I can't use the GUI builder so please only provide solutions using code.
These are the code I have so far:
// when user select this drop down option, show another UI
case 'Move to a special meeting':
displayActionItemsUI();
cellStatus.offset(numOfRowsOffset,0).setValue(N);
cellMeetingType.offset(numOfRowsOffset,0).setValue('Special Meeting');
break;
function displayActionItemsUI() {
var app = UiApp.getActiveApplication();
var panelActionItems = app.createVerticalPanel();
var gridActionItems = app.createGrid(3, 2).setId('gridActionItems')
.setCellPadding(15);
var lblTaskStatement = app.createLabel('Task Statement:');
var lblOwner = app.createLabel('Owner:');
var lblDeadline = app.createLabel('Deadline:');
var tboxTask = app.createTextBox().setId('tboxTask').setName('tboxTask');
var tboxOwner = app.createTextBox().setId('tboxOwner').setName('tboxOwner');
var dboxDeadline = app.createDateBox()
.setFormat(UiApp.DateTimeFormat.DATE_SHORT)
.setId('dboxDeadline').setName('dboxDeadline');
gridActionItems.setWidget(0, 0, lblTaskStatement);
gridActionItems.setWidget(0, 1, tboxTask);
gridActionItems.setWidget(1, 0, lblOwner);
gridActionItems.setWidget(1, 1, tboxOwner);
gridActionItems.setWidget(2, 0, lblDeadline);
gridActionItems.setWidget(2, 1, dboxDeadline);
var btnAdd = app.createButton('Add');
var lblTest = app.createLabel().setId('lblTest').setVisible(false);
panelActionItems.add(gridActionItems)
.add(btnAdd).add(lblTest);
app.add(panelActionItems);
addHandler = app.createServerHandler('_responseToAdd')
.addCallbackElement(panelActionItems);
btnAdd.addClickHandler(addHandler);
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.show(app);
}
// add response to a separate tab and close the UI
function _responseToAdd(e) {
// store user's inputs;
var actionItems = [];
var actionObject = new Object();
var taskStatement = e.parameter.tboxTask;
var owner = e.parameter.tboxOwner;
var deadline = e.parameter.dboxDeadline;
actionObject['task'] = taskStatement;
actionObject['owner'] = owner;
actionObject['deadline'] = deadline;
actionItems.push(actionObject);
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Action Items");
var headers = ['task', 'owner', 'deadline'];
var valuesR = ObjApp.objectToArray(headers, actionItems); //returns [[]]
sheet.getRange(sheet.getLastRow()+1, 1, 1, valuesR[0].length).setValues([valuesR[0]]);
var app = UiApp.getActiveApplication();
var panelActionItems = app.getElementById('panelActionItems');
panelActionItems.clear();
return app;
}

Answer 1

I think you could do it using multiple panels like in this post answer, you could build the panels and change their content depending of the answers...