公式ガイドの「Dialogs and Sidebars in Google Apps」を制覇する！（その３）

Custom Dialog？

Custom DialogはHtmlServiceかUIAppを使って、Dialogの中身を構築して表示するものです。これは、Google Document、Spreadsheet、Formどれでも利用可能です。

Custom DialogはPromptや、Alertと違って、サーバ側のスクリプトの処理を中断しないので、クライアントでの操作のHandlerを実装する必要があります。（何も実装しないと表示したまま動かないということ）

HtmlServiceを使ってUIを表示する場合は、google.script.host.close()をJavaScriptで呼び出すことで、ダイアログを閉じることができます。UiAppを利用した場合は、UiInstance.close()を呼び出して、ダイアログを閉じます。（詳しくはSpreadsheetとFormAppのサンプルをごらんください。）

また、表示する方法は、Ui.showDialog()を使うか、Spreadsheet.show()を呼び出すことでダイアログが表示されます。（Spreadsheetでは、Uiを取得する方法がありません）

Google Document編

HtmlServiveを使ってUIを構築しています。これまでのサンプルと同じような感じで利用できます。

コード.gs

// 事前にUiオブジェクトを取得しておく
var ui = DocumentApp.getUi();

function onOpen(e) {
  ui.createMenu("テストメニュー")
  .addItem("CustomDialog表示", 'showCustomDialog')
  .addToUi();
}

// 最初に承認が必要です。
function showCustomDialog() {
  var html = HtmlService.createHtmlOutput('Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />')
  .setSandboxMode(HtmlService.SandboxMode.NATIVE)
  .setTitle("Custom Dialog")
  .setWidth(400)
  .setHeight(300);
  
  ui.showDialog(html);
}

Google Spreadsheet編

敢えて、UiAppを使ってカスタムダイアログにしています。HtmlServiceを使ってUIを構築する事ができますが、UiAppを使っても実現可能です。
ただし、FormAppの例もUiAppを使っていますが、Spreadsheetの場合はUiを事前に取得することができない（SpreadsheetAppにはなぜかgetUi()が存在しない）のでSpreadsheet.show(obj)を使って、UIを表示させるようにします。

コード.gs

function onOpen(e) {
  var subMenus = [{name: "CustomDialog表示", functionName: "showCustomDialog"}];
  
  SpreadsheetApp.getActiveSpreadsheet().addMenu("テストメニュー", subMenus);
}

// 最初に承認が必要です。
function showCustomDialog() {
  var app = UiApp.createApplication();
  var panel = app.createHorizontalPanel();
  var label = app.createLabel("Hello World!");
  var button = app.createButton("Close", app.createServerHandler('onClick'));
  panel.add(label);
  panel.add(button);
  app.add(panel);
  app.setTitle("CustomDialog")
  .setWidth(400)
  .setHeight(300);
  
  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

// ダイアログのcloseボタンが押された時のコールバック
function onClick(e) {
  var app = UiApp.getActiveApplication();
  app.close();
  
  return app;
}

Google Form編

Spreadsheetと同じくUiAppを使ってUIを構築しています。どちらがいいのかは好みが別れるところかもしれませんが、UiAppも以前よりも落ち着いてきたんだろうか。

コード.gs

// 事前にUiオブジェクトを取得しておく
var ui = FormApp.getUi();

function onOpen(e) {
  ui.createMenu("テストメニュー")
  .addItem("CustomDialog表示", 'showCustomDialog')
  .addToUi();
}

// 最初に承認が必要です。
function showCustomDialog() {
  var app = UiApp.createApplication();
  var panel = app.createHorizontalPanel();
  var label = app.createLabel("Hello World!");
  var button = app.createButton("Close", app.createServerHandler('onClick'));
  panel.add(label);
  panel.add(button);
  app.add(panel);
  app.setTitle("CustomDialog")
  .setWidth(400)
  .setHeight(300);
    
  ui.showDialog(app);
}

// ダイアログのcloseボタンが押された時のコールバック
function onClick(e) {
  var app = UiApp.getActiveApplication();
  app.close();
  
  return app;
}