Everything to know about AEM Sling Model implementation

Developers are always confused whether to create sling models while creating components in Adobe Experience Manager. It is mostly regarding the creation of simple components that read authored properties from the Java Content Repository (JCR) and display them on the page. However, since HTML Template Language (HTL) can easily do this job without AEM sling models, most consider these models to add unnecessary complexities and a time consuming process as well. As development can proceed in a simple and quick manner without the implementation of sling models in AEM, it is often difficult to comprehend their necessity.

For all such developers, here is the answer; sling models are recommended for all AEM components, simple or complex. And when developers build them as per best practices, it saves development time both initially and during ongoing maintenance.

What is a sling model in Adobe Experience Manager?

Sling Models are annotation driven Java “POJO’s” (Plain Old Java Objects) that facilitate the mapping of data from the JCR to Java variables. Why to use AEM sling models? Here is the answer:

• Pluggable
• Entirely annotation driven. “Pure” POJOs.
• OOTB, support resource properties (via ValueMap), SlingBindings, OSGi services, request attributes
• Adapt multiple objects – minimal required Resource and SlingHttpServletRequest
• Support both classes and interfaces
• Easily work with other AEM sling models without changing to bundles
• Adobe Experience Manager Sling models are similar to adapter factory and nobody recognizes the difference between the sling objects

Why use Sling Models in Adobe Experience Manager?

The following are some reasons why you must create sling models in Adobe Experience Manager:

#1: JSON Support

Sling models in AEM promise the rightful delivery of content-as-a-service. Sling models allow the easy accessibility of all web content as JSON web services through the .model.json URL extension. JSON is a fundamental feature for the AEM and must be implemented in Adobe Experience Manager.

#2: The processing of images, videos and links

Most developers only assign complex values to AEM sling models whereas others are stored in HTL. However, in the long-term, it can lead to maintenance issues. For example, with HTL you can render an image via fileReference and drop it into the <img> tag. This displays the image from Digital Asset Manager (DAM), which makes the client feel that the code is correct. However, there are two issues with this.

First, the image will be rendered without browser caching. This means that when you update the image, any user that has viewed the image before will see the old version only and not the new one.

Second, the image will always be rendered without adapting to the device it is being viewed in. This means the image will suffer from styling constraints, might appear big or small to a user, ultimately disrupting website performance and user experiences.

Therefore, the only solution is to code all values in the Adobe Experience Manager sling models to prevent bugs and prevent inconsistency in how links work across different components.

#3: Assist during inheritance and override scenarios

Although HTL is a robust syntax, it is still not a complete coding language and lacks support during granular override cases through inheritance. For example, when you want to change the logic of how a component is fetched without having to overwrite the file or create a new component.

When you employ a sling model in Adobe Experience Manager, you can use components without an HTL file, which means you can inherit the components easily, copy-paste them, or make changes to it. As inheritance is common in AEM page components, with components that use HTL files and AEM sling models, the maintenance would become difficult without proper inheritance.

#4: Code consistency

When maintaining codebases, it is imperative to manage pattern consistencies so that both old and new developers can support the codebases. When choosing between sling models in AEM and accessing properties via HTL, the latter can save significant development time, which otherwise would be lost in coe navigation and bug resolution. In case you think implementing complex values via sling models and other simple values via HTL, managing content services would be a troublesome task.

#5: Highly efficient

Most developers contemplate that the difference between properties in the HTL without the complexity of sling model annotations in AEM enhances the speed of development. However, with AEM Component Generator, you can build a complete sling model with zero development indulgence.

In projects where unit test coverage is required for complex fields of sling model, the undertaking of unit tests for simple sling models in AEM will prevent the time that will be spent in mitigating the issues that arise otherwise.

How to create a Sling Model in AEM?

Let’s create a sample project in AEM & implement the sling model into it.

In this AEM Sling model example, we will create a home loan EMI calculator component in Adobe Experience Manager, so let’s get started.

Step 1: Create your AEM project with the help of below command:

mvn -B archetype:generate \
-D archetypeGroupId=com.adobe.aem \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=35 \
-D appTitle=”Home Loan Emi Calc” \
-D appId=”home-loan-website” \
-D groupId=”com.homeloan.website” \

Step 2: Now let’s create the “homeloanemicalc” component like below.