Question

我正在寻找简单的代码，在我点击提交按钮时，我的Google Apps脚本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;
     }

Answer 1

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

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相关的问题：在对象函数createApplication（）中找不到函数createDialogBox {/ * * /}

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，它将消失。

还有一件事，我注意到你得到了活跃的应用程序，然后创建了一个新的应用程序。您无需创建新应用......只需在应用内添加新面板。

希望这有帮助！

Answer 3

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

要提示简单弹出窗口显示消息，请使用Ui class

的alert方法

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

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

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

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

HtmlService.createHtmlOutputFromFile允许您显示单独文件中的html。请参阅documentation

Answer 4

弹出窗口 - 使用类似的东西：

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

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

Google Apps脚本中的简单弹出窗口或对话框

4 个答案: