App Makerで新しいページとフォームウィジェットを配置する方法

photo credit: mlckeeperkeeper Scavenging via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

App Makerでスプレッドシートをデータベースにしたアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちら。

App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説

App Makerでスプレッドシートをデータベースとしたアプリケーションの作り方をお伝えしています。今回はApp Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説していきます。

スプレッドシートのデータを取得するクエリスクリプトについて解説をしました。

さて、スプレッドシートをデータベースにするということは、スプレッドシートからデータを取得してくるだけでなく、App Makerからの操作でスプレッドシートのデータを更新できないとですよね。

その部分を何回かでつくっていきたいと思います。

まず手始めとしては、データを更新するためのUIになるフォームウィジェットについて紹介していきます。

ということで、今回はApp Makerで新しいページにフォームウィジェットを配置する方法です。

では、行ってみましょう！

前回までのおさらい
新たなページを追加する
フォームウィジェットを配置する
1. プレビューをしてフォームを確認する
まとめ
連載目次：App Makerでスプレッドシートをデータベースとして使う

前回までのおさらい

まず、App Makerのデータベースとして使用するスプレッドシートはこちらです。

このスプレッドシートからデータを取得できるように、App Makerには以下のフィールド構成のCalculatedモデルを用意しました。

フィールド	データ型	説明
Index	Number	行番号
Name	String	従業員名
Email	String	メールアドレス
HireData	Date	入社日
Active	Boolean	在職かどうか

そのモデルのデータソースに以下のクエリスクリプトを記述して、スプレッドシートのデータからレコードを生成します。

var ss = SpreadsheetApp.openById('***** スプレッドシート「従業員データ」のID *****');
var sheet = ss.getSheets()[0];
var values = sheet.getDataRange().getValues();

var records = [];

for(var i = 1; i < values.length; i++){
  var record = app.models.EmployeeData.newRecord();
  record.Index = i;
  record.Name = values[i][0];
  record.Email = values[i][1];
  record.HireDate = new Date(values[i][2]);
  record.Active = values[i][3];
  records.push(record);
}

return records;

さらに、そのデータソースをApp MakerのTablePageに配置したテーブルウィジェットで表示する、というところまで進めました。

今回は、別のページにフォームとボタンを配置していきます。