AEM Tutorial #10 | Sling Model #1 | Create Component with Sling Model in AEM 6.5

Create component using sling model in AEM 6.5. Sling model written using Resource adaptables and @Model, @Inject and @Default annotations.
Git Repo : github.com/aem...

[@priyankamalviya3613]

This is such an amazing explanation of sling models- thank you so much !!

[@AEMGeeks]

Thank you Priyanka, I am glad you liked tutorials.

[@naveena6992]

tq so much for giving good explanation and it is very easy to understand .

[@AEMGeeks]

Thanks Naveen A

[@Art-ub1sg]

Thank you so much, I’m just starting to learn and you explain and show very clearly.

[@AEMGeeks]

Thanks Mike😊

[@venkateswarlumummadi5478]

Very good explanation sir. Thank you

[@AEMGeeks]

Thanks venkateswarlu mummadi 🙏, Keep watching

[@keerthikeerthi8162]

what's the difference between @inject and @valueMapValue ?

[@reddhari9245]

Excellent reaching 👌👌

[@AEMGeeks]

Thanks🙏 Redd Hari

[@nithyamurugan9040]

Such a clear explanation 😊thanks

[@AEMGeeks]

Thank You !

[@vinuthah2993]

Hi AEM Geeks, Could you please help me with the front end author component structure that u created? where can i find the details to all nodes of author component that you created within in ur repo link? I was trying to create similar component

[@AEMGeeks]

You will find all component here. github.com/aemgeeks1212/aemgeeks/tree/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks/components/content

[@vinuthah2993]

@@AEMGeeks Thanks this is really great.

[@RandyKrakowski]

Did anyone else notice that their local instance does not have Create> New Component when you right click? But my PROD instance does? That's seems backward to me. Is there a way to activate it for my local instance of CRXDE?

[@AEMGeeks]

Your local instance should has crx/de and new component options. If you are using custom project, that project may have some configuration to disable it. Please try to install local aem again with author run mode. Don't add any other runmode.

[@KeerthiK-rh7yx]

Can u do a video on detail explanation of how annotation map to component dialog properties? That will be really more helpful in understanding underlying mechanism of models

[@the.bearded.guy.abhishek]

Thanks a lot. I used IntelliJ IDE but we can't write crx/de code in IntelliJ, like we can in Eclipse IDE. Could you please make a video on setting up the project in Eclipse. I always face errors after importing my project in Eclipse. Thanks in advance!

[@AEMGeeks]

You can write code in Intellij and also sync with AEM. I am using it for long back. Np, I will create tutorial for Eclipse and VS code.

[@nitishkennedy3052]

Hi, you've mentioned in 9:40 that there are others also. Can you elaborate? Pls

[@AEMGeeks]

I did explain in next tutorials. Please have a look.

[@dipamdutta496]

Please show how you created the cq:dialog part . Did you copied from some existing components ? or created the whole structure

[@AEMGeeks]

You can copy based structure from other component. Then modify/add as per your need. This is Sling Model tutorial. Did not explain dialog. Soon will have tutorials related to dialogs

[@prashanthpalakurthi8439]

which pluggin are you using for automtic imports ? im using community edition, can you pls suggest pluggin for automatic imports ?

[@AEMGeeks]

I am using adobe repo. Please check tutorial #3 of this same series. I explain this for MAC but it same for Windows as well. Please go through comments as well. Window users facing some problems, I explained solutions in comments

[@prashanthpalakurthi8439]

@@AEMGeeks i have installed and packages are getting synced correctly. Problem is while writting JAVA code , it is not importing packages automatically as n when i type some annotations.

[@adityasrivastava9531]

Hi I have a quesion, While writing the java interface and class for a component, is it necessary to import your project in ide and then create the java files in that folder structure, or even without importing my aem project, I can just create a new project in eclipse and work? How does this handshake happen?

[@AEMGeeks]

Any IDE is not mandatory. You add files in notepad or in any other text editor. But make sure your project should be maven type project as suggested by AEM. Maven is build tool for AEM Projects. to build project, you can simply run mvn clean install at parent folder to build and then manually install to AEM. IDE just make you development life easy.

[@SimranKaur-ls4xk]

@@AEMGeeks Aditya, in my opinion has the same query that I have. I was observing the file location as well, for AuthorImpl.java and Author.java The question is, the location is already created during maven project build or do we need to manually add package com.aem.geeks.core, filters, listeners, impl. and then under impl, we added our java classes.

[@arunidiculla5622]

