【ローコード開発ツール】Wagby EE 使ってみた! - 第8回 表示レイアウトを変更する vol.2
前回までは繰り返しコンテナや繰り返し項目について紹介しました
今回は第5回に続き、表示レイアウト設定としてタブ表示やウィザードの設定方法を記載していきます
タブレイアウト
タブレイアウトは、アプリ画面で項目が多い場合など、スクロールが大変な時に便利な機能です
項目を複数のグループに分けてタブを作ることで、アプリ画面が見やすくなります
今回は商品モデルにタブレイアウトの設定をしていきます
設定方法
例として、商品モデルに在庫数、保管場所、備考を追加します
商品モデルの編集画面で、レイアウト＞詳細の順に選択します
左側の欄の「タブ」を開き、タブコンテナの「追加」を押下します
下図のように新規タブができました
追加した新規タブをクリックすると水色の枠が表示され、タブが選択された状態になります
この状態で、タブ設定の中にある「ラベル」でタブ名を変更します。今回は「基本情報」にします
タブに追加したい項目をドラッグアンドドロップします
今回は基本情報タブにはID、商品名、単価を配置します
続いて、もう1つタブを追加します
基本情報タブを選択した状態で、左側の欄のタブ設定の中にある「追加」を押下します
タブの追加ができたので、ラベル欄でタブ名を「在庫管理」に設定します
在庫管理タブには在庫数、保管場所、備考をドラッグアンドドロップで配置します
ここまで設定できたら「保存する」を押下し、差分ビルドを行ってアプリ画面で確認してみましょう
アプリで確認
商品の新規登録画面を見てみましょう。２つのタブで項目をグループ分けすることができました
タブの入れ子
大タブの中に、さらに小タブを作ることをタブの入れ子といいます
フォルダの中にサブフォルダを作るイメージです
設定方法
上記で作成した「基本情報」と「在庫管理」を小タブとして大タブに入れる設定をします
タブコンテナの中にある「追加」を押下して、タブを追加します。今回はタブ名を「商品情報」に設定します
基本情報タブと在庫管理タブのまとまりを、ドラッグアンドドロップで商品情報タブの中の配置します
配置ができたら「保存する」を押下して、差分ビルドを行ってアプリ画面を見てみましょう
アプリで確認
商品の新規登録画面を見てみましょう。タブ同士を入れ子に設定することができました
ウィザード
項目を複数画面に分割し、入力順を定める設定をウィザードといいます
タブレイアウトは自由にタブを切り替えてデータ入力できますが、ウィザードは「次へ」ボタンを押下して画面を遷移させるため、入力順を強制することができます
今回は、予約モデルにウィザードを設定し、２画面に分割する方法を記載していきます
設定方法
まずは予約モデルを作成し、各項目を下表のように設定します
今回は「氏名」を必須項目に設定します
氏名項目の詳細画面を開き、入力チェックタブにある必須項目をプルダウンで「〇」に設定します
次に各項目の詳細からモデル項目詳細定義を開き、ウィザード画面番号を設定していきます
各項目のウィザード欄に画面番号を入力します
氏名、電話番号、メールアドレスを「１」、予約日時とサービス内容を「２」に設定します
なお、主キー項目は「all」と入力してください
ウィザード画面番号は一括設定することもできます。モデル項目詳細画面から「一括設定」を押下します
カテゴリ：詳細、リポジトリキー：ウィザードを選択し、設定値を入力して保存します
ここまで設定できたら、差分ビルドを行ってアプリ画面を見てみます
アプリで確認
予約の新規登録画面を見てみましょう
画面移動ボタン「前画面へ」「次画面へ」と、画面指定ボタン「画面１」「画面２」ができました
なお、氏名を必須項目に設定しているため、氏名を入力せずに画面２に進むことはできず、エラー表示が出ます
終わりに
今回はタブレイアウト、ウィザードの設定方法について記載しました。次回は、選択肢モデルとサブモデルについて紹介したいと思います
このページの内容が気になったらお気軽にお問い合わせください
また、さらに詳細なWagby EEの操作を見てみたい場合は紹介セミナーを開催しているのでこちらもお問い合わせください
