【AEM】Add class property in Core Component Dialog | Community
Skip to main content
岩男卓55895320
岩男卓55895320
Level 2
January 20, 2025
Investigating

【AEM】Add class property in Core Component Dialog

  • January 20, 2025
  • 4 replies
  • 587 views
機能改善要求（RFE）概要：

This is a consultation about applying custom CSS when authoring with AEM.

The core component is designed so that you can only change the ID and cannot add classes.
In terms of html validation, I don't think you can use the ID of each component when there are multiple identical components. However, in this case, the ID name will be unique and the same style will be written in CSS.

Request the addition of the Class property in the core component dialog.
ユースケース： Add Custom class CSS in core component dialog
現在／体験した動作：  
改善／期待される動作：  
環境の詳細（AEM バージョン／サービスパック、もしあればその他の詳細）：  
顧客名／組織名 Mitsubishi Electric Corp.
スクリーンショット（ある場合）  
コードパッケージ（ある場合）  

4 replies

岩男卓55895320
岩男卓55895320Author
Level 2
January 20, 2025

  

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
January 20, 2025

To add a class property to a core component dialog in AEM:

  1. Extend the core component by creating a custom dialog.
  2. Add a text field for the className property in the dialog XML.
  3. Modify the rendering logic to apply the custom class to the component's HTML element.
  4. Test to ensure the custom class is applied correctly.

This allows authors to input custom CSS classes for styling, enabling more flexibility than using unique IDs.

 
BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
January 22, 2025

if this is your use case, 

Use Case

Template authors not only need the ability to configure how components function for the content authors, but also to configure several alternative visual variations of a component.

Likewise, content authors not only need the ability to structure and arrange their content, but also to select how it is presented visually.

The Style System provides a unified solution to both the template author’s and content author’s requirements:

  • Template authors can define style classes in the content policy of components.
  • Content authors can then select these classes from a drop-down when editing the component on a page to apply the corresponding styles.

 

I would use the out of the box AEM Style System, https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage/style-system


I'd rather give less control to authors... because applying CSS Styles for updating behavior is not a great practice; this can also confuse them too. You should first of all, consider the AEM Style System, and if that does not work for you... then a drop down box with styling options (granite UI) should be considered. 

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
February 14, 2025

@岩男卓55895320 Thanks for proposing this idea.
This has been reported to the engineering under the internal reference SITES-29244. The product team will triage this request to verify feasibility based on the prioritization model. This post will be updated according to Jira's status.

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...