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

2012 年 4 月 8 日 日曜日

Submitボタン

▼サンプルスクリプト

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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から取得している。

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

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

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

構文

createSubmitButton()

createSubmitButton(html)

Submitボタンを生成。

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

<button type="submit" class="gwt-SubmitButton">保存</button>

パラメータ

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

<button class="gwt-Button" type="button"><strong>保存</strong></button>

が展開される。

公式ドキュメント

関連記事

コメント / トラックバック 1 件

コメントをどうぞ

トラックバック

このエントリーのトラックバックURL:

http://www.bmoo.net/archives/2012/04/313911.html/trackback