event-handling - 来自客户端处理程序的 Google Apps 脚本对话框显示

Question

我正在尝试使用 DialogBox 创建一个“你确定”类型的对话框。因此，当有人单击按钮时，会显示一个带有是/否按钮的弹出窗口，供用户确认他们希望继续执行该操作。

我已经弄清楚了大部分，但是我不知道如何在不回调服务器处理程序的情况下使其显示。

我尝试使用带有客户端处理程序的 show() 命令，但它不起作用。我也尝试使用 setVisibility() ，但也无法正常工作。

出于明显的用户体验原因，我不想为了显示对话框而往返。

有没有人有什么建议？

在此先感谢克里斯

Answer 1

这是我为此创建的一个小片段。但是它确实使用了服务器处理程序......

function MsgBox(message, title, id, buttons, handler, modal, autoHide){
  this.message=message;
  this.title=title;
  this.id=id;
  this.buttons=buttons;
  this.handler=handler;
  this.modal=(modal)?true:false;//Default is false
  this.autoHide=(autoHide)?new Boolean(autoHide):true;//Default is true

  this.position={};
  this.position.top=100;
  this.position.left=550;
  this.position.width=400;

  this.button={};
  this.button.ok={name:"Ok",id:"OK_BTN"};
  this.button.yes={name:"Yes",id:"YES_BTN"};
  this.button.no={name:"No",id:"NO_BTN"};
  this.button.cancel={name:"Cancel",id:"CANCEL_BTN"};
  this.button.retry={name:"Retry",id:"RETRY_BTN"};

  this.addButton=function(btn){
    try{
      if(this.buttons==undefined){this.buttons=[];}
      if(typeof btn=="string"){btn=this.button[btn.toLowerCase()];}//If a string, convert to the intended object
      if(btn.name==undefined){return this;}//Check if we've actualy got one of the buttons by checking one of it's properties. Exit if not.
      this.buttons.push(btn);
    }catch(err){
      Logger.log(err.message);
    }
    return this;
  };

  this.show=function(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(this.buttons==undefined){this.buttons=[this.button.ok];}//The default is one 'Ok' button
    var dialog=app.createDialogBox(true,true).setId(this.id).setText(this.title);
    dialog.setPopupPosition(this.position.left,this.position.top);
    dialog.setGlassEnabled(this.modal);
    dialog.setAutoHideEnabled(this.autoHide);
    var basePanel=app.createVerticalPanel().setWidth(this.position.width+"");
    basePanel.add(app.createLabel(this.message).setWordWrap(true).setStyleAttribute("padding", "10px"));//Add message
    var buttonPanel=app.createHorizontalPanel().setId("ButtonPanel");
    basePanel.add(buttonPanel.setStyleAttribute("display", "block").setStyleAttribute("margin-left", "auto").setStyleAttribute("margin-right", "auto"));
    var btnHandler=app.createServerHandler("msgBox_close").addCallbackElement(buttonPanel);
    for(var i=0;i<this.buttons.length;i++){
      var btn=app.createButton(this.buttons[i].name, btnHandler).setId(this.buttons[i].id).setTag(this.id);
      if(this.handler!=undefined){btn.addClickHandler(this.handler);}
      buttonPanel.add(btn);
    }
    dialog.add(basePanel).show();
    return app;
  };
}

function msgBox_close(e, app){
  if(app==undefined){app=UiApp.getActiveApplication();}
  var dialogId=e.parameter[e.parameter.source+"_tag"];  
  app.getElementById(dialogId).hide();
  return app;
}

这是一个如何使用它的小例子。

var msgBox=new MsgBox("Testing 123...", "This is a test", "MyMsgBox");
msgBox.show(e, app);

通过使用 '_tag' 参数来引用它自己的 ID，您可以轻松地进行一次干净的往返。

您可以通过调用 .addButton() 函数来添加标准按钮。例子：

msgBox.addButton("yes").addButton("no");

通过传递您自己的处理程序，您可以调用自己的函数。例子：

function myOwnHandler(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(e.parameter.source.indexOf("YES_BTN")!=-1){

    }
    return app;
}