Collection widget

[prince_vanani]

Hi, I am working with a collection widget that shows some properties of different devices, I want to apply a custom style theme that can be set automatically to the red background when a property crosses its threshold, I have tried to give a condition through service but it sets the red background to all cards while I want it to some cards whose property crosses the threshold. so how can I do this?

[Velkumar · Accepted solution]

Hi @prince_vanani 

If you want to change container color based on value, you can create custom CSS and expressions to dynamically pass CSS class to the container.

Step 1: Create custom CSS in child Mashup to change the background color of the container 

/* Red Background Color */
.bgRed {
   background: red;
}

/* Green Background Color */
.bgGreen {
   background: green;
}

Step 2: Create expression function threshold value input 

/* Condition based on your user case */
if(inputValue === "Alert")
{
  Output = "bgRed";
} else 
{
  Output = "bgGreen";
}

Step 3: Bind the output of the expression to the container CustomClass property

Step 4: Remove the existing background color from Container 

Now if you load the main mashup it will look like this

/VR

[prince_vanani]

Thanks