バージョン情報
製品 | バージョン |
---|---|
EBX | 6.2.0 |
概要
EBXでは、データモデルを定義、公開することで、関連するデータセットのデータ表示画面やレコード入力/編集画面などのUIが自動生成されます。一方、ユーザーや利用シーンに応じた画面を作成することも、EBXでは可能です。
本稿では、レコードの入力/編集画面のレイアウトを変更するカスタムフォームについて説明します。
カスタムフォームの設定
カスタムフォームは、データモデルの[拡張機能]>[カスタムフォーム]>[フォーム]より設定します。
カスタムフォームの[名称]および設定対象の[ターゲットテーブル]を指定し、画面下部の[保存して閉じる]を押下します。
フォームの一覧に上記で保存した内容が追加されているため、これをダブルクリックで開くことで、下図のようなフォームの編集画面が表示されます。
この編集画面に最初に表示されるブロックの塊は、EBXがデータモデルから自動生成する画面のレイアウトを示しています。独自のフォームを作成する際には、この画面から開始します。
フォームの編集
フォームを編集する際には、
- 画面左のメニューから、必要なブロックを取り出す。
- 画面右の編集画面上でブロックを操作し、組み合わせる。
と
上述のフォーム編集画面上でブロックを操作し組み合わせます。
編集中のフォームは、画面右下の[Preview]より実際のレイアウトを確認できます。
レコード入力/編集画面のレイアウトを変更するにあたっては、メニュー内[2 - レイアウト]に分類されているブロックを使用します。([[テンプレート] レイアウト]には、あらかじめこのブロックを組み合わせたテンプレートが格納されています。こちらを利用することも可能です。)
レイアウトブロックの説明
タブ
タブコンテナ(Tab Container)
レコード入力フォームをタブ分けする際に必要となり、次に記載の[タブ]と合わせて使用します。
[タブコンテナ]の中には、[タブ]を配置します。
タブ(Tab)
上記[タブコンテナ]に挟んで使用し、[タブ]を作成します。[タブ]の中では、当該タブ内の入力フォームのレイアウトを定義します。
本ブロック内の[node]等については、[コンテキスト]>[ノード]配下の各ノードブロック、または[データ]>[共通]配下のvalueブロックをはめ込むことができます。各項目については、下表をご覧ください。
または
設定項目 | 説明 |
---|---|
node | ノードブロックをはめ込みます。ここに値が入った場合、以下[title]および[description]で設定される項目は、データモデルで当該ノードに対して定義したラベルおよび説明が記載されるようになります。 |
title | valueブロックを使用し、当該タブにタイトルを設定します。ここが設定された場合、nodeで設定した内容は上書きされます。 |
description | valueブロックを使用し、当該タブの説明文を設定します。ここが設定された場合、nodeで設定した内容は上書きされます。 |
例
グリッド
グリッド(Grid)
入力フォームをグリッド状に配置(=縦横に配置)する際に利用します。次に記載のグリッドエレメントと合わせて使用します。
[グリッド]の中には、[グリッドエレメント]を配置します。
設定項目 | 説明 |
---|---|
item spacing | 各入力フィールド間のスペースをピクセル単位で設定します。値を指定する際には、[データ]>[共通]配下のvalueブロックを使用します。 |
グリッドエレメント(Grid Element)
上記[グリッド]に挟むことで使用し、縦横の配置を指定します。
設定項目 | 説明 |
---|---|
row | 入力フォームの行を設定します。 |
column |
入力フォームの列を設定します。 |
width | 各グリッドの幅を設定します。 |
height | 各グリッドの高さを設定します。 |
vertical alignment | グリッド内での垂直方向での位置を調整します。start/center/endで設定します。 |
horizontal alignment | グリッド内での水平方向での位置を調整します。start/center/endで設定します。 |
例
フロー
フロー(Flow)(非推奨)
アイテムを配置する方向を指定します。
上記[グリッド]により同様のことができ、かつ[フロー]と比較して[グリッド]のレイアウトの自由度が高いため、[フロー]の利用は非推奨です。
設定項目 | 説明 |
---|---|
direction | horizontal(横に配置)またはvertical(縦に配置)で指定します。 |
item spacing | 各入力フィールド間のスペースをピクセル単位で設定します。 |
展開/折りたたみ
展開/折りたたみ(Expand/Collapse)
入力フィールドをグルーピングし、折り畳んで表示することができるようになります。
設定項目 | 説明 |
---|---|
label | グルーピングへのラベルを設定します。 |
collapsed? | 折りたたみをデフォルトで展開するかを設定します。 |
例
フォーム
フォーム(Form)
入力フィールドにデータモデルで定義したラベルを付与し、立て並びに配置します。データモデル作成時、デフォルトでこのブロックが利用されます。
例
フォーム行(Form row)
レコード入力フォームにアイテムを追加する際に、ラベルや説明を加える場合に使用します。データモデルで定義したノードに対しても使用できます。[フォーム]または後述の[フォームグループ]に挟んで使用します。
設定項目 | 説明 |
---|---|
node | ノードを指定し、ラベルや説明をデータモデル上の設定から変更する場合に設定します。 |
display label? | ラベルおよび説明を表示するかを設定します。 |
label | グルーピングへのラベルを設定します。 |
description | グルーピングへの説明を設定します。 |
例
フォームグループ(Form group)
[フォーム]に挟んで使用します。入力フィールドをグルーピングし、折り畳んで表示することができるようになります。[展開/折りたたみ]と同じ機能を持ちますが、ラベルとしてデータモデル上で定義されたノードを指定できること、説明を追加できる点で異なります。
設定項目 | 説明 |
---|---|
node | グルーピングへのラベルとして、データモデル上のノードのラベルを設定する際に設定します。 |
label | グルーピングへのラベルを設定します。 |
description | グルーピングへの説明を設定します。 |
open? | グループの表示をデフォルトで折りたたむかを設定します。true/falseで指定します。 |
例
カスタムフォーム利用上の注意
カスタムフォームでは、本稿で示したレコード入力/編集フォームの全体的なレイアウトの他、入力フィールドの大きさなども編集することができます。EBXでは、作成したデータモデルを基にデータ閲覧・入力のUIを自動生成しますが、カスタムフォームにおけるそれらの変更は、データモデルには反映されません。