Great explanation,

[@AEMGeeks]

Thank you! keep learning

[@sreenathgadipally]

You have given author.firstName for accessing the value. Here firstName is not matching with model variable nor method name. How its takes internally and work.please explain

[@AEMGeeks]

sreenath gadipally, I have already explained this in one of the previous tutorial. But I don't remember now in which tutorial I explained. So let me explain for you. 1. If you want any data in sightly from back end from sling model or WCMUse class. You have to return using getter methods. 2. Getter methods name can start with get or is. If you are returning any value(anything) you can use get. If you return boolean, you can have method starting with is. These are standard but not mandatory. 3. Now in sightly, remove get or is and make first character lowercase after get. ex. if your getter method name is getAuthorName then in sightly you should write object.authorName to print value return from getter. Please let me know if you have any question.

[@sreenathgadipally]

@@AEMGeeks thank you bro. Thanks for the explanation.

[@AEMGeeks]

you are always welcome sreenath gadipally.

[@harshithamohan5060]

The package mentioned in the description , not able to upload it in AEM Zip File is not a content package. Missing 'jcr_root'. Can you please share the correct link of the packege

[@AEMGeeks]

Hi Harshitha, i did not share any package. I shared git repo link which contains code. Download that repo and unzip. run 'mvn clean install' command to build. Go to all module(folder all), you will find build package there after build. Deploy that package in your AEM instance. That package will contain everything. Hope this will help.

[@harshithamohan5060]

@@AEMGeeks Ya thank you so much that helped , I was not much aware of the step after build , now i can see the package in AEM

[@utkarshsingh7829]

Hi I am using AEM6.5. "Using map" part is not working for me. Any clue?

[@AEMGeeks]

It should work. It is just java. Please check logs for any error. You can get demo code from my git repo. Just build at your local and install to your AEM. You will complete demo code in local AEM instance.

[@prashanthchary9939]

Can you please tell me exact use of “adapters “ property in side @Model().

[@AEMGeeks]

Will explain

[@prashanthchary9939]

@@AEMGeeks thank you a lot 😊 I am waiting for it ..

[@swethareddybasani4093]

Hi First of all very good explanation. Can you please tell me why @postconstruct and @predestroy and few other annotations are not coming up in eclipse ? Please reply as early as possible Thanks in advance

[@AEMGeeks]

Check your project is a proper maven project and imported properly. Import as maven project.

[@swethareddybasani4093]

@@AEMGeeks thanks a lot

[@swethareddybasani4093]

@@AEMGeeks I have imported maven project only but still annotations are not working.... should I add dependency in pom.xml file?

[@raghuv5262]

What is the difference between container and fixedcolumns

[@AEMGeeks]

These are the OOTB components. Please check documentation for more details. Fixedcolumn is layout as well for component dialog.

[@sudhirkaushik4733]

Very nice bro 👍

[@AEMGeeks]

Thanks Doctor👀

[@narnilikhith8961]

Instead of Intellij I am using eclipse but code in eclipse what I am write is correct and written in html is also correct but I am unable author the dialog fields in page level ,what I should do??

[@AEMGeeks]

IDE will not make any difference. you can use any IDE eclipse or Intellij. Please check if you are getting any error in browser console or AEM logs. Are you using demo code provided or writing your own.

[@narnilikhith8961]

@@AEMGeeks using demo code only, but my issue is clear what iam asked Tq for replying to me

[@ramyavijayasankar2320]

hi, what if we want to use list component with sling model. That is to display child pages using list component

[@AEMGeeks]

Yes, you can use.

[@shaliniraghuvanshi7282]

@aemgeeks I want to know When to use sling models / services/ servlets

[@AEMGeeks]

Sling Model - you should always sling model for component backend. Sling model is only solution if you are using SPA(Single Page Application) or content exporter. Services - You write services for reuse/plugable functionality. Suppose you want to reuse some function, you can write in service. you can call this service any backend component. Servlet - When you want to call over http or ajax etc. These are basic use cases. There are other use cases as well.

[@shaliniraghuvanshi7282]

@@AEMGeeks Thanks for your reply

[@ridamnagar8918]

Why are you using Author interface instead of AuthorImpl in sightly?

[@AEMGeeks]

This is just java. use interface.

[@shaliniraghuvanshi7282]

How can we adapt sling model for a specific resource?

[@AEMGeeks]

Inside @Model(), you can use adaptables to adapt Sling Model to a particular type. Is this something you are looking or your question is about something else

