10-Marble

Solved

dynamic color indicators based on the numeric value

Forum|Forum|4 years ago
March 31, 2022
1 reply
1641 views

Hi developers,

I'm working on a use case as shown in the images below. Need help with the implementation

Image A :

A cell in a collection widget to show the colored boxes and arrows to indicate that the property values is below a certain threshold values. The colors should be dynamic such that based on the values the outer box and arrow should change color like red, yellow, green

Image B :

These are rows in a grid where cells have values along with a color arrow next to it to indicate the status. The colors should be dynamic such that based on the values the arrow should change color like red, yellow, green

Hope the use case was clear.

Regards,

Saran

Best answer by PaiChung

not sure if it would work here, but state based definitions should allow you to include an icon as well.

https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Composer/Visualization/StyleandStateDefinitions.html

Answer

22-Sapphire I

not sure if it would work here, but state based definitions should allow you to include an icon as well.

https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Composer/Visualization/StyleandStateDefinitions.html

Author

10-Marble

Hi PaiChung,

Thanks for your reply. I tried using the state formatting and i was able to get the desired effect in the grid as shown in image b.

Could you give a solution for the first image effect where there is a red rectangle surrounding the number.

Thanks,

Saran

22-Sapphire I

The red rectangle likely would require CSS or a different way of setting up the mashup using a collection widget.

I'm honestly not exactly sure how to approach that, since I'm not good with CSS