Style tab getting un selected in edit dialog when it has spaces in style outputted

[Shehjadkhan]

Hi All,

I am trying to use style tab feature of AEM component, so that I can use the same component on my different pages with different look and feel.

Sometimes i want to create style which have spaces in between for example when the author choose "Hero - Branded" on the component div I want this style to apply - "hero-parallax home-hero" (Please refer to  attached images

and

).

When author reopens the edit dialog the style gets selected to default. Problem is with style node which have space in them. Now only solution i can think of is to change all my style from hero-parallax home-hero to 

hero-parallax_home-hero and refactor my css, which is a big pain.

Any better way, I also tried adding a property value similar to text on node but that did not helped.

Thanks!

Shehjad

[Amit_Kumar]

Shehjadkhan wrote...

Hi All,

I am trying to use style tab feature of AEM component, so that I can use the same component on my different pages with different look and feel.

Sometimes i want to create style which have spaces in between for example when the author choose "Hero - Branded" on the component div I want this style to apply - "hero-parallax home-hero" (Please refer to  attached images

and

).

When author reopens the edit dialog the style gets selected to default. Problem is with style node which have space in them. Now only solution i can think of is to change all my style from hero-parallax home-hero to 

hero-parallax_home-hero and refactor my css, which is a big pain.

Any better way, I also tried adding a property value similar to text on node but that did not helped.

Thanks!

Shehjad

Well from your problem statement, It seems you want to apply two classes to your component i.e. hero-parallax and home-hero and your selection is not working as this goes back to default value every time.

Cause: you can't have space in node name and you can't select more than one class per selection.

Solution:

To solve this you have two options:

1st solution:

• create separate nodes under cq:styles for your every class you want to add i.e. one for hero-parallax and home-hero
• you can select both of them from your style tab

Note: If you leave the value field empty then it will select the node name as your class.

2nd solution:

• Rename your node by removing the space
• In value: use hero-parallax|home-hero /" | will be used as separator*/
• Create a new xtype by overriding /libs/cq/ui/widgets/source/widgets/form/ComponentStyles.js in which you can read the value from node and using that separator(|) split your classes and append to cq:cssClass in you component node.

[Shehjadkhan]

Amit_Kumar wrote...

Shehjadkhan wrote...

Hi All,

I am trying to use style tab feature of AEM component, so that I can use the same component on my different pages with different look and feel.

Sometimes i want to create style which have spaces in between for example when the author choose "Hero - Branded" on the component div I want this style to apply - "hero-parallax home-hero" (Please refer to  attached images

and

).

When author reopens the edit dialog the style gets selected to default. Problem is with style node which have space in them. Now only solution i can think of is to change all my style from hero-parallax home-hero to 

hero-parallax_home-hero and refactor my css, which is a big pain.

Any better way, I also tried adding a property value similar to text on node but that did not helped.

Thanks!

Shehjad

Well from your problem statement, It seems you want to apply two classes to your component i.e. hero-parallax and home-hero and your selection is not working as this goes back to default value every time.

Cause: you can't have space in node name and you can't select more than one class per selection.

Solution:

To solve this you have two options:

1st solution:

• create separate nodes under cq:styles for your every class you want to add i.e. one for hero-parallax and home-hero
• you can select both of them from your style tab

Note: If you leave the value field empty then it will select the node name as your class.

2nd solution:

• Rename your node by removing the space
• In value: use hero-parallax|home-hero /" | will be used as separator*/
• Create a new xtype by overriding /libs/cq/ui/widgets/source/widgets/form/ComponentStyles.js in which you can read the value from node and using that separator(|) split your classes and append to cq:cssClass in you component node.

Thank you Amit for your detailed reply :)

Unfortunately even when i give the value field and it has space in it (i.e. when i try to apply 2 classes it gives the same problem)

Solution 2 is something which i can try but still I have rename the node and thus pages where style was selected before would get lost and author have to choose the style again which I wanted to avoid but may be it might work without renaming also, i have to try it out.

Thanks for your reply it was very helpful.

[Amit_Kumar · Accepted solution]

Hi Shehjad,

Happy to help.
I had already mentioned that you can't apply two classes per selection so it is same even if you have space in value would not work. What I was suggesting in solution one is to break your node into two nodes and select both your component style.

anyways you can customize xtype. :)

Regards,
Amit