Skip to main content
A
askdctm
New Participant
April 7, 2016

Handle multiple conditions in sightly

  • April 7, 2016
  • 5 replies
  • 3570 views

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
edubey
New Participant
April 7, 2016

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

A
askdctmAuthor
New Participant
April 7, 2016

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.

Terms & ConditionsAccessibility statement

Loading footer...