みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。
前回の記事はこちらです。
App Makerのフォームのデータをサーバースクリプトに渡す方法をお伝えしました。
あとは、そのサーバースクリプト内でスプレッドシートを操作して更新すれば…
ということで、App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法です。
では、行ってみましょう！
前回までのおさらい
まず、App Makerのデータベースとして使用するスプレッドシートがこちらです。
これらのデータをApp Makerの元データとして反映するしつつ、App Makerのフォームから更新作業を行えるようにしたいわけですね。
スプレッドシートの操作なので、それはサーバースクリプトで行いますね。
こちらの関数setRecordです。
function setRecord(row, values) {
var id = '*****スプレッドシートのID*****';
var sheet = SpreadsheetApp.openById(id).getSheets()[0];
sheet.getRange(row, 1, 1, values.length).setValues([values]);
}
指定のスプレッドシートを開いて、その一番左のシートのデータについて、row番目のレコードを変数valuesで受け取った配列の値に書き換えるというものです。
そして、この関数setRecordを呼び出す、クライアントスクリプト側の関数updateRecordがこちらです。
function updateRecord() {
var row = Number(app.pages.EditPage.descendants.FieldIndex.text) + 1;
var values = [];
values.push(app.pages.EditPage.descendants.TextBoxName.value);
values.push(app.pages.EditPage.descendants.TextBoxEmail.value);
values.push(app.pages.EditPage.descendants.TextBoxHireDate.value);
values.push(app.pages.EditPage.descendants.TextBoxActive.value);
google.script.run.setValues(row, values);
}
フォームに現在表示されているテキストボックスの内容を配列化して、その行番号とともに、サーバースクリプトの関数setValuesを呼び出して渡すというものです。
あとは、この関数updateRecordを起動するだけですね…！
ボタンクリックでスクリプトを呼び出しデータソースを更新する
では、ボタンクリックでクライアントスクリプトを呼び出すように設定していきましょう。
ボタンにonClickイベントを設定する
ButtonウィジェットにonClickイベントを設定すればよかったですね。
まず、フォームの「UPDATE」ボタンを選択し、右側に表示されたプロパティエディタの「onClick」イベントを設定します。
当初は「None」とありますので、そこをクリックするとスクリプトを入力できるようになります。
010
以下のスクリプトを入力し、「DONE」をクリックすればOKです。
updateRecord(); widget.datasource.load();
スクリプトの１行目は、クライアントスクリプトの関数updateRecordを呼び出すというものですね。
その先、サーバースクリプトが呼び出されて、スプレッドシートが更新されるはずです。
しかし、２行目は…見慣れないですね？
データソースを再読み込みする
２行目の処理は、現在のウィジェットのデータソースを読み込むというものです。
ほら、データベースが更新されたわけですから、App Maker側のデータソースも更新しないとですもんね。
では、そのステートメントを解説していきましょう。
まずwidgetパラメータは、現在のウィジェットを参照します。
今回の場合は、「UPDATE」ボタン、すなわちButtonウィジェット「ButtonHello」が取得できます。
続いて、datasourceプロパティです。
以下のように任意のウィジェットについてdatasourceプロパティを使用して、そのデータソースを取得します。
今回の場合、Buttonウィジェットなのでデータソースを設定したっけ？…となりますが、フォームのデータソースは、フォーム上に配置している子孫であるウィジェットにも継承します。
そして、以前以下の記事で行ったように、フォームにはデータソース「EmployeeData」を設定していました。
最後、以下のloadメソッドで、データソースの読み込みを行うというわけですね。
App Makerからスプレッドシートの更新を確認する
では、App Makerからスプレッドシートを更新する動作確認をしていきましょう。
PREVIEW画面を開いて、フォームにいろいろと入力して「UPDATE」ボタンをクリックします。
各フィールドの値は以下の通りとしました。
- Index: 2
- Name: Tim
- Email: tim@example.com
- HireDate: 2019-02-08
- Active: False
スプレッドシートを確認すると、以下のように更新できていることが確認できます。
まとめ
以上、App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法をお伝えしました。
これで、ようやく目的は達成ですね。
ここまで少し長かったですが、App Makerの全体感とモデル、ページ、ウィジェット、クライアントスクリプト、サーバースクリプトといった各部の役割をだいたい理解できたのではないでしょうか。
次回は、さらに進めて、データの追加ができるようにしていきたいと思います。
どうぞお楽しみに！
連載目次：App Makerでスプレッドシートをデータベースとして使う
Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。- App Makerでスプレッドシートをベースにモデルを作成する方法
- App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
- App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
- App Makerで新しいページとフォームウィジェットを配置する方法
- App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
- App Makerでボタンウィジェットを設置してクリックで動作させる方法
- App Makerでボタンクリックで独自のスクリプトを動作させる方法
- App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
- App Makerのボタンクリックでスプレッドシートにアクセスする方法
- App MakerでフォームウィジェットでLabelウィジェットをTextBoxウィジェットに差し替える
- App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法