Search code examples
mavendialogaemsightlyaem-6

Add textfield for Classes in cq dialog

If we want to add an Id to an AEM Core component such as image, there is this field:

.content.xml

<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML ID attribute to apply to the component."
fieldLabel="ID"
name="./id"/>

which gives this textfield in the dialog.

enter image description here

But what if we want to create the same textfield, but for CLASSES instead? The core components only seems to use the "./id" name, and nothing for classes.

As you can see I am an absolute beginner, so any pointer or help is much appreciated.




--- Edit (June 17, 2022):

Following Vlad's answer, I needed to narrow down where I am having issue:

I don't know how to "add a textfield for classes". For example, the id field has name="./id" in the xml, which can be accessed as "${image.id}" in the html. But the same doesn't exist for Classes.

How would the Textfield look like if I am adding it for Classes? Like this one obviously wouldn't work as "./class" is not connected to anywhere.

<class
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML CLASS attribute to apply to the component."
fieldLabel="CLASS"
name="./class"/>

I guess that the name="./id" of the Textfield is tied to some Java logic so we can retrieve it via "${image.id}". I have looked at image's java code, but don't see how they tied together.

I would need to understand the Java code in order to override it. Or am I missing anything and there is an easier way? Again, absolute beginner here.

Solution

  • You can override the dialog and add a textfield for classes, then overlay the HTL script and inject the classes in the markup. However, I recommend you look first into the OOTB Style System. It allows you to define classes in the component’s policy and then use them in the editor (they will be added on the component wrapper element).