対話グリッドのセルのデータが負数の場合に修飾する

 表題の件で相談があって、以前の記事[対話グリッドの列の計算方法について]を紹介しました。ただこれは計算する方法だけで、修飾する方法は含んでいないので、ちょっと確認してみました。

行いたいのはRevenueが負数のときは、矢印の追加と文字を赤にすることです。

最初に対話グリッドのSQL問合せを更新します。REVENUEが負数になるときに-1、そうでないときには1を返す列FLAGを追加します。

select ID,

PRODUCT_NAME,

PRICE,

QUANTITY,

NVL(PRICE,0) * NVL(QUANTITY,0) as REVENUE,

case

when (NVL(PRICE,0) * NVL(QUANTITY,0)) < 0 then

-1

else

1

end FLAG

from DMT_ORDERS

列REVENUEの表示にTemplate Directiveを使うので、その条件の指定に使います。

列FLAGは更新されることはありません。タイプは数値フィールド、ソースの問合せのみをONにします。

列REVENUEと同様に、列PRICEかQUANTITYが更新されたときに対話グリッドの値を更新します。JavaScript初期化コードを以下のように記述します。

function(options){
    const formatter = Intl.NumberFormat("ja-JP");
    options.defaultGridColumnOptions = {
        dependsOn: ['PRICE', 'QUANTITY'],
        calcValue: function(argsArray, model, record){
            const price = parseInt(model.getValue(record, 'PRICE').replaceAll(",","") || 0);
            const quantity = parseInt(model.getValue(record, 'QUANTITY').replaceAll(",","") || 0);
            if(isNaN(price) || isNaN(quantity)){
                return 'error';
            } else {
                if ((price * quantity) < 0)
                {
                    return "-1";
                };
                return "1";
            }
        }
    };
    return options;
}

列REVENUEのJavaScript初期化コードにcellTemplateの指定を追加します。また、dependsOnの列としてFLAGを追加します。

function(options){
    const formatter = Intl.NumberFormat("ja-JP");
    options.defaultGridColumnOptions = {
        cellTemplate: '{case FLAG/}{when -1/}<div class="u-danger-text"><span aria-hidden="true" class="fa fa-arrow-down-alt"></span>&REVENUE.</div>{when 1/}&REVENUE.{endcase/}',
        dependsOn: ['PRICE', 'QUANTITY', 'FLAG'],
        calcValue: function(argsArray, model, record){
            const price = parseInt(model.getValue(record, 'PRICE').replaceAll(",","") || 0);
            const quantity = parseInt(model.getValue(record, 'QUANTITY').replaceAll(",","") || 0);
            if(isNaN(price) || isNaN(quantity)){
                return 'error';
            } else {
                return formatter.format(price * quantity);
            }
        }
    };
    return options;
}

対話グリッド上の列FLAGは表示する必要がないので、列の設定で非表示にします。デフォルトのレポートも更新すると良いでしょう。 

 以上で完成です。 

Oracle APEXのアプリケーション作成の参考になれば幸いです。 

完