レイアウト(上級編)最終更新日: 2020年9月7日

はじめに

基本的なレイアウトの設定はスクリーンエディタで行えます。(「レイアウト設定(基本編)」参照)
ただし、多くのモデルのレイアウトを一気に設定したい時などはリポジトリ情報を直接編集すると便利です。
また、スクリーンエディタでは設定できない高度なレイアウトも実現できます。
リポジトリの設定はモデル編集画面の「レイアウト>リポジトリ」タブより行えます。

リポジトリの設定画面

基本的な設定

リポジトリを直接、編集する方法を説明します。(なお、以下の設定はスクリーンエディタでも行うことができます。)

基本構成
もっとも基本的な縦並びと横並びの設定方法を説明します。
入れ子レイアウトと隠しレイアウト
縦並びグループと横並びグループを組み合わせたり、グループの中に別のグループを入れ子にすることができます。
ウィザードとタブレイアウト
一画面に多くの項目がある場合、ウィザードまたはタブレイアウトで整理することができます。
タイトルペイン v8.1.0以降
複数の項目をタイトルペインに格納し、表示と非表示を切り替えることができます。
検索条件の並び順
検索条件の並び順を変更する方法を説明します。
範囲検索条件の入力欄のレイアウト レイアウト基本設定と同じ
検索画面の範囲指定項目は均等割り付けと左寄せのいずれかを指定できます。
検索条件部の段組レイアウト
一覧表示の各項目を複数行にまたがって表示することができます。
検索条件欄を折り畳む レイアウト基本設定と同じ
検索条件欄を折り畳んで表示するレイアウトを説明します。
一覧表示の並び順
一覧表示の並び順を変更する方法を説明します。
一覧表示 - 複数段一行明細(多段)レイアウト
一覧表示の各項目を複数行にまたがって表示することができます。
繰り返しコンテナ - 列幅の調整 レイアウト基本設定と同じ
繰り返しコンテナの列幅を調整することができます。
繰り返しコンテナ - スクロールバーの表示(と幅、高さの設定) レイアウト基本設定と同じ
繰り返しコンテナの表示領域を固定とし、縦・横スクロールバーを表示します。
繰り返しコンテナ、外部キー子モデル一覧を任意の位置に配置する レイアウト基本設定と同じ
繰り返しコンテナまたは外部キー子モデル一覧の位置を指定する方法を説明します。

高度な設定

ここで紹介するレイアウトは、リポジトリの設定が必要です。

グループのラベルを用意する
レイアウト名をモデル項目と同じようにラベル表示する方法です。
タブ表示制御
モデル項目の値に応じてタブの表示/非表示を切り替えることができます。
繰り返しコンテナ - タブ
複数の繰り返しコンテナを一つのタブにまとめることができます。
繰り返しコンテナ - 複数段一行明細(多段)レイアウト
繰り返しコンテナの各項目を複数行にまたがって表示することができます。
繰り返しコンテナ - タブと複数段一行明細(多段)レイアウト
繰り返しコンテナ複数段一行明細レイアウトをタブと併用することができます。
繰り返しコンテナ - ヘッダ部のみの複数段一行明細(多段)レイアウト
繰り返しコンテナのヘッダ部のみ複数段一行明細レイアウトとすることができます。
繰り返しコンテナ - 縦並び
繰り返しコンテナの標準レイアウトは横並びですが、縦並びのレイアウトにすることもできます。
繰り返しコンテナ - 複数の繰り返しコンテナの横並び
複数の繰り返しコンテナを二段、三段の横並びとすることができます。
繰り返しコンテナ - 複雑なタブ設定
タブの中に繰り返しコンテナを配置するレイアウトのさまざまな例を紹介します。
外部キー子モデル - 複数段一行明細(多段)レイアウト
外部キー子モデルの各項目を複数行にまたがって表示することができます。
外部キー子モデルおよび繰り返しコンテナを親モデルのタブにまとめる
外部キー子モデルは通常、親モデル表示の下部に表示されます。これを親モデルのタブに含めることができます。
説明文・脚注を挿入する
画面内に説明文または脚注を表示する方法を説明します。
CSS レイアウトを利用する  v8.3.1以降
レイアウトの実装技術に CSS Flexbox を使うことができます。
ログオン画面の背景画像を変更する
背景画像をカスタマイズフォルダに保存する方法を説明します。
CSSのカスタマイズ
CSSのカスタマイズによって罫線の色や背景色を変更することができます。
JavaScriptのカスタマイズ
JavaScriptのカスタマイズによってユーザーインタフェースの挙動を変更することができます。