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
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
Solved! Go to 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
Views
Replies
Total Likes
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:
Note: If you leave the value field empty then it will select the node name as your class.
2nd solution:
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies