App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする

record

photo credit: Markus Binzegger Life is about choices via photopin (license)

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

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

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

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

ポップアップダイアログからレコード削除をする処理を作成するところまで進めました。

データの閲覧、更新、削除といろいろな機能を実装できましたので、最後の機能として「追加」を実装していきたいと思います。

今回はApp Makerでデータ追加用のポップアップを作成してその表示の動作確認をするまでをお伝えします。

これまでの内容の復習にもなりますね!

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

スポンサーリンク

前回までのおさらい

App Makerで従業員リストを操作するアプリケーションを作っています。

データベースとしてはスプレッドシートが元となっておりまして、こちらです。

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

App Makerを立ち上げた際に、クエリスクリプトが実行されて以下のようなフィールドを持つデータソースとしてロードされます。

フィールド データ型 説明
Index Number 行番号
Name String 従業員名
Email String メールアドレス
HireData Date 入社日
Active Boolean 在職かどうか

ページとしては、こちらのEditPageがレコードの更新や削除をするための入り口となっています。

App Makerでレコードを操作するEditPage

こちらは、全体のデータを確認するTablePageです。

App Makerでデータを閲覧するTablePage

今回から、このApp Makerによるアプリケーションにレコードを追加する処理を実装していきます。

データ追加用のポップアップダイアログを作成する

データ追加ですが、今回もポップアップダイアログを使っていきます。

ポップアップダイアログ内に、各フィールドを入力するためのウィジェットを用意して、そこを入力して「ADD」をクリックすると、レコードが追加される…そんなイメージです。

データ追加用のポップアップダイアログを作成していきます。

この手順は、これまでも行ったので、復習的な内容になりますね。

まず、左側メニューのPAGESの「+」アイコンをクリックします。

App Makerで新たなポップアップを追加する

続く「Create Page, Page Fragment, or Popup」のダイアログでは「Popup」を選択して「NEXT」です。

App MakerのCreate PageでPopupを選択する

「Create Popup」ダイアログでは、レコード削除のときと同様に「Confirmation dialog」を選択肢て、「CREATE」です。

App MakerのCreate PopupでConfirmation dialogを選択する

他の種類のほうがいいという可能性もありますが、ひとまず…!

これで、データ追加用のポップアップダイアログの作成はできました。

ちなみに、ポップアップの作り方は以下の記事もご参考にどうぞ。

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

ポップアップにフォームウィジェットを追加する

続いて、ポップアップにレコード追加する際の各フィールドの値を入力できるようにしてききます。

そこで、便利なのがフォームウィジェット

ポップアップにもフォームウィジェットをドラッグすれば、フォームを載せられんです。

App MakerでFormウィジェットをドラッグする

「Choose datasource」ダイアログでは、そのまま「EmproyeeData」を選択した状態で「NEXT」です。

App Makerでフォームのデータソースを選択する

「Choose form type」ダイアログでは「Edit」で「NEXT」ですね。

App Makerでフォームタイプを選択する

「Choose form fields」ダイアログでは「Index」だけ解除をして「FINISH」です。

App Makerでフォームのフィールドを選択する

というのも、Indexのフィールドは自動で付与するので、フォームとしては不要なんですね。

これで、ダイアログ上のフォームの設定は完了です。

ポップアップとフォームを編集する

ポップアップとそこに配置したフォームを編集していきます。

不要なウィジェットを削除する

まず、以下のページャーForm1Pagerと、ラベルConfirmation Titleは不要ですので、選択→ Delete で削除をします。

App Makerで不要なウィジェットを削除する

ラベルを入力可能なウィジェットに差し替える

次に、各フィールドのラベルを Delete で削除して、入力可能なウィジェットに差し替えていきます。

App Makerでラベルを入力可能なウィジェットに差し替える

差し替えるウィジェットと、Propery Editorで設定する各プロパティの値は以下にまとめますので、ご覧ください。

フィールド ウィジェット name value label
Name TextBox TextBoxName
Email TextBox TextBoxEmail
HireDate DateBox DateBoxHireDate
Active Checkbox CheckboxActive True Active

valueプロパティはバインドの必要はないですね。

また、CheckBoxウィジェットについては、valueプロパティにチェックを入れて「true」をデフォルトに、labelプロパティも「Active」に変更しておきます。

基本的には、以下の記事と同じような作業になるので参考してください。

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

ポップアップの表示を変更する

さらに、ポップアップの表示を変更していきます。

変更内容は以下のとおりです。

  • Label: Titleのtextプロパティを「レコードの追加」
  • Label: ConfirmationTextのtextプロパティを「データを入力して「ADD」をクリックして下さい」に変更
  • Button: ConfirmationButtonのtextプロパティを「Add」に変更

App Makerでレコード追加用のポップアップの表示を変更する

ポップアップをリネームする

作成したポップアップは「Confirmation Dialog」というデフォルトの名称になっていますので、ポップアップのリネームをしていきます。

App MakerでポップアップのRenameをする

「Rename Page」ダイアログで、ポップアップ名を「AddDialog」とし「OK」としました。

App Makerでポップアップのページ名を変更する

これでポップアップのほうは完成です!

データ追加ポップアップを表示するボタンを作成する

続いて、EditPageにデータ追加用のポップアップAdd Dialogを表示するボタンを作成していきます。

EditPageに新たなButtonウィジェットをドラッグして追加します。

フォームの大きさは適宜変更して調整してくださいね。

App Makerでフォームにボタンを追加する

追加したボタンウィジェットについて、Property Editorで以下のように設定します。

  • name: ButtonAdd
  • text: Add
  • onClick: Show Popup…→AddDialog

App Makerでボタンのプロパティを設定する

これで、データ追加用のポップアップの表示ができるはずです。

データ追加用のポップアップの表示を確認する

では、プレビューをしてデータ追加用のポップアップの表示を確認していきます。

EditPageを表示して「ADD」ボタンをクリックします。

App Makerでデータ追加ポップアップを表示するボタンをクリックする

すると、以下のように「レコードの追加」ダイアログが表示されます。

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

各フィールドには入力が可能ですが、「CANCEL」「ADD」ボタンを押してもまだポップアップが閉じるだけです。

まとめ

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