Skip to main content
P
prince_vanani5-Regular Member
5-Regular Member
May 9, 2023
Solved

Collection widget

  • May 9, 2023
  • 1 reply
  • 1763 views

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?

 

 

Best answer by Velkumar

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

 

Velkumar_0-1683630616827.png

 

Step 4: Remove the existing background color from Container 

Velkumar_1-1683630670315.png

 

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

 

Velkumar_2-1683630720631.png

 

/VR

1 reply

V
19-Tanzanite
Velkumar19-TanzaniteAnswer
19-Tanzanite
May 9, 2023

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

 

Velkumar_0-1683630616827.png

 

Step 4: Remove the existing background color from Container 

Velkumar_1-1683630670315.png

 

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

 

Velkumar_2-1683630720631.png

 

/VR

    P
    prince_vanani5-Regular MemberAuthor
    5-Regular Member
    May 9, 2023

    Thanks

    Terms & ConditionsAccessibility statement