FAQ: How to change the cell color depending on the range of numerical value in the Screen Index
## Answer
Use "「Server Script」" and "「Style」".
---
## Overview
In "「Server Script」", assign "Cell CSS" according to the range of "「Numerical Value Column」" specified on "「Screen Index」" and change the background color of the cell.
## Operation Procedure
1. Create a "「Table」".
1. Enable "NumC (NumC)" in "「List Screen Column Settings」".
1. "Create new" the following "「Server Script」". For "「Condition」", select "Before Row Display".
1. "Create new" the following "「Style」". For "Destination", select "Index".
## Script
##### JavaScript (Server Script)
```
// If the value of number C is less than 10,000, the background will be changed to red, if it is between 20,000 and 30,000, the background will be changed to yellow, and if it is 30,000 or more, the background will be changed to blue. The background color will be specified using a style that has been set in advance.
const total = model.NumC;
if (total < 10000) {
columns.NumC.ExtendedCellCss = 'cell-blue';
} else if (total >= 10000 && total < 30000) {
columns.NumC.ExtendedCellCss = 'cell-yellow';
} else if (total >= 30000) {
columns.NumC.ExtendedCellCss = 'cell-red';
}
```
## Style
The method for specifying elements differs between versions prior to 1.4.20.0 and later versions.
#### after ver1.4.20.0
##### CSS (Style)
```
/* Total is less than 10,000 JPY */
.grid td.cell-blue {
background-color: blue;
color: white;
}
/* Total is 10,000 JPY or more, but less than 30,000 JPY */
.grid td.cell-yellow {
background-color: yellow;
color: black;
}
/* Total is over 30,000 JPY */
.grid td.cell-red {
background-color: red;
color: black;
}
```
#### before ver1.4.19.2
##### CSS (Style)
```
/* Total is less than 10,000 JPY */
.cell-blue {
background-color: blue;
color: white;
}
/* Total is 10,000 JPY or more, but less than 30,000 JPY */
.cell-yellow {
background-color: yellow;
color: black;
}
/* Total is over 30,000 JPY */
.cell-red {
background-color: red;
color: black;
}
```
## Related Information
<div id="ManualList">
<article class="s-blog_list_unit"><h2>
<h2>The specified information was not found.</h2>
<p><a href="/ja/manual">Return to top</a></p>
</article>
</div><input id="SearchTextHidden" type="hidden" value="" />