[@shaliniraghuvanshi7282]

@@AEMGeeks if we use @Model(adaptable = resource) it means it can be adapt to any resource but if we want it adapt to one particular type of resource then how we can achieve it?

[@AEMGeeks]

What do you mean by one particular type of resource. I really don't understand what are you looking for. Let me explain one more concept about Sling Model. I think this will help. Let say you have one node/resource and it have some properties. Lets assume it is not component. It can be of any type lets asume "nt:unstructured". Now how will you get properties of this node/resource. In normal way , you will get this resource/node and will get property using either node or sling resource api. But you can Sling Model as well to get properties. 1. Create a Sling Model (Not mandatory to create interface). 2. Have Inject all properties in Sling Model. Create getter methods as we are doing for normal Sling Model Used for components. 3. Now get that resource and adaptTo this model. GeeksModel gm=resource.adaptTo(GeeksModel.class) 4. Now use this instance gm to get properties using getter methods. I hope this something you are looking. Let me know.

[@kumarvijayag]

why did you skip the creation of the sightly file? how could beginners follow the tutorial when skipped something 07:29

[@AEMGeeks]

This tutorial about Sling Model. In this and next 2 tutorials, I did explain about Sling Model. Can't explain everything in one tutorials. You can folloe sightly series to understand sightly/HTL. As I mention many time, Except Beginner series/playlist, all tutorial need some basic knowledge of AEM development. If you are an absolute beginner, you can start with beginner series/playlist.

[@kowsalyabalachander3312]

Im getting the error- Error during include the component (Error message - cannot get DefaultSlingScript) , while including the component

[@AEMGeeks]

It might be problem with code. You can take code from git repo. Build and install at your local. Keep in mind, you have to create pages/content. github.com/aemgeeks1212/aemgeeks

[@dipamdutta496]

did you resolve the problem?

[@DylanMcCurry]

Where is "Create > New Component" in CRXDE? I am running the latest 6.5.x quickstart and cannot find it anywhere :( ... the only option is to create a new Node

[@AEMGeeks]

What is the exect version, means if you have any service pack. may be possible AEM removed that option. But I can confim once I know your version.

[@dipamdutta496]

Cannot get DefaultSlingScrpit exception is coming

[@AEMGeeks]

check bundles are active or not. If all bundles are active including your project bundle. Then check for any error in logs.

[@shaliniraghuvanshi7282]

How to restrict a component to add (drag &drop) only twice per page

[@AEMGeeks]

This is not available out of the box. We have to write some customized feature

[@shaliniraghuvanshi7282]

@@AEMGeeks can you please guide me for this

[@AEMGeeks]

@@shaliniraghuvanshi7282 Will try to suggest something. Please give me some time. I am occupied with some priority tasks these days. But surely I will help.

[@priyankamalviya3613]

Please share your knowledge with us :)

[@AEMGeeks]

I will keep sharing tutorials. Currently I am running series for basic topics for AEM developers. If you need anything specific, please let me know.

[@priyankamalviya3613]

@@AEMGeeks thanks 🙏🏻, I want to learn how to set up the MVC architecture in aem - need to create controller to get data from model and do something with it, then pass the result back to another model , which sends it to view. Also, use a config to to pass hard coded content into controller so essentially have that controller config connection too

[@AEMGeeks]

Priyanka, AEM itself provide MVC kind of architecture. Create a service, which can be call from models. This service can return processed result to model and model can pass to sightly(view). Use OSGI Configuration to store/pass hard coded values. You can have environment (dev/QA/Stage/Prod/author/publish) specific separate hard coded values for same service. I can try to give you solution, If you can share exact problem statement.

[@priyankamalviya3613]

@@AEMGeeks A model pulls a valuemapvalue from dialog - I need that data into my controller. I have created a controller but it’s not establishing connection with my model, so I am unable to use the model data into my controller for manipulation.

[@AEMGeeks]

I did not understand the meaning of controller here. Are you using some third party like angular js or Java class. Are you writing controller outside AEM. Please provide some more information.

[@shreedevimalali4479]

Hi make a video on sightly annotations, it will be more helpful thanks

[@AEMGeeks]

Shreedevi Malali, What are sightly annotations. Could you please explain a bit.

[@tranthanhien861]

Can you please share to me AEM library. I really want to use it to research in education. Thanks a lot.

[@AEMGeeks]

Hi Trần Thanh Điền, Are you looking for code or AEM application. If you are looking for code, The code used for this series/tutorial is avaialble in below hit hub repo. you can download from git repo. github.com/aemgeeks1212/aemgeeks

