Sling mapping between component and sling model | Community
Skip to main content
manikanthar1295
manikanthar1295
Level 5
May 10, 2021
Solved

Sling mapping between component and sling model

  • May 10, 2021
  • 2 replies
  • 1852 views

Hi,

 

how  sling mapping works for UI  component and java class

for example  there is Product component  and respective Sling model is ProductModel in we.retail code.

 

How Product component will  identify ProductModel.java as sling model class on what basis it will identy.

 

can any one  explain

let me know if any information is neeed

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ritesh_Mittal

Hi @manikanthar1295 ,

 

Sling models are nothing but POJO, which includes getters of the properties. Now to have the mapping between your HTML code (which is nothing but the component html/HTL), we can use data-sly-use API, like below

<div data-sly-use.nav="org.example.NavigationModel">${nav.foo}</div>

Here 'nav' is the object carrying all properties defined in Sling Model and NavigationModel is Sling Model. so NavigationModel.java will have a setter called getFoo() which you can access by ${nav.foo}.

 

Above explanation holds true for non SPA arch type projects, For SPA project you can skip referencing Sling Model inside HTL, the mapping has been specified in React component JS, like below

MapTo('my-react-app/components/content/aem-image')(ReactImage, ImageEditConfig);

were Sling model written for 'my-react-app/components/content/aem-image' resource type will get all the properties injected by react component.


You can refer this video  Sling Model

2 replies

Bhuwan_B
Community Advisor
Bhuwan_BCommunity Advisor
Community Advisor
May 10, 2021

Please check below article to have clarity of Sling Model:

https://aem.redquark.org/2018/10/day-10-getting-to-know-sling-models.html

 

    Ritesh_Mittal
    Community Advisor and Adobe Champion
    Ritesh_MittalCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    May 10, 2021

    Hi @manikanthar1295 ,

     

    Sling models are nothing but POJO, which includes getters of the properties. Now to have the mapping between your HTML code (which is nothing but the component html/HTL), we can use data-sly-use API, like below

    <div data-sly-use.nav="org.example.NavigationModel">${nav.foo}</div>

    Here 'nav' is the object carrying all properties defined in Sling Model and NavigationModel is Sling Model. so NavigationModel.java will have a setter called getFoo() which you can access by ${nav.foo}.

     

    Above explanation holds true for non SPA arch type projects, For SPA project you can skip referencing Sling Model inside HTL, the mapping has been specified in React component JS, like below

    MapTo('my-react-app/components/content/aem-image')(ReactImage, ImageEditConfig);

    were Sling model written for 'my-react-app/components/content/aem-image' resource type will get all the properties injected by react component.


    You can refer this video  Sling Model

      Terms & ConditionsAccessibility statement

      Loading footer...