Logo Light
  Menu
Lessons
Lessons
  Menu

Create Various Dialog Box Fields

Introduction

This guide will walk you through the process of creating a new component named “Profile” in Adobe Experience Manager (AEM) using IntelliJ. This component will include a dialog box with various fields like a path picker for the profile picture, text fields, a date picker, a dropdown menu, and radio buttons.

Creating the Component

  1. Open IntelliJ and navigate to your AEM project.
  2. Go to the path: ui.apps\src\main\content\jcr_root\apps\wknd\components.
  3. Create a new folder named profile.
  4. Inside profile, create a file named .content.xml with the following content:

<?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="Profile"
          componentGroup="WKND Sites Project - Content"/>

  • This XML file defines the basic structure of the component.
  • Create an HTML file for the component, e.g., profile.html, and add the following code:

<h1>Hello, World!</h1>

This is a placeholder for now. We will modify it later to display dynamic content.

Creating the Dialog Box

  1. Inside the profile folder, create a subfolder named _cq_dialog.
  2. Inside _cq_dialog, create a file named .content.xml.
  3. Add the following content to .content.xml:

<?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="Profile"
          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">
                                            <profilePicture
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                    fieldLabel="Profile Picture"
                                                    name="./profilePicture"/>
                                            <candidateName
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Candidate Name"
                                                    name="./candidateName"/>
                                            <dateOfBirth
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                                    fieldLabel="Date of Birth"
                                                    name="./dateOfBirth"/>
                                            <engineeringMajor
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                    fieldLabel="Engineering Major"
                                                    name="./engineeringMajor">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <cse
                                                            jcr:primaryType="nt:unstructured"
                                                            text="CSE"
                                                            value="CSE"/>
                                                    <eee
                                                            jcr:primaryType="nt:unstructured"
                                                            text="EEE"
                                                            value="EEE"/>
                                                    <ece
                                                            jcr:primaryType="nt:unstructured"
                                                            text="ECE"
                                                            value="ECE"/>
                                                    <mech
                                                            jcr:primaryType="nt:unstructured"
                                                            text="MECH"
                                                            value="MECH"/>
                                                </items>
                                            </engineeringMajor>
                                            <gender
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
                                                    fieldLabel="Gender"
                                                    name="./gender">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <male
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Male"
                                                            value="Male"/>
                                                    <female
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Female"
                                                            value="Female"/>
                                                    <other
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Other"
                                                            value="Other"/>
                                                </items>
                                            </gender>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Above code snippet is an XML representation of a dialog box for an AEM component named “Profile.” It defines various fields to capture profile details, such as a profile picture, candidate name, date of birth, engineering major, and gender. Let’s break it down:

  1. Root Element (<jcr:root>):
    • Defines the namespaces used in the XML. These namespaces (cq, jcr, nt, sling) are standard in AEM and refer to various functionalities and node types.
    • Sets the primary type as cq:Dialog, indicating that this node represents a dialog box in AEM.
    • The jcr:title attribute sets the title of the dialog box to “Profile Details.”
    • sling:resourceType specifies that this is a dialog box component (cq/gui/components/authoring/dialog).
  2. Content Node (<content>):
    • It’s of type nt:unstructured and serves as a container for the dialog’s content.
    • The sling:resourceType is set to granite/ui/components/coral/foundation/container, making it a container for UI elements.
  3. Layout Node (<layout>):
    • A fieldset (granite/ui/components/coral/foundation/form/fieldset) that groups the form fields.
    • acs-commons-nested and name attributes are set for advanced configurations and name-spacing.
  4. Form Fields (<items> under <layout>):
    • Profile Picture (<profilePicture>): A pathfield for selecting a profile picture. It uses granite/ui/components/coral/foundation/form/pathfield as its resource type.
    • Candidate Name (<candidateName>): A text field for entering the candidate’s name.
    • Date of Birth (<dateOfBirth>): A date picker field.
    • Engineering Major (<engineeringMajor>): A dropdown (form/select) with options for different engineering majors like CSE, EEE, ECE, and MECH.
    • Gender (<gender>): A radio group to select gender. It includes options for Male, Female, and Other.

