データ管理画面の使い方

TemPlat Consoleでは、ERDの情報からデータ管理画面が自動生成されます。
データ管理画面ではデータを確認、修正することが出来ます。

画面イメージ

まずは自動生成される画面のイメージを共有します。例としているのは商品やセミナーとかを予約販売するような機能ですが、内容はあくまでもサンプルとして捉えてください。

トップページ

トップページは各テーブルの一覧画面へのリンク一覧となっています。いわゆるダッシュボード的なイメージです。トップページはNuxt Routerの設定で特定のテーブルの一覧画面にすることもできます。

またサイドメニューにも各テーブルの一覧画面へのリンク一覧が作成されます。サイドメニューはすべての画面で表示可能になっているので、どの画面からの他のテーブルの一覧画面に遷移できるようにしています。

一覧ページ

各テーブル単位の一覧

各画面でできること

一覧画面

一覧画面は現在はテーブル形式で出力しています。カード形式(トップページと同じようなレイアウト)も用意していますので、少ししたら選択できるようにします。

テーブル形式では、デフォルトでは以下のデータ型のフィールドはすべて一覧表示するようになっています。以下の商品の例のようにフィールドが少ないといいですが、多いと横長になってしまうので、後で説明する方法で一覧に表示するフィールドを絞ってください。

【一覧表示されるフィールド】

文字列、数値、日時の型

【表示されないフィールド】

Struct、テキストエリア(後述するフィールド毎の設定で設定した場合)

一覧の検索

一覧画面の上の部分に虫眼鏡アイコンがありますが、ここをクリックすると一覧の検索(絞り込み)ができます。初期表示は全件を10行づつページングして表示するようになっています。

虫眼鏡アイコンクリックすると以下ような検索条件を入力できるダイアログが表示されます。ここに検索条件を設定して「検索」ボタンを押すと一覧が絞り込まれます。

ここでは商品名を入力しています。注意頂きたいのは、データベースに「Datastore」を利用している場合、基本KVS(キーバリューストア)なので、部分一致検索はそのままではできません。基本は一致検索です。ですので、上記検索条件も商品名が「FUN DIVE」と一致する商品だけがヒットします。

新規追加

新規登録のする場合は、テーブルの右上のプラスボタン押すことで、登録用のダイアログが表示されます。必要項目入力して保存ボタンで新しいレコードが登録されます。

更新

基本は新規追加と同じです。一覧表示された右端の鉛筆アイコンを押すと、編集用のダイアログが表示されます。必要な修正をして保存で更新されます。

削除

削除は一覧画面からも更新画面からもできます。一覧からの場合は一覧の右端にあるゴミ箱アイコンから削除できる仕様です。

更新画面の場合はには、ダイアログ表示されたフッター部分に削除ボタンが用意されています。