Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
SOLVED

How to show multi field images in java model

Avatar

Level 3

I have a requirement to build a website where i can add more and more images using multifield. How will the java model of this feature look like?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

If you're looking to create a website where you can add a bunch of images using a multifield, you're on the right track! In the Java model (Sling Model) part, we use the @ChildResource annotation to map a child node named "links" to a List of Resource objects. This sets the stage for creating a multifield.

 

Now, in the Sightly template, we're using the data-sly-list directive to loop through each item in the "links" List. Inside the loop, we access the properties of each link Resource to display things like the link path, target, and label. It's a neat way to handle multifields and makes it super easy for authors to add and manage multiple link items.

Feel free to give it a try, and if you have more questions or need clarification, just let me know!

I created a blog where you can use a simple Sling Model and sightly to iterate each item to build your frontend experience as you wish, check it out here. https://sourcedcode.com/blog/aem/granite-ui-multifield-sightly-traverse-iterate-simple-example

View solution in original post

2 Replies

Avatar

Community Advisor

Hello @vineetham123 

 

Please refer to the Carousal component 

Component details:

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/caro...

GitHub: https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc... 

One can add and display multiple Images via this component


Aanchal Sikka

Avatar

Correct answer by
Community Advisor

If you're looking to create a website where you can add a bunch of images using a multifield, you're on the right track! In the Java model (Sling Model) part, we use the @ChildResource annotation to map a child node named "links" to a List of Resource objects. This sets the stage for creating a multifield.

 

Now, in the Sightly template, we're using the data-sly-list directive to loop through each item in the "links" List. Inside the loop, we access the properties of each link Resource to display things like the link path, target, and label. It's a neat way to handle multifields and makes it super easy for authors to add and manage multiple link items.

Feel free to give it a try, and if you have more questions or need clarification, just let me know!

I created a blog where you can use a simple Sling Model and sightly to iterate each item to build your frontend experience as you wish, check it out here. https://sourcedcode.com/blog/aem/granite-ui-multifield-sightly-traverse-iterate-simple-example