Build an AEM component with a dialog and HTL code

STEP 1
Create a folder ( say promo ) for the component inside /apps/<projectname>/components folder under the ui.apps module.

STEP 2
Inside the promo component folder, create a .content.xml file 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="Promo Component"
          componentGroup="Your Project - Content"/>

STEP 3
Create a promo.html file with the following content:

<div id="promo">

    <div>
        <h2>${properties.title}</h2>
        <h2>${properties.link}</h2>
        <h2>${properties.ctalabel}</h2>
    </div>

</div>

( Remember, the file name should match the name of the folder. )

STEP 4
Create a folder name _cq_dialog inside the promo component folder.

STEP 5
Inside the _cq_dialog folder, create the .content.xml file with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Promo Component"
    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">
                                            <title
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Enter the title"
                                                fieldLabel="Enter the title"
                                                name="./title"/>
                                            <path
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldDescription="Select the link"
                                                fieldLabel="Select the link"
                                                name="./link"/>

                                            <ctalabel
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Enter the CTA Label"
                                                fieldLabel="Enter the CTA Label"
                                                name="./ctalabel"/>

                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>

                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

The folder structure should look like the following:

STEP 6
Run the Maven command to deploy the latest to your AEM instance

STEP 7
Test your component by dragging and dropping the component on the page.