在Google应用脚本中创建简单的弹出窗口或对话框

Question

我正在寻找一段简单的代码，在我的Google Apps Script Ui中添加一个弹出窗口，当我点击提交按钮时会弹出。弹出框将显示一条消息，并有一个关闭弹出窗口的按钮。

我已经到处查找了 - 似乎所有内容都非常复杂，而且做得比我需要的要多。

这是我目前拥有的提交按钮的代码。

     function doGet() {
       var app = UiApp.createApplication();
       app.setTitle("My Logbook");

       var hPanel_01 = app.createHorizontalPanel();
       var vPanel_01 = app.createVerticalPanel();
       var vPanel_02 = app.createVerticalPanel();
       var vPanel_03 = app.createVerticalPanel();

       var submitButton = app.createButton("Submit");

       //Create click handler
       var clickHandler = app.createServerHandler("submitData");
       submitButton.addClickHandler(clickHandler);
       clickHandler.addCallbackElement(hPanel_01);


       ////Test PopUp Panel
       var app = UiApp.getActiveApplication();
       var app = UiApp.createApplication;
       var dialog = app.createDialogBox();
       var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
       submitButton.addClickHandler(closeHandler);

       var button= app.createButton('Close').addClickHandler(closeHandler);

       dialog.add(button);
       app.add(dialog);
       //////



       return app;
     }

- sbaden

Answer 1

由于UiApp已经过时，应该使用HTMLService来创建自定义用户界面。

要提示简单的弹出窗口以显示消息，请使用Ui类的alert方法。

var ui = DocumentApp.getUi();
ui.alert('Hello world');

将会弹出一个简单的弹窗，显示“你好，世界”和一个确定按钮。

要在对话框中显示自定义的HTML模板，请使用HTMLService创建模板，然后将其传递给Ui类的showModalDialog方法。

var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");

HtmlService.createHtmlOutputFromFile允许您显示在单独文件中的HTML。请参阅文档。

- m5khan

---

这就是我一直在寻找的一个简单的单/双行代码，用于创建一个简单的消息框。为什么不再使用 alert("msg"); 呢？为什么要让谷歌变得如此复杂呢？ - Omar

Answer 2

你尝试过使用zIndex吗？它可以将面板放置在所有其他面板的上方...

var popupPanel = app.createVerticalPanel().setId('popupPanel')
    .setVisible(false)      
    .setStyleAttribute('left', x)  
    .setStyleAttribute('top', y)        
    .setStyleAttribute('zIndex', '1')
    .setStyleAttribute('position', 'fixed');

x = 应用程序左侧的面板位置 y = 应用程序顶部的面板位置 zIndex = 面板出现的'层'。您可以使用'1'、'2'、'3'等来叠放面板。 position = 您的面板将被固定在(x,y)处。

可见性设为false，直到您单击提交，然后为提交按钮设置客户端处理程序，使popupPanel可见。当您单击popupPanel上的按钮时，让客户端处理程序再次将可见性设置为false，它就会消失。

还有一件事，我注意到您获取活动应用程序，然后创建一个新应用程序。您不需要创建一个新的应用程序...只需在您的应用程序内创建新的面板即可。

希望这能帮到您！

- Trevor Iampen

---

没问题...我经常使用它在一些应用程序中拥有多层面板。它可以非常有效。 - Trevor Iampen

Answer 3

您可以使用对话框来弹出窗口。 在对话框中添加一个按钮。添加客户端处理程序，一旦您点击按钮，就会将对话框设置为不可见。

var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);

var button= app.createButton('Close').addClickHandler(closeHandler);

dialog.add(button);
app.add(dialog);

这应该会有所帮助。

编辑

在.createClientHandler后面添加“()”。这样就可以消除与TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}相关的问题。

- balajiboss

---

不确定我做错了什么——我收到了一个错误：TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}。我已经更新了上面的代码... 我在这里为了保持简单，省略了向应用程序添加面板和提交按钮的代码。 - sbaden

我不知道为什么你想要在“//Testpopup ....”注释后面的两行代码？并且请通过在“.createClientHandler”后添加()来更正该行代码：var closeHandler = app.createClientHandler.forTargets(dialog).setVisible(false); - balajiboss

我并不一定需要这两行代码，只是不确定是否需要它们。我更改了代码，以便您可以看到我的代码，并指导我如何更改以适应弹出窗口。我修复了 .createClientHandler()。 - sbaden

他在UiApp.createApplication后面缺少省略号。 - Trevor Iampen

@balajiboss在UiApp.createApplication后缺少省略号; 应该写成：var app = UiApp.createApplication();另外，只要你喜欢弹出框的浅蓝色边框和阴影，那么这个解决方案就可以了。不幸的是，无法为对话框设置样式。如果您想为弹出框设置样式，则需要创建一个simplePanel、verticalPanel、flowPanel或类似的容器，并使用zIndex方法。 - Trevor Iampen

Answer 4

弹出窗口 - 可以使用类似这样的代码：

      var table = app.createFlexTable();
      table.setStyleAttribute("position", "absolute");
      table.setStyleAttribute("background", "white");      

将项目添加到表格中，并根据需要隐藏或显示。

- eddyparkinson