【ローコード開発ツール】Wagby EE 使ってみた! - 第5回 表示レイアウトを変更する vol.1

前回までは、Wagby EEの各項目の内容を設定していきました。今回はその項目の表示を変更したいと思います

今回は最も設定することが多い、プレファレンス設定と順番の入替、および横並びに配置する方法を記載していきます

プレファレンス

プレファレンスでは、ビルドを行わず、アプリケーション側で表示を変更することができます

各ユーザごとにプレファレンス情報を保持するので、各ユーザー好みに見た目を変更することができます

設定画面

現在の一覧画面は下図の通りです

各項目の境目がわかりづらく、全体的に落ち着いた色合いが利用されているので、カラーリングを変更します

画面上のメニューから、「共通処理」を開き、「プレファレンス」をクリックします

テーマの値を「flat_navy」に変更し、「保存」をクリックします

これでページの色合いを変えることができました

また、プレファレンスでは、フォントサイズやパンくずリストの表示/非表示など、様々な設定が行えます

Wagby Designer

Wagby Designerから、各項目の位置を変更することができます

プレファレンスとは異なり、この変更は全てのユーザで適用されます

設定画面

モデルの設定画面を開き、「レイアウト」タブをクリックします

レイアウトタブでは、各画面での項目の位置や幅などを変更することができます

まずは「詳細」タブをクリックし、詳細画面のレイアウトを変更していきます

上下の位置を変える

上下の位置関係を変更したい場合は、その項目をドラッグアンドドロップすることで変更することができます

試しに生年月日を一番下に変更してみます

設定

生年月日をクリックしたまま、住所の下までマウスを動かします

クリックしたままマウスを動かすと、生年月日の項目が運べるようになり、青い線が表示されます

この青い線は、今クリックをはなした場合の配置場所となります。今回は一番下に配置したいので、住所の下に青い線が出るところまで移動させ、クリックを離します

これで生年月日を一番下に移動させることができました

横並びに配置する

今の画面ではすべての項目が縦一列に並んでいますが、段組みのように横に項目を並べることもできます

今回は氏名とかな氏名を横並びに配置してみます

設定

横並びに配置するためには、まずグループを追加します

画面左側にあるグループメニューから「追加」をクリックします

これで、グループが追加されました

追加したグループに「氏名」と「かな氏名」をドラッグアンドドロップします

グループの中が黄色くなっていればグループ内に配置手出来ます

二つとも配置すると横並びに設定されているのがわかります

また、グループ本体をクリックすることで、グループ自体の設定を行うことができます

今回は、単に横並びに配置したいため、「四角で囲む」のチェックを外しておきます

最後に、グループの位置を変更して「保存する」をクリックします

ここまで進んだら差分ビルドを行い、アプリケーション側の画面を確認してみましょう

変更内容の確認

レイアウト画面で変更したように氏名、かな氏名が横並びになり、生年月日が一番下に移動しました

終わりに

他にもまだまだ項目のレイアウトを変更する方法はありますが、次回はWagby EEにおける、他モデルとの連携について記載する予定です

このページの内容が気になったらお気軽にお問い合わせください
また、さらに詳細なWagby EEの操作を見てみたい場合は紹介セミナーを開催しているのでこちらもお問い合わせください