Sling Model and Its Implementation with Custom Component in AEM

Greetings, Developers From this blog, greetings This blog’s main goal is to expose you to the Sling Model, explain how it operates, and provide you the right explanation along with the appropriate application.

What is the AEM Sling Model?

→ Sling Models are annotation driven Java “POJO’s” (Plain Old Java Objects) Classes that facilitate the mapping of data from the JCR to Java variables.

→ The Sling Model is used to map resources or request objects.

→ They also allow us to map resource properties and inject OSGI services.

→ OOTB, support resource properties (via ValueMap), SlingBindings, OSGi services, request attributes

→ Easily work with other AEM sling models without changing to bundles

Using the @Model annotation declared on top of the class, we can transform the POJO class into a Sling model.

@Model annotation in detail:

This annotation marks the class as a Sling Model and must be present on the class.

syntax:

Attributes:

→ adaptables:
This attribute specifies the types from which this model can be adapted.

“SlingHttpServletRequest.class, Resource.class”
These two adapters are used in the sling model you can use any one or both based on your business requirements.

To adapt the sling model as a request, we wish to use the global objects that Aem exposes, such as request, pageProperty, Session, and many more. Using the SlingHttpServletRequest.class, we can satisfy this need. This allows the model to be adapted from an HTTP request.

The data are stored inside the JCR and the content are resource for adapting that data we can use Resource.class. This allows the model to be adapted directly from a JCR resource.

→ The adapters attribute specifies the interface(s) or class(es) that this model will be adapted to.

→ The resourceType attribute specifies the resource types that this model supports.

→ defaultInjectionStrategy
The defaultInjectionStrategy attribute defines how Sling Models handle injection when a value is not found. Setting it to DefaultInjectionStrategy.OPTIONAL means that if a value is not available for injection, it will be set to null instead of throwing an error. This is useful to avoid runtime exceptions when some properties are not present in the resource.

For all AEM components, regardless of complexity, sling models are advised. Additionally, it reduces development time during both original creation and continuing maintenance when developers build them following best practices.

Let`s Understand with an example:

Let’s create the component and examine how the sling model functions. take information out of the authoring dialog and give it to the markup.

We will create a new component named “modelcomponent” with the following structure.

→We will create a few authoring fields inside this component.

<?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"
    jcr:title="Properties"
    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">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <userName
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="User Name"
                        fieldDescription="Please Enter User Name"
                        name="./userName"/>
                    <designation
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="User Designation"
                        name="./designation"/> 
                    <contact
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                        fieldLabel="User Contact"
                        name="./contact"/>        
                    <assetPath
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                        fieldLabel="Asset Folder"
                        name="./assetPath"/>

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

→ For accessing these fields we need to write a sling model in Java.

note that we can access these fields with the help of sightly/htl but creating a sling model is a best practice.

→ The sling model class is named “ModelComponent.java”

package com.adobe.aem.guides.wknd.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@Model(adaptables = Resource.class)
public class ModelComponent {

    @ValueMapValue
    private String userName;

    @ValueMapValue
    private String designation;

    @ValueMapValue
    private String contact;

    @ValueMapValue
    private String assetPath;


    public String getUserName() {
       return userName;
    }

    public String getDesignation() {
        return designation;
     }

     public String getContact() {
        return contact;
     }

     public String getAssetPath() {
        return assetPath;
     }

    
}

→ Let’s get this sling model file into our Markup property values stored in an HTML file of our component.

Use ‘data-sly-use” for fetching the sling model in our markup file.

<div data-sly-use.model="com.adobe.aem.guides.wknd.core.models.ModelComponent">
    <h2> User Name: ${model.userName} </h2>
    <p>Designation: ${model.designation} </p>
    <p>Contact: ${model.contact} </p>
    <img src="${model.assetPath}" alt=""/>
</div>

→ Let`s author the component and see how the sling model works fetch data from the authoring dialog and provide to markup.

→ Once you author the component values of this authoring dialog are stored inside /content directory of CRXDE:

For injecting these properties you can use @inject or @valueMapValue annotation.
In this example, I used @valueMapValue annotation which is used to fetch properties from the JCR.

To find out more about the annotations used in sling models, you can visit this blog: https://satyamblogs.medium.com/sling-model-annotation-detailed-in-aem-4af0345d43ec

and here is the output of this component:

This is the way you can create a sling model and use based on your requirements.

Now you can understand the basics of the Sling Model and how it works.

You can visit this blog to learn more about annotations used in the Sling Model: https://satyamblogs.medium.com/sling-model-annotation-detailed-in-aem-4af0345d43ec

I hope you found this article interesting and informative. Please share it with your friends to spread the knowledge.

You can follow me for upcoming blogs follow.

Thank you!