google-apps-script - 如何使 Google UI Services PopupPanel 工作

Question

我正在使用 Google Apps 脚本构建应用程序。但是，我想使用弹出面板在应用程序中弹出我的面板之一。我尝试搜索，但没有找到任何如何使此弹出面板正常工作的示例。

有谁知道如何使这项工作？

我要做的是在垂直面板中创建一个服务列表，当用户单击其中一个服务链接时，它将使用带有模式方法的弹出面板功能弹出面板。因此用户可以在弹出面板中编辑服务详细信息。用户更新服务后，弹出面板将关闭并返回包含服务列表的面板。

谢谢

Answer 1

目前弹出面板无法正常工作，但是您可以制作自己的自定义面板，可以使用客户端处理程序或服务器处理程序在不同的事件上弹出。

这是一个粗略的代码，它将向您展示使用客户端处理程序在单击事件上触发的弹出窗口的演示。

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;
}