[GAS][Ui]Submitボタンを実装するには: 逆引きGoogle Apps Script

▼サンプルスクリプト

フォームに入力した値をスプレッドシートに挿入するサンプルスクリプト。

// To-Do入力フォームを表示
function doGet() {
  var app = UiApp.createApplication(); 
  var formPanel = app.createFormPanel();
  var hPanel = app.createHorizontalPanel();
  hPanel.add(app.createLabel('ToDo:'));
  hPanel.add(app.createTextBox().setName('todo'));
  hPanel.add(app.createSubmitButton('保存'));
  formPanel.add(hPanel);
  app.add(formPanel);
  return app;
}

// フォームから送信された値をシートに挿入
function doPost(e){
  var app = UiApp.getActiveApplication();
  // To-Do保存先シートのIdからオブジェクト取得
  var ss = SpreadsheetApp.openById('xxxxxxxxxxx');
  var sheet = ss.getSheetByName('シート1');
  sheet.getRange('A'+(sheet.getLastRow()+1)).setValue(e.parameter.todo);
  // doPost()で日本語を出力するとエラーになるため、英数字のみ表示
  app.add(app.createLabel('Saved changes.'));
  return app;
}

行2: doGet()はHTTP GETでスクリプトが呼び出された際に実行されるメソッド。ここでは入力フォームを表示している。

行3: Uiインスタンスを生成

行4: SubmitButtonウィジェットはFormPanelに含める必要があるため、FormPanelウィジェットを生成しておく。

行5: ラベル – テキストボックス – Submitボタンを水平方向に並べるため、HorizontalPanelを生成。

行8: Submitボタンを生成。詳細については後述。

行15: Submitボタンは他のボタンとは異なり、イベントハンドラを指定しなくても、クリック時にdoPost(e)イベントが実行される。

行16:さきほどdoGet()メソッド内で生成したUiオブジェクトをあらためて取得。

行18: 入力されたToDoを挿入するスプレッドシートオブジェクトをスプレッドシートIdから取得している。

• 関連：Idからスプレッドシートオブジェクトを取得するには

行19: ToDo保存先シートオブジェクトをシート名から取得している。

• 関連：シート名からシートオブジェクトを取得するには

行20: テキストボックスに入力された値をシートの最終行に挿入している。

• 関連：シートの最終行を取得するには
• 関連：シートに値をセットするには

行22: 処理終了メッセージを表示している。doPost()内のUiインスタンスに、日本語が含まれるオブジェクトを追加すると何故か実行時例外が発生するので注意が必要。

構文

createSubmitButton()

createSubmitButton(html)

Submitボタンを生成。

このようなHTMLに展開される

保存

パラメータ

html

<button>タグと</button>タグの間に出力するhtml。例えば<strong>保存</strong>をパラメータとして指定すると、

保存

が展開される。

公式ドキュメント

• Create Submit Button
• Submit Button

関連記事

この投稿は 2012 年 4 月 8 日 日曜日 7:12 AM に Google Apps Script カテゴリーに公開されました。