App Makerでポップアップのボタンクリックによるイベントを設定する

button

photo credit: johnpaulsimpson STOP via photopin (license)

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

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

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

App Makerでポップアップダイアログの表示の変更とバインディング式について
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回はApp Makerでポップアップダイアログの表示を変更する方法とバインディング式についてお伝えしていきます。

レコード削除の確認用のポップアップの表示内容を変更するところまで進めました。

今回は、いよいよこのポップアップのボタンクリックによる動作を作業していきます。

まずは、App Makerでポップアップのボタンクリックによるイベントを設定する方法です。

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

スポンサーリンク

前回までのおさらい

App Makerで従業員データを操作するアプリケーションを作成しています。

元のデータはこちらのスプレッドシートを使っています。

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

このスプレッドシートをデータベースとして、App Makerからデータの更新や削除を行うというものです。

前回は、データの削除の機能を作成している途中で、削除の操作をしたときに、以下のような確認のポップアップダイアログを表示するところまで作成しました。

App Makerでポップアップの表示の変更を確認

ただ、このポップアップの「ボタン」については、まだデフォルトのままで正しく動作していませんので、この部分を今回進めていきます。

CANCELボタンのクリックによる動作を確認する

まず、このポップアップダイアログDeleteDialogの「CANCEL」ボタンについてonClickイベントを確認してみましょう。

左側メニューから「DeleteDialog」をクリックして表示されたポップアップの「CANCEL」ボタンを選択します。

すると、右側のProperty Editorにその設定が表示されますので、onClickイベントをクリックして「Custom Action」を選択します。

App Makerのプリセットアクションのコードを確認する

すると、以下のようなソースコードが仕込まれていることが確認できます。

// GENERATED CODE: Add your action below.
widget.root.visible = false;

ポップアップを非表示にする

このコードの意味を解説していきましょう。

widgetはそのコードが仕込まれているウィジェットを表します。

widget

rootプロパティは、そのウィジェットが含まれるトップレベルのLayoutWidgetオブジェクト、つまり今回の場合はポップアップになります。

Widgetオブジェクト.root

visibleプロパティ表示・非表示を表すプロパティで、trueであれば表示です。

LayoutWidgetオブジェクト.visible

つまり、「このポップアップを非表示にせよ」という意味ですね。

これはこのままでOKですので、置いておきましょう。

データを削除する「DELETE」ボタンを作成する

DELETEボタンを設定する

続いて、データの削除を実行する「DELETE」ボタンを作成していきましょう。

「COMPLETE THE ACTION」のボタンを選択して、Property Editorでtextプロパティを「Delete」に変更します。

App Makerで削除ボタンのイベントを設定する

続いて、onClickイベントの「Custom action」でコードを確認します。

こちらもすでに以下のようなコードが入っています。

// GENERATED CODE: Add your action below.
widget.root.visible = false;

これに一行追加して、以下のようにします。

// GENERATED CODE: Add your action below.
widget.root.visible = false;
deleteRecord();

これで、DELETEボタンをクリックしたら、クライアントスクリプトの「deleteRecord」が呼び出されることになりますが、まだ作成していませんね。

その部分は次回の記事で作成していきます。

まとめ

以上、App Makerでポップアップのボタンクリックによるイベントを設定する方法をお伝えしました。

シリーズを通して、Buttonウィジェットの設定にも少し慣れてきましたでしょうか。

次回は、この続きでクライアントスクリプト、そしてサーバースクリプトを作成して、データ削除の処理を完成させていきます。

App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、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をコピーしました