App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法


send

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

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

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

App MakerでフォームウィジェットでLabelウィジェットをTextBoxウィジェットに差し替える
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでフォーム上のLabelウィジェットをTextBoxウィジェットに差し替える方法です。

App Makerのフォーム上のLabelウィジェットをTextBoxウィジェットに差し替える手順をお伝えしました。

なんでそんなことをしたのかというと、フォームからデータを入力して、元のスプレッドシートのデータも更新したいからなんですね。

ということで、今回はその続きの部分を進めていきます。

App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法です。

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

前回までのおさらい

現在作成しているApp Makerのアプリケーションは、以下のようなスプレッドシートをデータベースとすべく進めています。

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

スプレッドシートからApp Makerへデータを反映させるのは実装済みですので、今はApp Makerからデータを更新する仕組みを作っているところです。

前回は、フォームで更新可能なフィールドを入力して更新できるように、Labelウィジェットから、TextBoxウィジェットに差し替えました。

また、更新のトリガーとなる「UPDATE」ボタンを追加しました。

その時点のフォームが以下ですね。

App MakerでLabelウィジェットをTextBoxウィジェットに差し替えた

今回は、この「UPDATE」ボタンにスクリプトを仕込んで、テキストボックスに入力している内容にスプレッドシートも更新するようにしていきます。

スプレッドシートのレコードを書き換えるサーバースクリプト

まず、スプレッドシートのレコードを書き換えるサーバースクリプトから見ていきましょう。

こちらのsetRecordという関数です。

仮引数は以下のような役割です。

  • row: 更新する行数
  • values: 更新する行データを表す一次元配列

rowで与えられた行数のレコードを、valuesで与えられた一次元配列に書き換えるというものですね。

そんなに難しくないですよね…?

フォームの内容をサーバースクリプトにわたす

続いて、現在のフォームの入力内容から、行数rowと一次元配列valuesを生成してサーバースクリプトに渡すクライアントスクリプトです。

こちらの関数updateRecordです。

ちょっと見慣れないものがいっぱい出てきますね。

見ていきましょう。

ページをオブジェクトとして取得する

まず、Appオブジェクトのpagesプロパティです。

これは文字通り、アプリケーションのページの集合を取得します。

app.pages

pagesプロパティは、PropertyMapというApp Maker特有の集合を表すオブジェクトを返します。

これは、その集合内の要素を以下のようにそれぞれのオブジェクト名(nameプロパティの値)を使って呼び出せるというタイプのオブジェクトです。

PropertyMapオブジェクト.オブジェクト名

したがって、以下はEditPageをオブジェクトとして取得することになりますね。

ちなみに、ページはPanelウィジェットというオブジェクトです。

ページ上のウィジェットをコレクションとして取得する

続く部分ですが、ページに配置されているウィジェットをPropertyMapオブジェクトとして取得します。

それが、descendantsプロパティです。

Panelウィジェット.descendants

これでページ上のすべてのウィジェットをコレクションとして取得します。

descendantsは「子孫」という意味がありますよね。

これで取得できるのはPropertyMapですので、オブジェクト名で指定できます。

ですから、以下はLabelウィジェットFieldIndexを表します。

Labelウィジェットのテキスト

あとは、Labelウィジェットのテキストですね。

それを表すのがtextプロパティです、

Labelウィジェット.text

つまり、以下でLabelウィジェットFieldIndexのテキストを取得できるというわけです。

取得できるインデックスは文字列ですので、Number関数で数値化しつつ、スプレッドシートの見出しを考慮してプラス1をしています。

TextBoxウィジェットの値

TextBoxウィジェットの値を取得する部分もこれでほとんどわかりますね。

あとはvalueプロパティで値を取得するのみですね。

TextBoxウィジェット.value

これを、各TextBoxウィジェット分について配列にプッシュして、レコードを表す配列を生成していきます。

まとめ

以上、App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法をお伝えしました。

PropertyMapオブジェクトによるコレクションの扱いとか、descendantsプロパティとか、App Maker特有の概念もあるので、よくつかんでおくと良いですよね。

あとは、今回作成したクライアントスクリプトの関数updateRecordをボタンに仕込めば動くはず…

次回は、その部分を進めていきます。

どうぞお楽しみに!

連載目次: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ウィジェットをTextBoxウィジェットに差し替える
  11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

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