Change Card colour dynamically in Gallery list if Optional button is selected
Question
Application Type
Reactive
Service Studio Version
11.11.12 (Build 47321)

Hi, I have a gallery of cards for which the colour of the cards are currently blue. However, I would like to have colour differentiation based on the options selected by Content Admin. For example if the card with "Create Product Delivery Strategy" is optional as clicked by user using the checkbox, the colour of the card will be yellow in colour automatically. 

I am wondering what is the best way to do this?

Image1.jpg

mvp_badge
MVP
Solution

Hi Angeline,

If  have attached the sample oml as an example for you in which you can see how to set class dynamically to change the background color of card of your list.

In my sample oml, I have created two class like below

and over the extended class, I have added the below code:

I hope this helps.

In your case instead if favorite, you can check the value of your checkbox which you saved in the config and change the class accordingly.  

Thanks,

Manish Jawla

CardGallery.oml

Hi Angeline,

Not sure if I got your point here, but if you have a back-office, where some admin is selecting the colour and what is optional, you can query those information and use to change the colour when rendering the screen.

or you can add a class to the colour option you have and based on your user case use an IF to select the proper class and present the right colour/option to the user


Best Regards

Carlos Lessa


Hi Carlos,

Thanks for replying. So basically what I would want to achieve is that when my admin checked the Optional box, the cards that are tagged to the Optional will have a different colour compared to those mandatory. I am currently using card gallery (see image 1) and they are all the same colours. However, I want to have different colours when optional is selected and I am wondering how to achieve this. 

Many thanks for your expertise. 

Image2.jpg

mvp_badge
MVP
Solution

Hi Angeline,

If  have attached the sample oml as an example for you in which you can see how to set class dynamically to change the background color of card of your list.

In my sample oml, I have created two class like below

and over the extended class, I have added the below code:

I hope this helps.

In your case instead if favorite, you can check the value of your checkbox which you saved in the config and change the class accordingly.  

Thanks,

Manish Jawla

CardGallery.oml

Thanks everyone for your help. Greatly appreciate that. It works with the style class.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.