App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法


input

photo credit: shixart1985 Pedalboard in progress via photopin (license)

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

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

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

App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App Makerでテーブルをページに配置する方法をお伝えします。

いよいよApp Makerでアプリの作成を進めていまして、データ一覧を表示するテーブルを配置したページを作成しました。

今回は、データ追加用のフォームを配置したページを作っていきますよ。

ということで、App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法です。

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

スポンサーリンク

前回までのおさらい

では、作成しているApp Makerについておさらいをしておきましょう。

まず、モデルですが、以下のようなフィールド構成の「EmployeeData」つまり従業員データをCloud SQLモデルとして作成しました。

App MakerでCloud SQLのモデルを作成した

また、そのモデルのデータを表示するテーブルを作成して、以下のように「TablePage」というページに配置しました。

App Makerで配置したテーブル

ただ、「EmployeeData」にはデータが何も入っていないので、データを追加するためのフォームを作ろう!というのが今回の目標となります。

データ追加用ページを作成する

では、まずデータ追加用のページを作成していきます。

ナビゲーションメニューの「PAGES」の「+」アイコンから、新しいページを作成できますので、クリックします。

App Makerで新しいページを作成する

「Create Page, Page Fragment, or Popup」というダイアログが表示されます。

App Makerのページには種類がありますが、今回は通常のページを作成しますので「Page」を選択して「NEXT」です。

App Makerで新しいPageを作成する

続く「create page」の画面では、ページ名と関連づけるデータソースを設定します。

Page nameは「EditPage」に、データソースrPage datasourceを「EmployeeData」に変更して「CREATE」です。

App Makerで新しいPageを作成する

これで、新たなページ「EditPage」が作られます。

ページにフォームを配置する

では、作成したページにフォームを配置していきます。

「Widgets」アイコンをクリックして、ウィジェットパレットを開きます。

「Form」がフォームを表すウィジェットになりますので、ドラッグしてページに配置します。

App Makerでフォームをページに配置する

「Choose datasource」というダイアログが開きますので、使用するデータソースは「inherited: EmployeeData」のままで「NEXT」とします。

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

ちなみに「inherited」は「継承された」という意味ですね。ページからその配置された子要素であるフォームに継承されているというニュアンスでしょうか。

次の「Choose form type」ではフォームが「Insert」つまり挿入用か、挿入、閲覧、編集、削除が行える編集用の「Edit」かを選択します。

ここは、「Edit」を選択して「NEXT」としておきましょう。

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

続く「Choose form fields」では表示するフィールド、編集可能なフィールドを選択します。

ここは、デフォルトのまま、つまりすべてのフィールドを表示し、「Id」以外を編集可能として「FINISH」です。

App Makerで表示・編集するフィールドを選択する

これで以下のようにページ「EditPage」にフォームを追加することができました。

App Makerでページに編集用のフォームを追加した

プレビューして動作を確認する

では、プレビューをして配置したフォームの動作確認をしていきましょう。

「PREVIEW」ボタンをクリックしてプレビューを開きます。

App Makerでプレビューをする

プレビュー画面では左上のプルダウンでページを切り替えることができますので、ページを「EditPage」に切り替えて「CREATE」ボタンを押します。

すると、新しいデータを入力できるようになりますので、各フィールドを入力していきます。

App Makerのフォームで新しいデータを入力する

「保存」などしなくてもフィールドからフォーカスを外せば入力内容が自動で保存されていきます。

ページを「TablePage」に切り替えると、入力したデータが反映されていることを確認できます。

App Makerのフォームで入力した内容をテーブルで確認

「EditPage」で各データの編集や削除なども行うことができますので、確認してみてくださいね。

まとめ

以上、App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法をお伝えしました。

テーブルとフォームを配置するだけで、それっぽいアプリが完成しますね。

App Makerすごいっす。

次回は、App Makerがデフォルトでやってくれている便利機能について考察していきます。

App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回はApp Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いていきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
  9. App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
  10. はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
  11. App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩
  12. App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
  13. App MakerのPopupページでナビゲーションメニューを作成する方法
  14. App Makerでアプリを再公開して修正内容を反映する手順
  15. App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか?

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