Help us understand the problem. What is going on with this article?

公式ガイドの「Dialogs and Sidebars in Google Apps」を制覇する!(その3)

More than 5 years have passed since last update.

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;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした