App Makerでデータベースにレコードを追加するスクリプトを作成する


record

photo credit: Jonas Hellebuyck Vinyl memories via photopin (license)

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

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

前回の記事はこちらです。

App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでデータ追加用のポップアップを作成してその表示の動作確認をするまでをお伝えします。

レコード追加用のポップアップを作成する部分を進めました。

ただ、このポップアップからレコードを追加する「ADD」ボタンの動作が実装されていませんので、作っていく必要がありますね。

ということで、App Makerでデータベースにレコードを追加するスクリプトを作成する方法をお伝えしていきます。

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

前回までのおさらい

App Makerで作ろうとしているのは、以下のスプレッドシートをデータベースとして、従業員のデータを扱うアプリケーションです。

スプレッドシートの従業員データ

App MakerのEditPageでは、以下のように「UPDATE」「ADD」「DELETE」というボタンが実装されていて、それぞれレコードの更新、追加、削除ができるんですね。

App Makerのデータを更新、追加、削除をするEditPage

それで、今は「レコードの追加」をする機能を実装しているところで、「ADD」ボタンを押すと、以下のように「レコードの追加」ポップアップダイアログが表示される…というところまで作りました。

App Makerで作成したデータ追加ポップアップ

ただ、このポップアップの「CANCEL」「ADD」ボタンを押しても、ダイアログが閉じるだけですので、今回はこの動作を作っていきます。

レコードを追加する「ADD」ボタンのクリックイベントを設定する

まず、「レコードの追加」ポップアップの「ADD」ボタンをクリックしたときのイベントを設定します。

手順はこうです。

  1. 左側メニューから「AddDialog」を選択
  2. フォーム上の「ADD」ボタンを選択
  3. Property EditorのonClickイベントについて「Custom action」を選択
  4. 「Custom action」ダイアログでスクリプトを入力
  5. 「DONE」をクリック

App Makerでレコード追加ボタンのonClickイベントを設定する

「Custom action」で入力するスクリプトはこちらです。

このポップアップを非表示にしつつ、クライアントスクリプトの「addRecord」を呼び出すというものですね。

以下の記事で「レコードの削除」をしたときと同様のスクリプトですので、必要に応じてご参考ください。

App Makerでポップアップのボタンクリックによるイベントを設定する
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerで作成したポップアップダイアログのボタンクリックによるイベントを設定する方法です。

クライアントスクリプトのデータ追加処理

続いて、クライアントスクリプトのデータ追加処理「addRecord」を実装していきます。

関数addRecordは、スプレッドシートに追加する際のシートの行番号と、追加するレコードのデータの配列を生成して、サーバースクリプトに渡すというものです。

レコードを追加するシートの行番号を求める

2行目ですが、現在のアプリケーションのデータソース「EmployeeData」のアイテム数を算出してそれに1を追加しています。

アイテム数がインデックスの最大値になりますので、追加するレコードのインデックスはその次ということです。

Datasourceオブジェクトのitemsプロパティは、データソースのすべてのアイテムを配列で返します。

Datasourceオブジェクト.items

スプレッドシートのシートでは、1行目が見出し行になりますので、実際にレコードを追加する行数は、さらにプラス1をしたものになります。

変数rowとしているのが3行目です。

追加するレコードのデータを配列として生成する

5~9行目が配列valuesに追加するレコードのデータを配列として生成する部分です。

ポップアップAddDialogの各フィールドの値を集めてプッシュして配列を生成していますね。

データを更新する際にも似たような処理を作成しましたので、そちらもご参考ください。

App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでフォーム上のLabelやTextBoxのデータを取得してサーバースクリプトに渡す方法です。

ちなみに、関数formatDateはDate型をyyyy-mm-dd形式のString型に変換する関数で、上記の記事で紹介しています。

サーバースクリプトを呼び出す

11行目で、変数rowと配列valuesを引数として、サーバースクリプトsetRecordを呼び出します。

呼び出しが成功した後に、クライアントスクリプトに記載されている関数loadDatasourceを実行します。

関数loadDatasourceの内容ですが、アプリケーションのデータソース「EmployeeData」をロードするというものです。

これを実行しないと、App Maker側のデータソースにレコードが追加されませんからね。

サーバースクリプトのレコード追加処理

さて、サーバースクリプトのレコード追加処理ですが、実は過去作ったスクリプトをそのまま流用することができています。

追加も更新も、書き込む行番号がちがうだけで実質的に同じ処理ですからね。

呼び出されるのは関数setRecordですが、受け取った行番号rowに、配列valuesを書き込むというものです。

関数openSheetは、スプレッドシートを開いて、対象となるSheetオブジェクトを返すものです。

スプレッドシートの取得は複数の関数で使用しているので、関数openSheetとして切り出したものです。

レコード追加機能の動作を確認する

では、レコード追加機能をプレビューして動作確認していきましょう。

EditPageの「ADD」ボタンから「レコードの追加」ポップアップを開きます。

追加するレコードのデータを入力して「ADD」ボタンをクリックします。

App Makerでレコード追加ポップアップにデータを入力する

すると、以下のようにスプレッドシートにもレコードが追加されます。

App Makerのレコード追加がスプレッドシートにも反映

App Makerのデータソースもロードしましたので、TablePageのほうでもレコード追加が確認できます。

App Makerで追加したレコードがデータソースにも反映

まとめ

以上、App Makerでデータベースにレコードを追加するスクリプトを作成する方法についてお伝えしました。

これにてスプレッドシートをデータベースとしたApp Makerアプリケーションの作成シリーズは終了です。

ここまで来れば、以下の一連の流れにもだいぶ慣れてきたのではないでしょうか。

  1. ページ(またはポップアップ)の作成と設定
  2. onClickイベントを設定
  3. クライアントスクリプトを作成
  4. サーバースクリプトを作成

また、App Makerについて別の便利な使いかたがあれば紹介していきますね。

どうぞお楽しみに!

連載目次:App Makerでスプレッドシートをデータベースとして使う

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。
  1. App Makerでスプレッドシートをベースにモデルを作成する方法
  2. App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
  3. App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
  4. App Makerで新しいページとフォームウィジェットを配置する方法
  5. App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
  6. App Makerでボタンウィジェットを設置してクリックで動作させる方法
  7. App Makerでボタンクリックで独自のスクリプトを動作させる方法
  8. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
  9. App Makerのボタンクリックでスプレッドシートにアクセスする方法
  10. App MakerでフォームウィジェットでLabelウィジェットを入力可能なウィジェットに差し替える
  11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
  12. App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
  13. App Makerで確認用のポップアップダイアログを作成する方法
  14. App Makerでポップアップダイアログの表示の変更とバインディング式について
  15. App Makerでポップアップのボタンクリックによるイベントを設定する
  16. App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
  17. App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
  18. App Makerでデータベースにレコードを追加するスクリプトを作成する

タイトルとURLをコピーしました