Valence グループ化された項目の表示内容の変更

ValenceのウィジェットGridやEditGridには特定の項目で表示をまとめることができるグループ機能がございます。
グループはウィジェット編集画面の「設定」>「データ」>「グループ」から行うことが可能です。

但し、通常表示されているグループ名（例 部門CD: 110）の表示は変更することができません。
今回は表示名をスクリプト実行で変更する手順を紹介いたします。

グループ化された項目の表示変更方法

表示項目の間にあるセミコロンの削除

グループ化された項目名と項目内容の間にあるセミコロンを表示から消去します。

アプリケーションの設定から「動作内容」>「Startup」>「スクリプト実行」を選択して、
下記のJavaScriptを記載して保存します。

const gridWidgets = Ext.ComponentQuery.query('widget-edit-grid');
if(gridWidgets.length >= 1){
    gridWidgets.forEach(function(gridWidget) {
        const grid = gridWidget.down('grid');
        const view = grid.getView();
        try {    
            if(view.tpl.groupingFeature){
                view.tpl.groupingFeature.groupHeaderTpl = new Ext.XTemplate(
　　　　　　//セミコロンを無くして表示する
            '<tpl if="columnName">{columnName} {name}<tpl else>{name}&nbsp;</tpl>'
                );
            }
        } catch (e) {
            console.log(e);  
        }
    });
}

表示項目に他カラム名を追加

グループ名の表示項目に他のフィールドの値を追記します。
今回は部門コードに紐づいた部門名を追記します。
上記のJavaScriptから下記の赤字部分を追加しております。

const gridWidgets = Ext.ComponentQuery.query('widget-edit-grid');
if(gridWidgets.length >= 1){
    gridWidgets.forEach(function(gridWidget) {
        const grid = gridWidget.down('grid');
        const view = grid.getView();
        try {    
            if(view.tpl.groupingFeature){
                view.tpl.groupingFeature.groupHeaderTpl = new Ext.XTemplate(
　　　　　　//セミコロンを無くして表示する
            '<tpl if="columnName">{columnName} {name}<tpl else>{name}&nbsp;</tpl>',
            //部門名の項目を追加する
            '<tpl if="values.children[0].data.F1_CRBMNM">',
            '（部門名 {[values.children[0].data.F1_CRBMNM]}）',
            '</tpl>'
                );
            }
        } catch (e) {
            console.log(e);  
        }
    });
}

青字の項目名はウィジェットの編集に表示されているカラム名を記載ください。
また、設定されたカラムは各グループの一番上の項目が取得されますのでご注意ください。

表示項目にカラムの小計値を追加

コロンの消去、カラム名の追加に続きまして、次に売上金額の小計値を表示させます。

上記のJavaScriptに赤字を追記しております。
青字部分のカラム名は先ほど同様に小計値にするのカラム名を記載します。
また、グループそれぞれの値を足しこみ表示させるのですが、表示されている項目のみ足しこまれるため、
グループが複数ページに跨る場合には表示されている箇所のみ足されるためグループ全体の値にはなりません。
そのため、ページングの有無やページサイズを調整してお使いください。

const gridWidgets = Ext.ComponentQuery.query('widget-edit-grid');
if(gridWidgets.length >= 1){
    gridWidgets.forEach(function(gridWidget) {
        const grid = gridWidget.down('grid');
        const view = grid.getView();
        try {    
            if(view.tpl.groupingFeature){
                view.tpl.groupingFeature.groupHeaderTpl = new Ext.XTemplate(
　　　　　　//セミコロンを無くして表示する
            '<tpl if="columnName">{columnName} {name}<tpl else>{name}&nbsp;</tpl>',
            //部門名の項目を追加する
            '<tpl if="values.children[0].data.F1_CRBMNM">',
            '（部門名 {[values.children[0].data.F1_CRBMNM]}）',
            //売上金額を追加する
            ' (売上金額 ￥',
                 '{[Ext.util.Format.number(values.children.reduce(function(total, rec) { return total + parseFloat(rec.data.F1_CRURKN || 0); }, 0), "0,000")]}',
            ')',
            '</tpl>'
                );
            }
        } catch (e) {
            console.log(e);  
        }
    });
}

おわりに

今回はグループ化された項目の表示内容を変更する方法を紹介させていただきました。スクリプト実行することで、グループ名以外の項目や小計値等を表示させることが可能となります。
グループ化するときに是非ご活用いただければ幸いです。