モデルの修正

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

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

まずは、WidgetsからTableを追加します。

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

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

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

これらもひとまず、全て有効にしておきます。

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

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

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

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

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

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