Conditional CSS on the FlexCard Configuration

Conditional CSS can now be applied directly to the Flexcard configuration.

Here, we are attempting to showcase a block with varying border colors depending on a node from the JSON data -

a. Add the custom JSON below to the Flexcard data source. 

b. Under the Style tab of the Block, add the following stylings for the border (This will behave as the default styling when the other conditions are not satisfied).

c. You can find a button labeled “Add Conditional Styling” in the Style section. 

d. Click on it to add the condition as shown below and add the border styling accordingly for Red. 

e. Let's add the same condition and styling for the green color.

f. After configuring the conditions, the Style section will appear as shown below.

g. Now, upon giving a preview, you can find the response shown below. The border colors are displayed based on the “displayColor” node value. If the value in the node does not match the condition, then the default style will be taken into consideration.

References :

https://help.salesforce.com/s/articleView?id=sf.os_add_conditional_styles_to_a_flexcard_element.htm&type=5