2021年9月1日水曜日

対話グリッドの単一ビューのレイアウトを調整する

 対話グリッドの単一ビューのレイアウトを調整する方法がありました。以下に紹介します。

表示のみの場合での単一ビューの表示です。

編集モードのときの表示の例です。


対話グリッドはサンプル・データセットの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;
}

対話グリッド自体のJavaScript初期化コードで、defaultSingleRowOptionsのformCssClassesを設定します。マニュアルのExampleの記載どおりの設定で、CSSクラスのu-Form--labelsAboveにてラベルを項目の上部に配置し、u-Form--stretchInputsで項目をfieldColSpanで指定した幅に広げます。（このCSSクラスはUniversal ThemeのLayout Modifiersだと思うのですが、残念なことに説明を見つけることができませんでした。)
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のアプリケーション開発の参考になれば幸いです。

完
投稿者 時刻:
ラベル: , ,