App Makerで確認用のポップアップダイアログを作成する方法

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

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

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

App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、いよいよApp Makerでフォームからデータベースとしてのスプレッドシートを更新する方法をお伝えします。

App Makerからデータベースとしているスプレッドシートのレコードを更新する方法をお伝えしました。

さて、今回から何回かにかけて、今度はレコードを削除する方法をお伝えしますよ。

削除機能には「ポップアップ」を使ってみたいと思います。

ということで、今回はApp Makerで確認用のポップアップダイアログを作成する方法です。

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

スポンサーリンク

前回までのおさらい

では、おさらいから。

スプレッドシートに従業員のデータを以下のようにリストしています。

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

このデータをソースとしてApp Makerで閲覧、更新ができるようなアプリケーションを作りたいわけです。

これまでのシリーズで以下のようなことができるようになりました。

  1. 閲覧: スプレッドシートのデータをデータソースに反映して「TablePage」のテーブルに表示する
  2. 更新: 「EditPage」のフォームで変更した内容をスプレッドシートに反映する

閲覧、更新ができるようになったので、次は「削除」を機能として追加していきたいと思います。

そして、いきなりレコードが削除されるのも怖いので、確認用のポップアップを表示するようにしていきます。

ポップアップを作成する

ポップアップは「Page」として作成する

App Makerではポップアップ(ダイアログという表現もします)も「Page」の一種として追加していきます。

なので、まずポップアップページを作成していきます。

App Makerで新たなページを追加する

「Create Page, Page Fragment, or Popup」のダイアログが開きますので、ここで「Popup」を選択して、「NEXT」をクリックします。

App Makerのページ追加でPopupを選択する

作成できるポップアップの種類

続いて「Create Popup」のダイアログが開きます。

ここでは確認用のダイアログをイメージしていますので、「Confirmation dialog」を選択して「CREATE」です。

App Makerで確認ダイアログを作成する

これで、以下のように「PAGES」に「ConfirmationDialog」が追加されます。

App Makerで作成された確認ダイアログ

実は、ポップアップには多様な6タイプが用意されていて、その中から選ぶことができます。

  • Empty popup: 空のポップアップ、空白のキャンバスとして使用する
  • Navigation menu: ナビゲーションメニュー
  • Confirmation dialog: 確認ダイアログ
  • Notification dialog :通知ダイアログ
  • Modal loading indicator: モーダルローディングインジケーター
  • Snackbar: スナックバー、画面下部に操作についての1行テキストによる説明を表示

全部使いこなせたら、いろいろなことが実現できそうですね…!

ボタン操作でポップアップを表示する

ポップアップはページとは異なり、それ単体で表示することができません。

ですから、ボタン操作などでポップアップを表示するようにしてあげる必要があります。

ここでは、EditPageのフォーム上のボタンからポップアップを表示できるようにしていきます。

ポップアップ表示用のボタンを用意する

まずは、ボタンを用意しましょう。

左メニューから「EditPage」を選択して、フォームを表示します。

これまでのシリーズで「HELLO」ボタンがありましたので、これをProperty Editorでポップアップ表示用に以下のように変更しちゃいましょう。

  • name: ButtonDelete
  • text: Delete
  • onClick: Show Popup…→ConfirmationDialog

App Makerでボタンをポップアップ表示用に変更

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

ちなみにここで、再度Property Editorの「onClick」を開いて「Custom action」を選択すると、以下のようにプリセットアクションのコードを確認できます。

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

つまり、「ポップアップダイアログを表示する」というのは、プリセットで用意されている動作なわけですが、それをコードで書いたらどうなるの?がわかるわけです。

ポップアップを表示するコード

今回のプリセットアクションに対応するコードはこちらですね。

app.popups.ConfirmationDialog.visible = true;

Appオブジェクトのpopupsプロパティがありますね。

app.popups

これは、アプリケーションのポップアップの集合をPropertyMapオブジェクトとして返します。

PropertyMapオブジェクトは含まれる要素をオブジェクト名をプロパティとして取り出せるという便利なやつでした。

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

そこからオブジェクト名「ConfirmationDialog」で取り出すと、それはどうやらPopupOverlayというオブジェクトのようです。

ちょっと、現時点でApp Makerドキュメントでこのクラスが確認できていないのですが、visibleというプロパティでその表示・非表示をコントロールできるようですね。

ポップアップの表示を確認する

では、「PREVIEW」をして、ポップアップの表示動作について確認をしてみましょう。

「Edit Page」の「DELETE」ボタンをクリックします

App Makerでポップアップ表示用ボタンをクリック

すると、以下のようなポップアップが表示されます。

App Makerで作成したポップアップの表示

ただ、現時点では「CANCEL」ボタンも「COMPLETE THE ACTION」ボタンも、どちらを押してもただポップアップが閉じるだけですね。

まとめ

以上、App Makerで確認用のポップアップダイアログを作成する方法をお伝えしました。

ポップアップもページの一種なので、これまでのページと同様に作成できますね。

そして、たくさん種類がある…可能性が広がりますね!

さて、次回は作成したポップアップの表示や機能を変更していきます。

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をコピーしました