第2回　カスタムJavaScript機能：特集：Forguncy Pro新機能詳説（3/7 ページ）

» 2015年03月30日 05時00分公開

テーブルへのデータの追加

　このアプリでは、［追加］ボタンがクリックされたら、二つのテキストボックスの内容を使って、テーブルに新規にデータを追加する。通常のForguncyであれば、以下のようにテキストボックスにデータ連結を行って、［追加］ボタンのコマンドでテーブルデータを更新するように設定するだけだ。

テーブルへのデータの追加
Forguncyではこちらのやり方が一般的だ。
上：データ連結の設定。［名前］テキストボックスとtable1テーブルのnameフィールド、［電話］テキストボックスとtable1テーブルのphoneフィールドを関連付けている。
下：［追加］ボタンクリック時に実行するコマンドの編集画面。テーブルにデータを追加しているだけだ。

　ここではそうではなく、ボタンがクリックされたときにJavaScriptコードを実行して、テーブルへデータを追加する。これには、Forguncy ProのWeb API、Forguncy.addTableDataメソッドを利用する。以下がその構文だ。

Forguncy.addTableData(
tableName,
newValue,
successCallback,
errorCallback
)

Forguncy.addTableDataメソッドの構文
第1引数にデータを追加するテーブル、第2引数に追加する値をオブジェクト、第3引数に追加が成功したときに実行されるコールバック関数、第4引数にエラー発生時に実行されるコールバック関数を指定する。第3引数に指定する関数には、その実行時に引数として追加したデータが、第4引数に指定する関数には、その実行時に引数としてエラーメッセージが渡される。

　ここでは追加するテーブルは「table1」テーブルだ。追加するデータは二つのテキストボックスに入力された値である。これはForguncy ProのJavaScript APIを使用して次のように取得できる。

var page = Forguncy.Page;
var name = page.getCell('textName').getValue();
var phone = page.getCell('textPhone').getValue();

［名前］テキストボックスと［電話］テキストボックスの値を取得するJavaScriptコード

　先ほどオブジェクトに付けた名前（「textName」と「textPhone」）をForguncy.Page.getCellメソッドに渡すことで、それぞれのテキストボックスを取得し、それらに対して今度はgetValueメソッドを呼び出すことで、入力されている値を得ている。これを、JavaScriptオブジェクト形式にまとめてaddTableDataメソッドに渡してやればよい。

　データの追加が成功したときには、リストビューの表示を更新するために、リストビューオブジェクトが持っているreloadメソッドを呼び出す。第3引数となる関数にはこれを行う関数を指定してやればよいだろう。

　第4引数のエラー発生時のコールバック関数ではalertメソッドでエラーメッセージを表示するのが簡単だ。

　以上をまとめると、addTableDataメソッド呼び出しは次のようなコードになる。