google-apps-script - 管理两个 UI 的最佳方法是什么？

Question

我创建了两个用户界面。如何关闭第一个并激活下一个？谷歌应用脚​​本下是否可以有两个用户界面？

我尝试过类似的东西：

var app = UiApp.getActiveApplication();
app.add(app.loadComponent("APPGui"));
var panel1 = app.getElementById("LoginPanel1");
panel1.setVisible(false);
return app;

Answer 1

最简单的方法可能是在同一个 GUI 构建器中设计两个面板，一个在 2 个单独的面板中彼此重叠，“登录面板”在另一个上方，它会在活动时屏蔽另一个。当您将其设置为“不可见”时，您会看到下面的那个。根据您的用例，登录面板可能会隐藏全部或仅部分主面板。GUI 构建器具有所有必要的工具来决定哪个在前面或后面。

Answer 2

这是一个接一个显示的三个对话框的示例，通过CacheService对象维护它们之间的状态/数据。

（您可以使用 UserProperties、ScriptProperties 甚至隐藏字段作为替代方案，但每个都有自己的范围......）

希望这在不解释 UI Builder 中每个对话框包含什么的情况下是有意义的。

function showDialog1(){
  var app = UiApp.createApplication();
  app.add( app.loadComponent("Dialog1") );
  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

function onDialog1OKButton(e){
  CacheService.getPrivateCache().put("n1", e.parameter.n1);

  var app = UiApp.getActiveApplication();
  var d2 = app.loadComponent("Dialog2");
  app.add(d2);

  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

function onDialog2OKButton(e){
  var c = CacheService.getPrivateCache();
  c.put("n2", e.parameter.n2);

  var app = UiApp.getActiveApplication();
  app.add(app.loadComponent("DialogResult")); 

  var n1 = c.get("n1");
  var n2 = c.get("n2");
  var l = app.getElementById("Label2");
  l.setText( "" + n1 + " + "  + n2 + " = " + (parseInt(n1) + parseInt(n2)) );

  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

Answer 3

我更喜欢构建多个 GUI。使用此代码，您可以在它们之间跳转。

function doGet() {

   var app = UiApp.createApplication();
   var base0 =app.createAbsolutePanel().setId('GUI_base0').setHeight('630px').setWidth('1125px');
   app.createAbsolutePanel().setId('GUI_base1');  // create all abs_panells but not use
   // you need to create all abspanels if you want to jump between them
   app.createAbsolutePanel().setId('GUI_base2');  // create here all the absolute panels (1 for every GUI)
   // app.createAbsolutePanel() ... GUI3, GUI4 ...

   var component0 = app.loadComponent("GUI_password");  // load first GUI (his name is "password"

         /// this is an example of code for the 1st GUI ////////////////////
         /// I can  check if the user can see the second GUI
         var label_ID = app.getElementById('LB_ID');
         var user = Session.getActiveUser().getEmail();
         if ( user == 'XXX@yyyy.com' ) { 
            label_ID.setText(user).setTag(user);  // only show if ....
         }
         ////////////////////////////////////////////////////////////////////

    base0.add(component0);   // GUI_password over absolute panel
    app.add(base0);

    // handler Button1  // we can show a button only if the password is correct or is a valid user or ...
    app.getElementById('BT_jump').addClickHandler(app.createServerHandler('NOW_gui1'));

    return app;  

};


function NOW_gui1(e) {

    var app = UiApp.getActiveApplication();

    var base0 = app.getElementById("GUI_base0").setVisible(false); // hide 1st abs_panel created with code
    var base2 = app.getElementById("GUI_base2").setVisible(false); // hide 3rd abs_panel created with code
    ///  hide all others abs_panel

    var base1 = app.createAbsolutePanel().setId('GUI_base1').setHeight('630px').setWidth('1125px');  // maybe get by ID ??, but this work
    var component1 = app.loadComponent("GUI_1");  // load the second GUI

    base1.add(component1);  // load GUI_1 over 2n absolute panel
    app.add(base1);

    // HERE THE CODE OF THE GUI_1


    // handler Button2  
    app.getElementById('BT_jump_1_to_2').addClickHandler(app.createServerHandler('NOW_gui2')); 


    return app;
};