Good morning everybody,
I normally use the configureCell in Vision Power Table and with it is pretty easy to configure the row background color based on a cell value.
In this case I have a Table in Perspective and I populate it with a named query. I need to read a specific cell for each row and if that value is greater than a setpoint I have to change the background color and the text forecolor.
I read in the forum but it looks like this is quite difficult to do (I see a lot of script to do something that in Vision is very easy to do). Maybe I didn't find an easy example that explain it.
Thanks for the help
One of the fundamental differences between Vision and Perspective is that Vision can and does apply styling at the point where it paints in the client (which is what configureCell does), while Perspective needs to have all of its styling delivered with the data, because there is no custom scripting posible where the painting occurs.
This is why, in Perspective, you must transform your table data to include styling in the cells that need it. You cannot do this with dataset format on props.data.
If you do not need the dataset itself elsewhere in your bindings, add a transform to props.data that will convert your dataset to a list of dictionaries, with nested dictionaries that include a style key where you need styling. (See the sample data of a table for the structure needed.)
If you also need the original dataset for other purposes (later export, perhaps), move your NQ binding to a custom property, then bind props.data to the custom prop and then transform. (Or use an expression binding if using my Integration Toolkit to avoid scripting overhead.)
The documentation gives good examples but I recommend that you study the data on the Table component default data (city, country, population) and, in particular, how the data for Folsom is modified to give the orange background.
It does look a bit complicated at first but it's actually not too bad and very flexible.
Thank you all for the explanation and the help.
I will study the documentation and I will make some test.
Have a nice Sunday.
1 Like
Hello @danieltalbot I using your example and works very fine.
how to do if I want to use the custom styles for all the columns, not just RIESGO?
if({view.params.rowData.RIESGO} = 1, "#E60012",
if({view.params.rowData.RIESGO} = 2, "#F0B473",
if({view.params.rowData.RIESGO} = 3, "#ECF293",
if({view.params.rowData.RIESGO} = 4, "#73F093",
if({view.params.rowData.RIESGO} = 5, "#aaa794",
if({view.params.rowData.RIESGO} = 6, "#ffa7cc", ""))))))
If I want to use it in more columns could do something like this?
if({view.params.rowData} = 1, "#E60012",
if({view.params.rowData} = 2, "#F0B473",
if({view.params.rowData} = 3, "#ECF293",
if({view.params.rowData} = 4, "#73F093",
if({view.params.rowData} = 5, "#aaa794",
if({view.params.rowData} = 6, "#ffa7cc", ""))))))
This would look cleaner if it were refactored into a case expression.
case(
{view.params.rowData.RIESGO},
1, '#E60012',
2, '#F0B473',
3, '#ECF293',
4, '#73F093',
5, '#aaa794',
6, '#ffa7cc',
''
)
1 Like
how would it be if I want do generic style for all the columns, not just RIESGO
If you want to color entire rows, the simplest way of doing this is with a script transform on the table's data binding. The same video I linked above should cover what you need to know for that result.
If you want to color entire columns, I believe the simplest way of doing this is with the column object style property.
My personal opinion, I don't color entire rows because I think it can quickly become very distracting and overwhelming to the user when there is so much color on the page. I try to use color sparingly, so I usually just create an additional 'state' or 'status' column with an embedded view that has an icon or label and sets the color depending on the incoming rowData param.
1 Like
Hi @danieltalbot yes your view make a lot of sense
What I want is something like:
So I guess a good option is go column by column with your method.
Yes, for that you could either configure your columns to all use the same embedded view to handle the style, or transform the data into a json format where each column has a value and dynamic style property.
1 Like
@danieltalbot
what would be the condition for all to use same embeded view instead just RIESGO column in this case
if({view.params.rowData.RIESGO} = 1, "#E60012",
if({view.params.rowData.RIESGO} = 2, "#F0B473",
if({view.params.rowData.RIESGO} = 3, "#ECF293",
if({view.params.rowData.RIESGO} = 4, "#73F093",
if({view.params.rowData.RIESGO} = 5, "#aaa794",
if({view.params.rowData.RIESGO} = 6, "#ffa7cc", ""))))))
if({view.params.value} = 1, "#E60012",
if({view.params.value} = 2, "#F0B473",
if({view.params.value} = 3, "#ECF293",
if({view.params.value} = 4, "#73F093",
if({view.params.value} = 5, "#aaa794",
if({view.params.value} = 6, "#ffa7cc", ""))))))
1 Like
Oh great! thanks a lot @danieltalbot
1 Like
I still recommend cleaning up the nested [redundant] if statements.
case(
{view.params.value},
1, '#E60012',
2, '#F0B473',
3, '#ECF293',
4, '#73F093',
5, '#aaa794',
6, '#ffa7cc',
''
)
