Handle multiple conditions in sightly

[askdctm]

Hi All,

1] I have a dialog wherein I can select any one of the six colours. Based on the color selected, the component div should be applied with corresponding css classes.

2] If I had only two colours in the dialog I could have done something like 

<div class=" cssrelatedstuff ${properties.colour=='White -  border' ? 'csswhiteclass' : 'cssotherclass'}">

Any thoughts on this will be helpful.

[edubey]

Hi,

You can have values  (not display text) of drop down as follows csswhiteclass, cssredclass, cssblackclass, cssblueclass...etc

Then you can simply do like this,

<div class=" cssrelatedstuff ${properties.colour @ context='styleToken'}">

It will not require condition check as what you select in dialog is having value with a class name you need.

let us know if you see any issue.

Thanks

[askdctm]

Hi Praveen,

Thank you for your reply.

Tried the below and it worked.

<div data-sly-test="${properties.colour == 'White - border'}" class="csswhiteclass"></div>

<div data-sly-test="${properties.colour == 'Block - border'}" class="cssblockclass"></div>

and so on for all the different colours.

WIll check on the thing you mentioned and post back the results.

[askdctm]

Hi Praveen,

We have a requirement that it should not be a dropdown, but to display all the colors in the dialog.

Though, thanks  a lot for mentioning the  dropdown  approach.

One more doubt I have is, 

1] Inside this component[mentioned above which displays six color options ], when I add a component similar to richtext component, then based on the color chosen , that particular color has to be applied to the text inside richtext component.

So, should I be using the concept of listeners here or something, to check if a particular component is added and then the color of content in it has to be changed?

Any thoughts on this will be helpful.

[edubey]

One question

Are you saying that you can drag n drop many components inside parent but if you put richtext inside parent then it should get color of parent?

Thanks

[askdctm]

Hi Praveen,

Sorry for the delayed response.

Yes, I should be able to drop any component into the parent component, but the color of the text inside the "richtext like" component should be the same as the value of the color selected in the main component dialog[which shows different colors, out of which one is to be selected]