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

[かわさきしんじ，Insider.NET編集部]

簡易電話帳アプリのテスト実行

　この状態で一度アプリを実行して、動作を確認してみよう。

テキストボックスにデータを入力して［追加］ボタンをクリック

▼

データが追加された

データの追加

　同様にしてデータの更新も行ってみる。

リストビューでレコードを選択して、テキストボックスに新しい値を入力し、［更新］ボタンをクリック

▼

データが更新された

データの更新

　最後にデータの削除を試してみる。

レコードを選択して、［削除］ボタンをクリック

▼

一つは削除できたが、続けて［削除］ボタンをクリックしても、実はレコードが削除されない。この状態で今度はデータの更新を行ってみる

▼

該当するレコードがない！

データの削除で問題が発生した

　これは、リストビューで現在選択されている行のインデックスと、そこに表示されているレコードのテーブルにおけるIDが同一とは限らないからだ。これを修正するにはリストビューにIDを表示するようにした上で、Web APIを呼び出す際に、行インデックスからIDを取得して、それを使うようにする必要がある。

　まず、ページのUIは次のようにする。

修正後のページ
リストビューに「ID」フィールドを追加し、右ペインでそのセルに「ID」という名前を付けた。セルに名前を付けなければならないのはここでも同様だ。

　また、更新を行うコードは次のようにする。

var page = Forguncy.Page;
var name = page.getCell('textName').getValue();
var phone = page.getCell('textPhone').getValue();
var listview = page.getListView('listview');
var id = listview.getValue(listview.getSelectedRowIndex(), 'ID');

Forguncy.updateTableData(
  'table1',
  { ID: id },
  { name: name, phone: phone },
  function() { listview.reload(); },
  function(errmsg) { alert(errmsg); }
);

更新を行うコード（修正後）

　削除を行うコードも同様なので、ここでは省略する。以上の修正で、アプリは正しく動作するようになる（実行画面は省略）。

　ここまで、データの追加／更新／削除を行うコードを記述してきた。次に、データの取得を行うコードを見てみよう。