[@tranthanhien861]

@@AEMGeeks Thanks for answering me but I just need the AEM library + license to start server. I am researching about them.

[@AEMGeeks]

Trần Thanh Điền, AEM license is client specific. I won't be able to share any license with you. I can help you to get something for demo or learning. please reach out to me at [e-mail]

[@vemulavenkatesh5991]

@@AEMGeeks Does this repo contains all of your tutorials code base..?

[@AEMGeeks]

Yes Vemula Venkatesh, It has complete code, what I explain in demos. Please let me know if you do not find anything. I will upload updated code.

[@rajkumarkanamarlapudi8266]

Dear Trainer, I encountered with two interview questions yesterday. 1.In a website(both web, mobile) A component which can accommodate in web URL but not in mobile. Name that component.? 2.How component can be rendered in a page and mobile equally. though the sizes of the screens are different from each other. Please let me know I tried here and there to get answer but NO luck I couldn't sort out exact answer.

[@AEMGeeks]

Brother, I don't think first question is a proper interview question. About what components he is talking. About core components or other custom components. He might be talking reference of his own project. He should ask you, how to implement this feature/component. 2. This can be done easily by java script or CSS. I always say, don't take interviews/questions much seriously. Anyone can fail interview. I have failed many time. Don't consider, interview questions are always correct and the person talking interview has more knowledge then you.

[@davidlatty]

deprecated way to create components. The "component" object no longer exists in crxde. where is the updated example?

[@PauloItaliano]

Very funny. How did you create that first name/last name/checkbox dialogs? Why was this creation skipped? Don't understand at all. But why do you need interface and not just simply java bean class? What makes you do it? Nothing is explained.

[@AEMGeeks]

PauloItaliano, This tutorial is to explain Sling Model. Creating dialog is not part of this tutorial. Can't explain everything in one tutorial. Yes you can write a simple class. But there is standard and recommended way of code. When you write AEM backend code, you will understand the use of interface. This tutorial is for people whom have some knowledge of AEM development.

[@dipamdutta496]

@@AEMGeeks where we can find the dialog part. That will help a lot

[@keerthikeerthi8162]

@@dipamdutta496 you can get xml's structure of dialogue from google 's or clone aem geek's repo

[@andycharron1569]

Thx for this When I tried using adaptables=Resource.class for @Model and then @Inject for the class props, the model didn't register with AEM (absent under console); but when I changed adaptables to SlingHttpServletRequest and the prop annotations to @ValueMapValue, then it registered and the model worked. Why is that? Also, I noticed in your code repo you changed the adaptables for AuthorImpl to SlingHttpServletRequest; why is that?

[@AEMGeeks]

Yes, You are correct. Initially I explain Sling model using adaptables=Resource.class and later with SlingHttpServletRequest. So final code has SlingHttpServletRequest. You are changing adaptables to Resource.class in existing Sling Model. You will get error or Sling Model will not register because, There are some object injacted which you can't inject in Resource but can inject with SlingHttpServletRequest. If you remove those objects, your Sling Model register with adaptable= Resource.class. Please check Sling Model documentation for more information. I will be happy to answer of you have any specific question.

[@prashanthisrinivas834]

Thanks for this😊

[@AEMGeeks]

Thanks prashanthi srinivas , Please explore for more tutorials. There are many tutorials available on different topics. Please explore different playlists.

[@Cricketview21]

How can I connect with you?

[@AEMGeeks]

[e-mail]

[@tariquekhan9380]

Sir, This video is really very useful but If you create a series where you will teach us how to create different types of components. Also If you explain each steps how to creating dialogs will help us more because dialogs creation steps are missing for this component in this video. But sir overall very useful tutorial you are providing.

[@AEMGeeks]

Thanks Tarique Khan, This tutorial is to explain Sling Model. The purpose was to explain sling model. I will create tutorials to explain component creation. I am plaining to create a series for absolute beginner.

[@Ravi_vlogsTech]

Hi sir ,Thank s for Your Valuable time share i want some custom workflows design PPTs please can you explain sir Please help me sir.....

[@AEMGeeks]

Ravi Kumar, If you are looking for workflow tutorials. You will get soon. Are you looking for design ppt ?

[@SaiGanesh-fl3ov]

thank you ,

[@AEMGeeks]

You are welcome! Sai Ganesh

[@pallavipummy4344]

Can you please tell me exact use of “adapters “ property in side @Model().