【クエリビルダ：拡張表現】Webレポートにアイコンを表示する（HTML + CSS）

はじめに

過去の投稿では、WEBレポートにアイコンを表示することについて話しました。
アイコンは、独立した列としてこのように表示されました。

今回は、HTMLコードとCSSを利用して、在庫数とアイコンをひとつの列に表示する方法を紹介したいと思います。

クエリ

基になるクエリ

今回は、Sharperlight独自のオプションであるカスタム定義のデータセットを利用して、データを作成します。

データの定義はこのようになっています。

"製品::String","在庫数::Number"
"パイン材用ネジ 8G x 25",55
"パイン材用ネジ 8G x 28",120
"パイン材用ネジ 8G x 30",80
"パイン材用ネジ 8G x 35",10
"パイン材用ネジ 8G x 40",32
"パイン材用ネジ 8G x 45",500
"パイン材用ネジ 8G x 60",75

データを定義し終わると、選択リストが準備されます。そして選択リストから製品列と在庫数列を出力アイテムとして指定します。

プレビュー機能でクエリを実行してみます。

在庫数とアイコンの表示

拡張表現を追加します。

データ型をHTMLとし、構文には以下のようにHTMLテーブルを作成する記述を行います。
これにより、この拡張表現で作成される列の各行（セル）には、数値とアイコンのセルをもつHTMLテーブルが作成されます。
Switch構文を利用して、在庫数に応じで表示するアイコンの色を変えています。

"<table class='StatusIconStyle'><tr>" +
Switch( True
    ,{%在庫数} >= 100,					"<td>"+Format( "#,##0" , {%在庫数} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusGreen'></img></td>"
    ,{%在庫数} < 100 AND {%在庫数} >= 30,"<td>"+Format( "#,##0" , {%在庫数} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusYellow'></img></td>"
            ,							"<td>"+Format( "#,##0" , {%在庫数} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusRed'></img></td>"
)
+ "</tr></table>"

OKボタンで拡張表現を保存します。
拡張表現の説明を、在庫数の状況と編集します。
出力アイテムとして指定されている在庫数列は、作成した拡張表現によって参照され、値が表示されるので非表示にします。

では、プレビューしてみます。
HTMLコードが見えますね。

ではWEBブラウザで見てみましょう。
OKボタンでクエリを保存、さらにレポート定義を適用ボタンで保存します。

CSS

WEBブラウザで拝見する前に、上記のHTMLコードでは、クラスが使用されていましたね。
クラスは、レポートのオプションタブにあるCSSオプションで記述します。

<style type="text/css">
.StatusIconStyle td {
	border:hidden !important;
	width: 30px !important;
	text-align: right !important;
}
.StatusIconStyleImg
{
	border:0px;
	display:inline;
	margin-top: 4px;
	margin-left: 10px;
    	width: 16px;
    	height: 16px;
}
</style>

WEBブラウザでの表示

Sharperlightサービスが起動している事を確認し、ビューボタンを利用してWEBブラウザでレポートを開きます。

あとがき

SharperlightのWEBレポートのクエリには、HTMLやCSSを組み込むことができるので、ビジネスの中の多様な要求に対応しやすいのではないでしょうか。