7

我正在寻找在我的 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;
     }
4

4 回答 4

7

由于UiApp已贬值，因此应使用HTMLService来创建自定义用户界面。

提示简单的弹窗显示消息，使用Ui 类alert的方法

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

将提示带有 hello world 和 ok 按钮的简单弹出窗口。

要在 Dialog 中显示自定义的 html 模板，请使用 HTMLService 创建模板，然后将其传递给showModalDialogUi 类的方法

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

HtmlService.createHtmlOutputFromFile允许您显示位于单独文件中的 html。见文档

于 2015-09-16T13:53:57.817 回答
2

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

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() {/* */}

于 2012-08-22T07:43:02.377 回答
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”等来堆叠面板。位置 = 您的面板将位于由 (x,y) 表示的固定位置

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

还有一件事，我注意到您获得了活动应用程序，然后创建了一个新应用程序。您无需创建新应用……只需在应用内创建新面板即可。

希望这可以帮助！

于 2013-01-21T03:30:54.130 回答
0

弹出窗口 - 使用这样的东西：

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

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

于 2012-08-22T03:42:03.420 回答