Handle multiple conditions in sightly | Community
Skip to main content
A
askdctm
Level 9
April 7, 2016

Handle multiple conditions in sightly

  • April 7, 2016
  • 1 reply
  • 3573 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.

1 reply

edubey
edubey
Level 10
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
Level 9
April 7, 2016

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
edubey
Level 10
April 7, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...