Help us understand the problem. What is going on with this article?

App Maker + Google Cloud SQL の組み合わせで使ってみる(テーブルで画面表示)

More than 1 year has passed since last update.

遅くなってしまいましたが、App Maker + Google Cloud SQL の組み合わせで使ってみる(モデル作成)
の続きになります。

今回は、実際にDBのデータを画面に表示してみたいと思います。

モデルの修正

前回作成したモデルにBoolean項目を追加して下記のようにしました。
追加したのは単に2カラムだけだとサンプルとして寂しいかなって理由だけです。
なので、必須ではありませんw
モデルの修正.png

テーブルウィジェットの追加

まずは、WidgetsからTableを追加します。
テーブルの追加.png

するとデータソースを選べと出るので、作成しておいたTestModelを選択します。
データソース選択.png

次はカラムの選択となるので、画面に表示したいカラムを選択します。
Editableというのは各カラムを画面から編集可能にするかどうかです。Index以外は編集可能にできます。
とりあえず、全部選択してみます。
カラムの選択.png

そして最後にその他のオプション設定です。

  • Paginated
    テーブルにページナビを付けるかどうかです。テーブルの下にページ番号や進む戻るボタンが付きます。
  • Sortable
    ソート可能にするかどうかです。
  • Deletable rows
    レコードを削除可能にするかどうかです。各レコード(行)にゴミ箱ボタンが付くようになります。

これらもひとまず、全て有効にしておきます。
その他オプション.png

そうすると、下記のようにテーブルが追加されます。
いろいろと自動で設定されているかと思います。
テーブル.png

動かしてみる

では、早速動か(PREVIEW)してみましょう。(あ、DBのデータは適当に追加してくださいw
するとあっさりと表示できたかと思います。編集や削除もできるはずです。
列名をクリックすれば、ソートもできます。
テーブルプレビュー1.png

ただし上記では、ページナビだけ表示されていません。
これはデフォルトのページサイズが少し大きいためです。
なので、モデルのページサイズ(Query page size)を少し修正(とりあえず5に)してみます。
page size.png

修正したら再度プレビューすると、無事にページナビも表示されました。
テーブルプレビュー2.png

ここまでで、一旦表示は完了です!
ほんと簡単ですね。一切コードを書いていないw
あと、表示まわりはフィルタなどいろいろあるのですが、それは別の機会にでも。

NEXT.
ただ、これだと編集と削除しかできないので、次回はデータの追加を説明します。
App Maker + Google Cloud SQL の組み合わせで使ってみる(フォームでデータ追加)

kamina
新しい物好き、ガジェット好きなSEです。 プログラミング、サーバー関連、手広くいろいろやってます。
https://www.funlab.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away