Creation of component in AEM

Here I am going to create Employee Card component which as the following features in it:

1. First name and Last Name

2. Image of the employee

3. A checkbox to check if he/she is a developer

4. Skills as the multifield

Step 1: Creation of the component:

. content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs">
                <items jcr:primaryType="nt:unstructured">
                    <Details
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Employee Details"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <firstName
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="First Name"
                                name="./firstName"/>
                            <lastName
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Last Name"
                                name="./lastName"/>
                            <employeeImage
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                fieldLabel="Image"
                                name="./employeeImage"
                                rootPath="/content/dam/employee-details"/>
                            <skills
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                fieldLabel="Skills"
                                name="./skills">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <primarySkill
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Primary Skill"
                                            name="./primary"/>
                                        <secondarySkill
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Secondary Skill"
                                            name="./secondary"/>
                                        <functionalSkill
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Functional Skill"
                                            name="./functional"/>
                                    </items>
                                </field>
                            </skills>
                            <developercheck
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                checked="{Boolean}false"
                                name="./developercheck"
                                text="Are you a developer? "
                                value="{Boolean}true"/>
                        </items>
                    </Details>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Step 2: Creation of the Java interface and java class for the Sling Model

Java Interface:

package com.aem.geeks.core.models;

import com.adobe.xfa.Bool;

public interface Demo {
    String getFirstName();
    String getLastName();
    Boolean getIsDeveloper();
}

Java Class:

package com.aem.geeks.core.models.impl;
import com.aem.geeks.core.models.Demo;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

@Model(adaptables = Resource.class,adapters = Demo.class,defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class demoone implements Demo{
    @Inject
    String firstName;

    @Inject
    String lastName;

    @Inject
    Boolean developercheck;

    @Override
    public String getFirstName() {
        return firstName;
    }

    @Override
    public String getLastName() {
        return lastName;
    }

    @Override
    public Boolean getIsDeveloper()
    {
        return developercheck;
    }
}

Step 3: HTL (HTML Template language) for rendering

<h4>Employee Details</h4>

<div data-sly-use.e="com.aem.geeks.core.models.Demo"></div>
<p>${e.firstName} ${e.lastName}</p>
<p>Is he/she a developer?: ${e.isDeveloper}</p>

<!--/*  Skill Model */-->

Output:

Here the author can enter the details of the employee and select the image only from the DAM.

The component is rendered as the following:

In this I have used the basics of using the dialogs, sling model to render the simple values and using the image in the DAM (Digital Assest Management) and the checkbox. In the next blog let deep dive into the rendering of the multifield that is the skills and further we can explore more.