Migaro. 技術Tips

                       

ミガロ.　製品の技術情報
IBMiの活用に役立つ情報を掲載！


Valence ウィジェットのカスタムフォーマット使用例

ValenceのGridウィジェットやFormウィジェットでは、カスタムフォーマット機能を利用して画面表示を変更することが可能です。例えば、ウィジェットに画像を表示すること、Formウィジェットのレイアウトを自由に変更することができます。記事では、カスタムフォーマット機能の設定例をご紹介します。

カスタムフォーマットとは？

ウィジェットのカスタムフォーマットはフィールドデータをJavaScript + HTML を利用してカスタムして表示することができる機能です。

任意のHTMLを出力できるため、ウィジェット上へ画像を表示することや、レイアウトを変更すること、表示の拡張やカスタマイズが可能になります。

カスタムフォーマットを使用できるウィジェット

カスタムフォーマットを使用できるウィジェットは以下になります。

  • Gridウィジェット
  • Formウィジェット
  • Chartウィジェット
    • Bar Chart
    • Column Chart
    • Pie Chart
    • Area Chart
    • Line Chart
    • Gauge Chart

カスタムフォーマットの使用例

カスタムフォーマットの拡張例をウィジェット毎にご紹介します。

Gridウィジェット

画像の表示

Simple Order Entry 画像の表示例　

Gridウィジェットでの画像表示は、Valenceのサンプルアプリにも含まれています。
Valenceにログイン後、カテゴリー(例 – Nitro App Builder)に含まれている、「Simple Order Entry」で表示の確認ができます。

「Simple Order Entry」起動後、Gridウィジェットに表示される一覧の中から、#Of Linesフィールドの値が1以上のレコードをクリックして選択してください。

Simple Order Entry 画像の表示例2

Gridウィジェットのセル内に画像が表示されているのを確認できます。

Gridウィジェットへの画像表示は、Gridウィジェットのフィールド設定で「カスタムフォーマット」を使用することにより実現しています。「Simple Order Entry」サンプルアプリケーションの定義は、AppBuilderの設定を変更することで確認できます。

App Builder サンプルアプリの定義表示

AppBuilderアプリを実行後、画面右上に表示されている「歯車アイコン」をクリックしてください。
クリックすると、「設定」が表示されます。「例を表示」にチェックを設定後「OK」ボタンをクリックして一覧画面に戻るとAppBuilderのサンプルアプリケーションが一覧上に表示されます。

App Builder サンプルアプリの定義表示

「Simple Order Entry 」の「Item List」ウィジェットを選択してください。

Simple Order Entry のカスタムフォーマット

「Item List」ウィジェットの左側メニュー「カラム」から、右側グリッドに表示されている「フォーマッティング」列に配置されている、＜＞アイコンをクリックすることで、カスタムフォーマットの内容を確認することができます。

カスタムフォーマットでは、以下コードが設定されています。

var markup = '<img style="max-height:40px;" src="/resources/images/nabSamples/{0}.jpeg"/>';
return Ext.String.format(markup,rec.get('F1_PRDNO'));

JavaScriptの内容は、markup 変数にimgタグの文字列を設定後、Ext.String.formatメソッドを使い{0}の箇所を　rec.get(‘F1_PRDNO’)　で取得した製品番号で置き換えています。
返却された文字列を return で返却することで画像を表示しています。

なお、画像自体はあらかじめIBMiのIFS上に配置している必要があります。
「Simple Order Entry」のサンプルでは　/[valence-6]/resources/images/nabSamples/
に画像が配置されています。
　※[valence-6]の箇所は、Valenceのインスタンスのパスに合わせて変更してください。

上記方法で、Webサーバーに配置した画像をGrid上に表示することが可能です。

横棒グラフ表示

Gridに横棒を表示することで、例えば、予定に対する実績などをグラフのように表示することができます。

カスタムフォーマットによる横棒グラフ表示

上記画像の例は、担当者ごとの売上達成率をGridの列に表示しています。このようなカスタマイズもカスタムフォーマットのJavaScriptで実現できます。

Gridカスタムフォーマットの設定方法

次がカスタムフォーマットに設定したJavaScriptです。

