如何使Google UI服务PopupPanel有效 [英] How to make the Google UI Services PopupPanel works

问题描述

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

有没有人有这个想法如何使这项工作？ p>

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

谢谢

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

 函数doGet（）{
 var app = UiApp.createApplication（）; 
 
 app.add（createMaskPanel _（））; //这是用来制作poup面板的模态
 
 var mainPanel = app.createVerticalPanel（）; 
 app.add（mainPanel）; 
 var btn = app.createButton（'Open poup'）; 
 mainPanel.add（btn）; 
 
 //为poup创建一个面板并添加您的弹出元素
 var popup = app.createVerticalPanel（）。setId（'popup'）。setVisible（false）
 .setStyleAttributes （
 {'position'：'fixed'，
'border'：'1px纯黑'，
'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））; 
 
返回应用; 
} 
 
 function createMaskPanel _（）{//当设置用户界面加载时调用，最初它将是不可见的。 ID需要变得可见
 //通过访问其ID掩码
 var app = UiApp.getActiveApplication（）; 
 var mask = app.createVerticalPanel（）。setId（'mask'）.setSize（'100％'，'100％'）// maskPanel来掩饰ui 
 .setStyleAttributes（{
'backgroundColor'：'＃f4f4f4'，
'position'：'fixed'，
'top'：'0'，
'left'：'0'，
 'zIndex'：'1'，
'opacity'：'0.5'}）。setVisible（false）; 
 //添加了一个虚拟元素，以便跨越整个窗口。 
 //不知道为什么，但它可以工作
 mask.add（app.createLabel（'SBC Technology'）
 .setStyleAttribute（'color'，'＃f4f4f4'）
 .setStyleAttribute（'opacity'，'0.5'））; 
返回掩码; 
} 
  

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

解决方案

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

这篇关于如何使Google UI服务PopupPanel有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！