Building custom list collection component using Sling Models

In this article, I am going to explain how to use sling models in AEM ?  the people who are working on AEM they know that how many lines of code they need to write to read a authoring dialog value in the Java class, but if we go with Sling Models we can avoid so many things, the Sling models are just pojo’s which are mapped automatically with sling object’s such as resources, requests and the sling models allows us to access these resource values directly in the Java class

Let us take a simple List Collection component example, the list collection component is a collection of links, each link has title, url, target and screen reader text something like below, usually the content author enter more than 3 or 4 links by using authoring dialog  “add field” option

dialog

Once the content author completed his job, if you see the repository structure the content is stored something like below,  under the page node  every link has created as a separate node and added author entered values as a properties

content-hierarchy

If you want to read these values with out sling models then you need to perform below steps which is a time consuming and you need to write lot of logic

  • First you need to find out the staticList node
  • Iterate all child nodes
  • Read property’s of every node
  • Create a custom bean
  • build a custom list collection using bean

Sling Models :

I am going to explain you how the sling models can help us for this List component, the sling models helps you write less code and achieve more, first what we need to do is create a separate model class for all link properties something like below

You must add @Model annotation to the Link so that it will become adaptable class, to read the property value we need to add @Inject annotation

Let me explain about annotation’s which we have used

  • @Named -> If the property name is does not match exactly with field name then we can use @Named annotation
  • @Optional -> By default all @Injected fields are assumed to be required, if you want to make this optional
    then add @Optional annotation
  • @Default -> if you want to add default values to the properties then use this annotation @Default(values
    =”sling models”)
  • @PostConstruct -> If you want to execute some logic once all Injections are completed then you can use
    this annotation
  • @Inject -> you can use Inject to inject another sling model or Resource or OSGI Service or collections

If you see our content structure the staticList node is root node for all links, to get this resource object first we need to add @Inject and @Named annotation so that the staticList Resource will be looked up from current resource

Once we have linksResource object then iterate it and adapt every resource object to the link model and finally return the Link array, this is very simple we are not doing any kind of property reading logic out here, all we are doing here is just iterate and adapt to Link model

Update POM.xml

We must update the pom.xml file by adding below entries

 

Using sightly to render output :

The below sightly code iterate every element in the array and build the link collection

Build the project and deploy code then configure some links and check in preview mode, the output should render something like below

sling models

  • Swapna

    Thanks for the detailed explanation.

    • keysandstrokes

      Thanks Swapna

  • Prince Shivhare

    Where to add in POM file and which POM file (Core or Project POM).
    and in POM file .. where we can add it?

  • sahaya michael vino

    Best article for sling model.