How to make the Google UI Services PopupPanel work

Question

I'm building an application using Google Apps Script. However, I would like to use the Popup Panel to pop up one of my panel in the application. I tried to search, but I did not find any example how to make this pop up panel working properly.

Does anyone have the idea how to make this work?

What I'm trying to do is to create a list of services in the vertical panel, when users click one of the service link then it will pop up the panel using the Popup Panel function with modal method. So user can edit the service details in the pop up panel. After the users update the service, then popup panel will close and go back to panel which contain the list of services.

Thanks

Answer 1

Currently popup panel doesn't work properly, However you can make your own custom panels which can be made to popup on different events using client handler or server handler.

Here is a rough code which will show you a demo for a popup triggered on a click event using client handler.

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

  app.add(createMaskPanel_());//this is used to make poup panel modal

  var mainPanel = app.createVerticalPanel();
  app.add(mainPanel);
  var btn = app.createButton('Open poup');
  mainPanel.add(btn);

  //Makke a panel for poup and add your popup elements
  var popup = app.createVerticalPanel().setId('popup').setVisible(false)
  .setStyleAttributes(
    {'position': 'fixed', 
     'border' : '1px solid black',
     'top' : '40%',
     'left' : '43%',
     'width' : '150', 
     'height':'150',
     'zIndex' : '2'});
  popup.add(app.createTextBox());
  popup.add(app.createButton('Close').addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(false)));
  app.add(popup);


  btn.addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(true));

  return app;
}

function createMaskPanel_(){ //Called when the setting UI loads, initially it will be invisble. id needs to be made visible
  //by accessing its id "mask"
  var app = UiApp.getActiveApplication();
  var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
  .setStyleAttributes({
    'backgroundColor' : '#f4f4f4',
    'position' : 'fixed',
    'top' : '0',
    'left' : '0',
    'zIndex' : '1',
    'opacity' : '0.5'}).setVisible(false);
  //Added a dummy element so that it spans to whole window.
  //don't know why but it works
  mask.add(app.createLabel('SBC Technology')
           .setStyleAttribute('color', '#f4f4f4')
           .setStyleAttribute('opacity', '0.5')); 
  return mask;
}