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

createResetButtonにより、入力された文字列をすべてクリアすることができる。

function doGet() {
  var app = UiApp.createApplication();
 
  //フォーム追加
  var formPanel = app.createFormPanel();
  app.add(formPanel);
 
  //フォームレイアウト用パネル作成
  var hPanel = app.createHorizontalPanel();
  formPanel.add(hPanel);  
 
  //テキストボックス、ボタン作成
  var textBox = app.createTextBox();
  var submitButton = app.createSubmitButton('送信');
  var resetButton = app.createResetButton('リセット');
  hPanel.add(textBox)
    .add(submitButton)
    .add(resetButton);
 
  return app; 
 
}

行2: ユーザーインターフェースインスタンスを生成。

行5-6: リセットボタンを有効にするには、リセット対象のオブジェクトとリセットボタンを１つのフォームパネルに配置する必要がある。

行9-10: フォームパネルに配置できるオブジェクトは１つだけという制約がある。そのため、フォームパネルにはレイアウトパネル(Vertical PanelやHorizontal Panel)のみ配置し、このレイアウトパネルにテキストボックスやボタン等を配置することになる。

行13: createTextBox()によりテキストボックスを作成。

• 関連：テキストボックスを実装するには

行14: createSubmitButton()によりSubmitボタンを作成。

• 関連：Submitボタンを実装するには

行15: createResetButton()によりリセットボタン作成。

行16-18: レイアウトパネルにテキストボックス、リセットボタンを配置。

行20: Uiを画面に表示。

構文

createResetButton()

createResetButton(html)

createResetButton(html, clickHandler)

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

リセット

パラメータ

html

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

保存

が展開される。

clickHandler

クライアントハンドラまたはサーバハンドラを指定。ボタンクリック時のイベントを定義する場合は指定する。

注意点

HTMLの<input type=”reset”>とは動作が異なるので注意が必要。

HTMLで作成した通常のリセットボタンは、フォームの内容を初期値に戻すという動作をするが、createResetButton()で作成したリセットボタンは、フォームの内容を全てクリアする。入力前の状態に戻るわけではない。

公式ドキュメント

• Create Reset Button
• Reset Button

関連記事

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