対話グリッドの単一ビューのレイアウトを調整する方法がありました。以下に紹介します。
表示のみの場合での単一ビューの表示です。
編集モードのときの表示の例です。
対話グリッドはサンプル・データセットのEMP/DEPTに含まれる表EMPを、データ・ソースとして作成しています。こちらの記事で作成しているアプリケーションを基にしています。
列EMPNOのdefaultGridColumnOptionsに、fieldColSpanの設定を追加します。
function(options){
options.defaultGridColumnOptions = {
cellTemplate: '{case DEPTNO/}{when 10/}<div class="u-danger-text">&EMPNO.</div>{when 20/}<div class="u-warning-text">&EMPNO.</div>{when 30/}<div class="u-success-text">&EMPNO.</div>{otherwise/}&EMPNO.{endcase/}',
fieldColSpan: 2,
};
return options;
}
fieldColSpanについては、マニュアルの
こちらに説明があります。単一ビューの横幅は12のグリッドに分割されています。列EMPNOが、そのうちのいくつのグリッドを使用するかをfieldColSpanとして設定しています。ここでは
２を設定しています。この行はEMPNOで始まるので、残りのグリッドは10です。続く項目のfieldColSpanが10以下であれば、一行に含まれるため改行はされません。
列ENAMEのfieldColSpanは6、そして従業員名を太字にするためfieldCssClassesにu-boldを設定します。
function(options){
options.defaultGridColumnOptions = {
fieldCssClasses: "u-bold",
fieldColSpan: 6
};
return options;
}
defaultGridColumnOptionsに設定可能なプロパティは
recordViewのfieldsに定義されていますが、これはレポート形式の表示と単一ビューの双方に適応されます。(例えばcellTemplateは両方に適用されます。) 実装した結果から、fieldCssClassesとfieldColSpanについては、単一ビューでのみ有効なようです。
JOBのfieldColSpanには4を設定します。
function(options){
options.defaultGridColumnOptions = {
fieldColSpan: 4
};
return options;
}
列MGR、HIREDATE、SAL、COMMのfieldColSpanは3を設定します。列DEPTNOにfieldColSpanは設定しません。
function(options){
options.defaultGridColumnOptions = {
fieldColSpan: 3
};
return options;
}
function(config) {
config.defaultSingleRowOptions = {
formCssClasses: "u-Form--labelsAbove u-Form--stretchInputs"
};
return config;
}
このままだとラベルの配置が右寄せになるので、左寄せに変えます。ページのプロパティのCSSにインラインで、u-Form-labelContainerクラスのスタイルtext-alignを左寄せ(left)に上書きします。
.a-RV .u-Form.u-Form--labelsAbove .u-Form-labelContainer {
text-align: left !important;
}
以上の設定で、最初に載せた単一ビューのレイアウトになります。
作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/singlerowview-layout.sql
Oracle APEXのアプリケーション開発の参考になれば幸いです。
完
