表題の件で相談があって、以前の記事[対話グリッドの列の計算方法について]を紹介しました。ただこれは計算する方法だけで、修飾する方法は含んでいないので、ちょっと確認してみました。
行いたいのは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のアプリケーション作成の参考になれば幸いです。
完
