Expand my Community achievements bar.

Submissions are now open for the 2026 Adobe Experience Maker Awards.

【AEM】Add class property in Core Component Dialog

Avatar

1/20/25

機能改善要求(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 Comments

Avatar

Community Advisor

1/20/25

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.

 

Avatar

Community Advisor and Adobe Champion

1/21/25

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...


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. 

Avatar

Administrator

2/14/25

@岩男卓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.

Status changed to: Investigating