Each field is an nt:unstructured node with properties like fieldLabel (the label displayed on the dialog) and name (the name of the property to be saved). The dropdown and radio group have child nodes under <items> representing each selectable option, with text (displayed text) and value (saved value) properties.

This XML configuration, when placed in the correct JCR path (usually under /apps/<project-name>/components/<component-name>/cq:dialog), will render a dialog box in the AEM authoring interface, allowing content authors to input and save these profile details for the component.

Deploying the Component

  1. Build your AEM project in IntelliJ.
  2. Deploy it to your AEM instance.

Modifying the Component to Use Dialog Box Data

  1. Update the profile.html file to use the properties from the dialog box. The file should look like this:

<img src="${properties.profilePicture}" alt="Profile Picture">
<h2>${properties.candidateName}</h2>
<p>Date of Birth: ${'dd-MM-yyyy' @ format=properties.dateOfBirth}</p>
<p>Engineering Major: ${properties.engineeringMajor}</p>
<p>Gender: ${properties.gender}</p>

Profile Picture:

  • <img>: This HTML tag is used to embed an image on a web page.
  • src="${properties.profilePicture}": The src attribute of the image tag is dynamically set using the properties object. The properties.profilePicture retrieves the URL/path of the profile picture stored in the component’s properties in AEM. This URL is then used as the source for the image.
  • alt="Profile Picture": The alt attribute provides alternative text for the image if it cannot be displayed. It improves accessibility and SEO.

Candidate Name:

  • <h2>: This tag defines a level 2 heading in HTML.
  • ${properties.candidateName}: This expression fetches the value of the candidate’s name from the component’s properties and displays it as the heading text.

Date of Birth:

  • <p>: Represents a paragraph in HTML.
  • Date of Birth:: Plain text that will be displayed before the date of birth.
  • ${'dd-MM-yyyy' @ format=properties.dateOfBirth}: This expression formats the date of birth stored in the component’s properties (properties.dateOfBirth). The @format option is used to specify the date format (in this case, day-month-year).

Engineering Major:

This paragraph displays the text “Engineering Major:” followed by the value of properties.engineeringMajor, which is expected to be the field of engineering the candidate majors in (like CSE, EEE, ECE, MECH).

Gender:

Similar to the previous points, this line displays the gender of the candidate. The value is fetched from properties.gender.

Steps for Authoring the “Profile” Component in AEM:

1. Accessing AEM Authoring Environment

  • Log in to the AEM authoring environment.
  • Navigate to the page where you want to add the “Profile” component.

2. Adding the Component to the Page

  • In the page editor, locate the place where you want to insert the component.
  • Click on the component placeholder (usually indicated by a “+” icon).
  • From the component list, select “Profile” under the “WKND Sites Project – Content” group.

3. Configuring the Component

Once the component is placed on the page, it’s time to configure it using the dialog fields defined in the XML.

Profile Picture (Path Picker)

  • Click on the placed “Profile” component to open its dialog.
  • For the “Profile Picture”, click on the field labeled “Profile Picture”.
  • Use the path picker to navigate to and select the desired image from the DAM (Digital Asset Manager).
  • Confirm the selection.

Candidate Name (Text Field)

  • Locate the field labeled “Candidate Name”.
  • Enter the candidate’s name into this text field.

Date of Birth (Date Picker)

  • Find the “Date of Birth” field.
  • Click on it to open the date picker.
  • Select the appropriate date, month, and year for the candidate’s date of birth.

Engineering Major (Dropdown)

  • Go to the “Engineering Major” dropdown.
  • Click on it to reveal the options: CSE, EEE, ECE, MECH.
  • Select the candidate’s major from the dropdown list.

Gender (Radio Button)

  • In the “Gender” section, you will see radio buttons for “Male”, “Female”, and “Other”.
  • Select the appropriate radio button that corresponds to the candidate’s gender.

4. Saving the Configuration

  • Once all fields are filled out, click on the “OK” or “Done” button to save the configuration.
  • The dialog box will close, and the “Profile” component will be updated with the entered details on the page.

5. Preview and Publish

  • Switch to the preview mode to see how the component looks on the page.
  • If everything appears as expected, you can proceed to publish the page to make the changes live.