App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法


click

photo credit: lacygentlywaftingcurtains Is This Thing Working? *Click* (83/365) via photopin (license)

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

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

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

App Makerで新しいページとフォームウィジェットを配置する方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方についてシリーズでお伝えしています。今回はApp Makerで新しいページとフォームウィジェットを配置する方法をお伝えします。

App Makerで新しいページとフォームウィジェットを設置する方法をお伝えしました。

今回は、App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法です。

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

前回までのおさらい

では、前回までのおさらいから…

データの元となるスプレッドシートはこちらです。

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

App MakerのデータベースつまりモデルをCalculatedモデルで作成して、クエリスクリプトを介してスプレッドシートのデータを取得するようにしております。

App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
App Makerでスプレッドシートをデータベースとしたアプリケーションの作り方をシリーズでお伝えしております。今回はApp Makerでクエリスクリプトでスプレッドシートのデータを取得する方法です。

それを、ページTablePage上のテーブルウィジェットで表示できるように設定しております。

App Makerのプレビューでスプレッドシートのデータ取得を確認する

そして、前回。

もう一つ別のページであるEditPageを作成して、そこにフォームウィジェットを配置しました。

App Makerで新しいページとフォームウィジェットを配置する方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方についてシリーズでお伝えしています。今回はApp Makerで新しいページとフォームウィジェットを配置する方法をお伝えします。

以下がそのイメージです。

App Makerでフォームウィジェットを確認する

今回は、TablePageのテーブル行をクリックしたら、EditPageに遷移するようにonClickイベントを仕込んでいきたいと思います。

これは…ノンコーディグで簡単に設置できちゃうんです。

テーブル行を選択する

まず、ページTablePageを開いて、テーブル行をクリックして選択します。

すると、テーブル行に水色の枠がつきますね。

また、上部に「Panel: TablePage>Panel: Table1>List: Table1Body>Panel: Table1Row」という表示ありますね。

ここで、今選択している要素が「Table1Row」という名前だということがわかります。

App Makerのテーブル行を選択

すると、右側の「Property Editor」という部分に、「Table1Row」の設定内容が表示されるはずです。

プロパティエディターでイベントを設定する

プロパティエディターとは

このプロパティエディターですが、現在選択されている要素の様々な「プロパティ」を設定することができます。

プロパティエディター内の「Panel」「Performance Settings」「Layout」などをクリックすると、展開して開いたり、閉じたりすることができます。

これらは、いくつかのプロパティをまとめたグループということで、プロパティグループといいます。

onClickイベントを設定する

その中から「Events」を展開します。このグループには、この要素に対する様々なイベントが起きたときの動作を設定するものです。

「onClick」という種類のイベントがありますが、これが「クリックされたとき」の動作を設定するものです。

つまり、onClickイベントの動作としてフォームを表示するように設定すれば良いわけですね。

onClickイベントの「None」という部分をクリックします。

すると、プルダウンリストが表示されますので「Navigate to Page…」→「EditPage」とたどっていきます。

App MakerでonClickイベントを設定する

実はこれで設定完了です。

onClickイベントの動作確認をする

では、TablePageをPREVIEWをして、onClickイベントの動作確認をしていきましょう。

プレビュー画面でいずれかのテーブル行をクリックすると…

App Makerでテーブル行をクリック

EditPageに遷移します。

App MakerでEditPageに遷移した

表示されているレコードも、クリックしたテーブル行のレコードであることに注目してください。

まとめ

以上、App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法をお伝えしました。

このように、ウィジェット上のある要素をクリックしたら…というイベントの動作も簡単に設定可能です。

しかも、今回の内容であればプロパティエディターで設定するだけで、ノンコーディングでしたね…。

次回は、ボタンウィジェットを設置してそのクリックイベントを設定していきます。

App Makerでボタンウィジェットを設置してクリックで動作させる方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでボタンウィジェットを設置してonClickイベントでクリック動作させる方法をお伝えします。

どうぞお楽しみに!

連載目次: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でデータベースにレコードを追加するスクリプトを作成する

  投稿者プロフィール

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

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