Logo Light
  Menu
Lessons
Lessons
  Menu

Creating and Deploying Component in AEM

In this article, we will guide you through creating a custom AEM component called “Training.” This component will display the text “Hello World” and will be enhanced to allow content authors to change this text through a dialog box. This guide assumes you are using IntelliJ IDEA for development.

Component Creation and Deployment

Setting Up the Component Structure:

  • In IntelliJ, navigate to ui.apps\src\main\content\jcr_root\apps\wknd\components.
  • Create a new folder named training.
  • Inside this folder, create the following structure:
    • training/.content.xml: Defines the node type and properties of the component.
    • training/_cq_dialog/.content.xml: Defines the dialog properties.
    • training/training.html: The HTML file for the component.

Configuring .content.xml:

  • Edit training/.content.xml to set jcr:title as “Training” and sling:resourceType to wknd/components/training.
  • Add componentGroup as “WKND Sites Project – Content”.

You can Copy and Paste below code:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Training"
    componentGroup="WKND Sites Project - Content"/>

Adding the Hardcoded Text:

  • In training/training.html, insert:

<h1>Hello World</h1>

Adding a Dialog Box to the Component

Step 1: Creating the Dialog Box

  • In training/_cq_dialog/.content.xml, define the dialog box structure.
  • Add a text field that allows authors to enter text.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Training"
          sling:resourceType="cq/gui/components/authoring/dialog"
>
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            
        </items>
    </content>
</jcr:root>

Deploying the Component:

  • Use Maven to build and deploy your project to AEM. In IntelliJ, run:

mvn clean install -PautoInstallPackage

  • After successful deployment, go to AEM’s site editor and open any page (may be /content/wknd/us/en).
  • Drag and drop the “Training” component onto the page.
  • You should see “Hello World” displayed on the page.

Adding a Dialog Box to the Component

Step 1: Creating the Dialog Box

  • In training/_cq_dialog/.content.xml, define the dialog box structure.
  • Add a text field that allows authors to enter text.
  •  

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Training"
    sling:resourceType="cq/gui/components/authoring/dialog"
    >
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Enter Text to be displayed"
                                                fieldLabel="Enter Text"
                                                name="./text"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

The above XML code is a component dialog definition for Adobe Experience Manager (AEM), specifically for a component named “Training”. This dialog definition is used to create a user interface in AEM’s authoring mode, allowing content authors to input and configure data for the “Training” component. Here’s a breakdown of the key parts of this code:

  1. XML and Namespace Declarations:
    • The document begins with a standard XML declaration.
    • It defines several namespaces (sling, granite, cq, jcr, nt) used throughout the document. These namespaces refer to different technologies and frameworks used in AEM, like Apache Sling, Adobe’s Granite UI, and JCR.
  2. Root Node:
    • <jcr:root>: The root element of the XML structure.
    • jcr:primaryType="nt:unstructured": Specifies the primary node type as “unstructured”, which is a flexible node type in JCR.
    • jcr:title="Training": Sets the title of the component.
    • sling:resourceType="cq/gui/components/authoring/dialog": Indicates that this node represents a dialog in AEM’s authoring interface.
  3. Content Container:
    • The <content> element, marked with sling:resourceType="granite/ui/components/coral/foundation/container", acts as a container for the dialog’s elements. It is a part of the Granite UI framework and serves to hold other UI components.
  4. Tabs:
    • Inside the <content> container, there’s a <tabs> element, indicating the use of tabbed navigation in the dialog.
    • maximized="{Boolean}true": This property maximizes the tabbed interface.
    • Each tab is represented as an item within the <tabs> element.
  5. Properties Tab:
    • A tab named “Properties” is defined, which is a common pattern in AEM dialogs for basic component configurations.
    • This tab contains a structure to hold various input fields and configurations.
  6. Columns and Input Field:
    • Within the “Properties” tab, there’s a <columns> element, indicating the use of a column layout for better organization of the fields.
    • Inside the <columns>, there’s a <column> element, a container that holds the actual input fields.
    • A text input field is defined with <text>, where fieldLabel="Enter Text" sets the label of the field, and name="./text" defines the property name in the repository where the input data will be stored.

This structure creates a user-friendly dialog in AEM for the “Training” component, allowing authors to input text that can be dynamically rendered on a webpage. The dialog features a text field where authors can enter text, and this text will be stored as a property in the JCR for that component instance.

Modifying the HTML File to Use the Dialog Property:

Update training/training.html to use the properties object to fetch the dialog input:

<p>This is a Training component</p>
<h1>${properties.text}</h1>

Here, properties is a global object provided by Sling that accesses the properties of the current resource. The text is the property that comes from the dialog input. If text is not provided, Nothing will be displayed in the h1.

Testing the Dialog Box:

  • Redeploy your AEM project.
  • Open a page with the “Training” component.
  • Edit the component, and you’ll see the dialog box.
  • Enter a new text in the dialog box and save.
  • The component on the page should now reflect the updated text.

This process demonstrates the flexibility and power of AEM in creating dynamic components that content authors can easily configure. The use of the properties object in HTL (Sightly) allows for efficient access to component properties set through the dialog box, making the component versatile for various content needs.