Google Apps腳本中的簡單彈出窗口或對話框

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

由於UiApp已棄用， 因此應使用HTMLService來創建自定義用戶界面。

要提示簡單的彈出窗口顯示消息，請使用Ui類的 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。 看文檔

Answer 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相關的問題：在對象函數createApplication（）{/ * * /}中找不到函數createDialogBox

Answer 3

你嘗試過使用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）表示的固定位置

在您單擊提交之前，可見性設置為false，然后為您的提交按鈕設置客戶端處理程序使popupPanel可見。 當您單擊popupPanel上的按鈕時，讓客戶端處理程序再次將可見性設置為false，它將消失。

還有一件事，我注意到你得到了活躍的應用程序，然后創建了一個新的應用程序。 您無需創建新應用......只需在應用內添加新面板即可。

希望這可以幫助！

Answer 4

彈出 - 使用這樣的東西：

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

將項添加到表中並根據需要隱藏和顯示。