【Query Builder：Expression】Use icons in a Web report (HTML + CSS) 

# Introduction #
In the previous [post](), I talked about showing icons on a web report.
The icons were displayed in a column next to the related numbers column.

I would like to show to display the number and icon together in a column this time.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d3415d2a-f447-7784-d9d8-324ca64852df.png)

# Base Query #
Let's create a new report with Sharperlight publisher.
I had the report created before so make a clone of it this time.
Choose the existing report, right-click to show the popup menu and select **Clone**, once Sharperlight publisher is open.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e226a12a-3f19-47de-10d5-127d1e7b71f9.png)
It would create a clone of it with '2' at the end of its code.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7376dafa-5621-fde7-f451-2cca1f95a642.png)

### Editing ###
Open the clone and go for its query definition, and let's start modifing the existing expression.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7627f86a-0b4c-0f47-62e8-10c2ec923f64.png)
The number and icon need to be together in a cell so I use HTML Table tag this time.
The expression can be like this and don't forget the ```Data Type``` property should be **HTML**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8411e4b2-c08a-4ae6-f28c-41a8e01579b6.png)
```
"<table class='StatusIconStyle'><tr>" +
Switch( True
,{%StockLeft} >= 100,"<td>"+Format( "#,##0" , {%StockLeft} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusGreen'></img></td>"
,{%StockLeft} < 100 AND {%StockLeft} >= 30,	"<td>"+Format( "#,##0" , {%StockLeft} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusYellow'></img></td>"
,"<td>"+Format( "#,##0" , {%StockLeft} )+"</td><td><img class='StatusIconStyleImg' src='{_System.Rest.URL}Image/?icode=StatusRed'></img></td>"
)
+ "</tr></table>"
```

```Stocks Left``` can be hidden as its value is now displayed with the icon, also add description to the expression.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8e023e96-5ab4-dc7a-3e48-a53275a58cc8.png)




# Preview #
We can now preview it with **Preview** button. Preview doesn't show icons this time and display HTML table tags.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0bc5015e-cb43-1c37-3ab9-727365a4d0be.png)

# CSS #
The HTML table tag and img tag each have a class.
Let's define the classes to CSS option of the report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/107ebc11-9659-abc1-a389-b7a7ecdddf1b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a48c5440-e075-5b58-25cf-30cee380351e.png)
```
<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>
```

# Publishing the report #
Save the query and save the web report.
Start Sharperlight service.
View the web report in your browser.
We shoud see the web report like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e249ff52-d81b-7a56-2340-025f7e81b1cf.png)

# Conclusion #
There are many Sharperlight expressions and we can create more attractive web reports with them.