Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Reg: Component Context getcssclassname

Avatar

Community Advisor

Hello @Daniel_Gordon ,

 

I just read your reply on https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/don-t-understand-cssclassn... question on what is the use of getcssclassname but i have requirement where i only need Styles added via Style System nothing else..like page component or content component names. Is there any way?

 

@Jörg_Hoh @kaushal_mall 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

you can use API to access the style system

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/co...

 

but the https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/co...() will return the classes which is either included by default or using cq:htmlTag

cq:htmlTag node : This node can be added under a component and can have the following properties:

  • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
  • class {String} : This can be used to specify css class names to be added to the wrapper.


Arun Patidar

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

Hi,

you can use API to access the style system

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/co...

 

but the https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/co...() will return the classes which is either included by default or using cq:htmlTag

cq:htmlTag node : This node can be added under a component and can have the following properties:

  • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
  • class {String} : This can be used to specify css class names to be added to the wrapper.


Arun Patidar

Avatar

Community Advisor
@arunpatidar Thank you for the reply. Yes I saw the api but unable to find any reference implementation on how exactly we can invoke the API within component context or from sling model and get styles attached a component or a page.. also for the getcssclassname() if you have seen the link i have quoted, Daniels was saying it will even fetch styles attached via style system as well. so got curious to know from other side.

Avatar

Community Advisor
Hi find the example of getCSSClassName https://github.com/arunpatidar02/aem63app-repo/blob/master/java/XFFilter.java, I will create a example for style api as well and share with you.


Arun Patidar

Avatar

Community Advisor
Hi, I did to find any API which directly extract the style but I tried to create something just for PoC https://github.com/arunpatidar02/aem63app-repo/blob/master/java/HelloWorldModel.java


Arun Patidar

Avatar

Community Advisor
Thanks Arun for the help.. Really appreciate it.

Avatar

Level 9

also, just to add an idea and not doing framework layer customization(if it is not need global level for many instances)

 

why not to use componentContext or includoption to disable the tag (div/span etc...) decoration only in publish/disabled mode and read the styles using contentpolicystyle and generate desired div/span container with style class (only in publish/disable mode) inside component only (as top container).

 

other way around to look at it.

 

thanks!!