Handle multiple conditions in sightly | Community
Skip to main content
Level 9
Apr 7, 2016 12:09 PM UTC

Handle multiple conditions in sightly

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

edubey
Level 10
Apr 7, 2016 12:25 PM UTC

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

Translate
askdctmAuthor
Level 9
Apr 7, 2016 12:50 PM UTC

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.

Translate