var markup = '<div style="width:280px;display:flex">';
markup += '<div style="background-color:#FFCCCC;height:20px;width:{0}">';
markup += '&nbsp;</div><div style="margin-left:4px">{1}</div></div>';
var bar_size = Math.trunc( 200 * (v /100)) + 'px';
var aq_ratio = v + '%';
return Ext.String.format(markup,bar_size,aq_ratio);

divタグとcssを使用して横棒グラフを表現しています。
一番外側のdivタグに横幅280px(width:280px)とブロック要素を横並びにするため(display:flex)を設定しています。横棒を表示するためのdivタグには、横棒の色(background-color:#FFCCCC)と横棒の高さ(height:20px)を設定しています。

横棒の長さは(width:{0})のように設定しています。
これは、横棒の長さを算出後、置換により各行ごとに設定するためです。

変数vには、達成率の数値が格納されているため、横棒のサイズを変数 bar_size に格納、変数 aq_ratio に達成率を設定しています。
最後に、各行ごとに異なる横棒の長さ、達成率をExt.String.formatメソッドで 変数 markupに設定されている{0}と{1}を置換します。
置換後のhtmlをreturnにより返却すると横棒が表示できます。

Ext.String.formatメソッドは2つ目以降の引数により、複数の置換を行うことができます。

Formウィジェット

表示のカスタマイズ

Formウィジェットのカスタムフォーマット例

上部画像は、Formウィジェットのカスタムフォーマットの例です。
Formウィジェットでは、Gridウィジェットと同じく画像を表示したり、自由にレイアウトを変更することができます。

Formウィジェットのカスタムフォーマット例 カスタムフォーマットの位置

例では、2つのフィールドにカスタムフォーマットを設定して表示をしています。

Formウィジェットのカスタムフォーマット画面例
①タイトル部分(F1_ODPDCD)のカスタムフォーマット

タイトル部分のカスタムフォーマットは、商品コードとアイコンを表示するシンプルなカスタマイズです。 カスタムフォーマットは以下コードです。

var style = 'background-color:#FFFFFF;padding:8px;font-size:18px;color:#2196f3;border-bottom:1px solid #2196f3';
var markup = '<div class="vv-lpad-app-icon vvicon-shutter vvicon-19" style="{0}">' +
' 詳細情報：{1}</div>';
return Ext.String.format(markup,style,v);

Gridウィジェットと同様に、htmlを返却するのは同じです。
Ext.String.formatメソッドを使用して、表示するタグとスタイルを設定しています。

②画像と詳細表示部分(IMG)のカスタムフォーマット

次は、画像とフィールドの情報を自由なレイアウトで表示しています。
カスタムフォーマットの機能により様々な表現が可能になりました。
カスタムフォーマットは以下コードです。

var size = '160px',
 line_style1 = 'display:flex;border-bottom:1px solid #2196f3',
 line_style2 = 'display:flex;margin-top:8px;border-bottom:1px solid #2196f3;',
 label_style = 'width:130px;font-size:14px;color:#FFFFFF;background-color:#2196f3;padding:4px',
 value_style = 'padding:4px;',
 markup  ='<div style="display:flex">' + 
                '<img src="/resources/images/OrderDemo/{0}"/ '+ 
                  'style="width:{1};height:{1} "/>' +
                '<div style="margin-left:16px;padding:0px;width:100%">'+
                    '<div style="{8}">' + 
                      '<div style="{7}">商品名</div><div style="{10}">{2}</div>' +
                    '</div>' + 
                    '<div style="{9}">' + 
                      '<div style="{7}">カナ名</div><div style="{10}">{3}</div>' +
                    '</div>' +                     
                    '<div style="{9}">' + 
                      '<div style="{7}">商品カテゴリー</div><div style="{10}">{4}</div>' +
                    '</div>' +  
                    '<div style="display:flex;margin-top:8px;text-align:center">' + 
                      '<div style="padding:16px;width:50%;border-left:1px solid #2196f3;font-size:32px">{5}<div style="font-size:12px;margin-top:8px">販売価格</div></div>'+
                      '<div style="padding:16px;width:50%;border-left:1px solid #2196f3;border-right:1px solid #2196f3;font-size:32px;">{6}<div style="font-size:12px;margin-top:8px">原価</div></div>'+
                    '</div>' +  
                '</div>' +
            '</div>';
return Ext.String.format(markup,
 v,
 size,
 rec.get('F1_ODPDNM'),
 rec.get('F1_ODPDKN'),
 rec.get('F2_EGCTNM'),
 Ext.util.Format.currency( rec.get('F1_ODTANK'),'','.',false),
 Ext.util.Format.currency( rec.get('F1_ODGEUN'),'','.',false),
 label_style,
 line_style1,
 line_style2,
 value_style);

変数 size , line_style1 , line_style2 , label_style , value_style にはスタイルの設定を格納しています。変数 markup にレイアウトと画像の表示タグを格納、置換する箇所には{0}～{10}を設定、今までのカスタマイズと同じく、Ext.String.formatメソッドで{0}～{10}の箇所を置換しています。

置換の際、金額を表示する項目については、金額のフォーマットを設定するため、Ext.util.Format.currencyメソッドで桁区切りのカンマと円マークを表示しています。

Chartウィジェット

Chartウィジェットで使用できるカスタムフォーマットは各Chartウィジェットのラベル、ツールチップ、値の表示で設定が可能です。

データ軸、ラベル軸のカスタムフォーマット

データ軸、ラベル軸のカスタムフォーマット

データ軸は縦、ラベル軸は横のグラフラベルの表示をカスタマイズできます。
例えば、上部画像のように、売上の単位が大きい場合、単位を千円として、データ軸のラベルを表示してグラフを見やすくできます。

データ軸、ラベル軸のカスタムフォーマット変更例

カスタムフォーマットの設定は以下になります。

return Ext.util.Format.currency(value/1000 ,'','.');

値を1000で割り、Ext.util.Format.currencyメソッドで金額のフォーマットを設定しています。ラベル軸も同様に、カスタムフォーマットで変更することができます。

ツールチップのカスタマイズ

ツールチップのカスタムフォーマット

ツールチップは、グラフ要素にマウスカーソルがホバー(グラフ要素の上にカーソルが移動した際)した際に表示される要素です。
デフォルトでは、データがそのまま出力されます。
カスタムフォーマットを使用することで、出力される表示をカスタマイズすることができます。

ツールチップは以下の要素を設定することができます。

  • beforeTitle: 先頭行の（title）の前に行(テキスト)を追加
  • title: 「タイトル」です。未指定の場合はラベルフィールドの値となります。
  • afterTitle: 「タイトル」の後に行(テキスト)を追加
  • beforeBody: 「データ値（label）」表示前に行(テキスト)を追加
  • label: ツールチップに表示されるテキスト、未指定の場合データフィールドの値となります。
  • afterLabel: 「データ値（label）」表示後に行(テキスト)を追加
  • afterBody: （afterLabel）の後に行(テキスト)を追加
  • beforeFooter:（footer）の前に行(テキスト)を追加
  • footer: ツールチップの下部に表示されるテキスト
  • afterFooter: ツールチップの最下部に行(テキスト)を追加

上記の要素を使用してカスタマイズができます。

ツールチップのカスタムフォーマット画面例

画像の例のカスタムフォーマットは以下になります。

return {
    title: rec.get('F1_MON') + '月 売上情報' ,
    label: seriesLabel + ': ' + Ext.util.Format.currency( value/1000 ,'','.',false) ,
    afterLabel : '単位(千円)',
    footer : '販売累積台数: ' + rec.get('RUISEKIDAISU') ,
    afterFooter: '単位(台)'   
}

recには、データセットのデータが格納されていますので、別フィールドの値が取得できます。
フィールド F1_MON　には、売上月の数値、フィールド RUISEKIDAISU　には、販売台数の累積数が格納されています。

値を表示のカスタマイズ

値を表示のカスタムフォーマット

「値を表示」は、グラフ要素の上部に表示される要素（値）です。
デフォルトでは、データがそのまま出力されます。
カスタムフォーマットを使用することで、出力される表示をカスタマイズすることができます。

値を表示のカスタムフォーマット画面例

画像の例のカスタムフォーマットは以下になります。

return Ext.util.Format.currency( value/1000 ,'','.',false)+  ' 単位(千円)';

おわりに

カスタムフォーマットを利用することで、様々な表現が可能になりました。
カスタムフォーマットを利用してApp Builderアプリケーションを拡張頂ければ幸いです。

Migaro.技術Tips一覧へ

 

株式会社ミガロ．

© 2024 MIGARO CO.,LTD.