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

2012 年 6 月 8 日 金曜日

リストボックス

▼サンプルスクリプト

GoogleサイトのAppsスクリプトガジェットとして動作するサンプルスクリプト。スプレッドシートの都道府県名リストを読み込み、リストボックスに表示している。OKボタンをクリックすると、選択しているアイテムの項目値を画面に表示する。

//リストボックス表示
function doGet() {
  var app = UiApp.createApplication();
  var wrapper = app.createVerticalPanel(); 
 
  //スプレッドシートから取得した都道府県レコードをリストボックスに追加
  var ss  = SpreadsheetApp.openById('xxxxxxxxxx');
  var sheet = ss.getSheetByName('シート1');
  var records = sheet.getRange(1, 1, sheet.getLastRow(), 2).getValues();   
  var list = app.createListBox().setName('prefecture');
 
  for(var i=1; i

行2:doGet()はHTTP GETでスクリプトが呼び出された際に実行されるメソッド。今回の場合は、上記のコードをAppsスクリプトガジェットしてサイトに挿入しているので、Appsスクリプトガジェットが読み込まれる時=Appsスクリプトガジェットを貼り付けたページが表示される時に呼び出される。

行3:レイアウトパネル(ラッパー)を生成

行7-8:あらかじめ作成した都道府県名スプレッドシートオブジェクトおよびシートオブジェクトを取得している。今回作成したスプレッドシートは以下の通り。A列に都道府県コード、B列に都道府県名を記述している。

行9:あらかじめレコードを全件取得している。

行10:app.createListBoxでリストボックスオブジェクトを作成している。setName()で作成したリストボックスの名称をセットしているが、この名称はのちほど選択値を取得する際に利用する。

行11-13:行9で取得したレコードを上からループしながら、{リストボックスオブジェクト}.addItem()により、リストボックスに項目を追加している。

行17:ボタンクリック時のサーバハンドラを定義。createServerHandler()のパラメータにはバインドするメソッド名、addCallbackElementのパラメータにはバインドするメソッドに受け渡すオブジェクトをセットする。

行18:ボタンを作成。createButtonの第二パラメータにはボタンクリック時のハンドラを指定することができるので、行17で定義したハンドラを指定している。これにより、ボタンクリック時に、ハンドラとバインドしたメソッドが実行されるようになる。

行29:OKボタンクリック時に選択されているリストの値をラベルとしてUiに挿入している。onOkClick_の引数eには以下の配列が格納されている。

Array (
    [parameter] => Array (
        [clientY] => '41'
        [clientX] => '19'
        [eventType] => 'click'
        [ctrl] => 'false'
        [meta] => 'false'
         => 'u194899'
        [prefecture] => 'akita'
        [button] => '1'
        [alt] => 'false'
        [screenY] => '444'
        [screenX] => '480'
        [y] => '15'
        [shift] => 'false'
        [x] => '15' )
)

リストボックス「prefecture」の値を参照するので、e.parameter.prefectureで選択されている項目値を取得することができる。

構文

リストボックスオブジェクトの作成

createListBox()
createListBox(isMultipleSelect)
{Boolean}isMultipleSelect
trueを指定した場合、複数選択可能なリストボックス<select multple>を生成する。

リストボックスへの項目追加

{ListBox}.addItem(text)
{ListBox}.addItem(text, value)
{String}text
項目の表示名
{String}value
項目の値。指定しない場合、textと同じ値がセットされる。

戻り値

List Box
生成したリストボックスオブジェクト

関連記事

コメントをどうぞ

トラックバック

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

http://www.bmoo.net/archives/2012/06/314057.html/trackback