Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Printing multifield JSON values to components

Avatar

Level 2

I'm trying to come up for a solution where I can have a multifield of 'buttons' at the bottom of a component to have variable number of buttons. I want to make sure to use the same rendering as our button component, but I'm facing two hurdles. I know with buttons I could use a parsys, but I'm looking at this pattern for a number of little includes that wouldn't necessarily use components available to authors in an effort to make sure our authoring and templating is consistent across components

1. the multifield is returning JSON, and I don't want to have to create a JAVA model for a simple component just to parse it. To solve this, I would look at writing a javascript helper to render the multifields

2. `data-sly-resource` doesn't allow you to pass it data.

my multifield data is captured on the components under a node called 'buttons', and we already have a component

I want to do something like this:

<sly data-sly-list="buttons" data-sly-resource="${itemList.index @ resourceType='/components/button'}"/>

My team uses 6.2 right now.. I'm curious if either of the versions up to 6.4 have other ways of doing this.

9 Replies

Avatar

Level 10

When using HTL - using Sling Model and @inject annotation is a better way to work with data/JSON then trying to code a custom JS method. Then you can handle the collection in the HTL syntax, 

Avatar

Level 2

I'm not very familiar with @inject, or java in general... would this require me to have a java model for every component i want to print a multifield in, or could i add it to a base component?

I saw this code snippet online:

<div data-sly-use.multi="${'com.project.sightly.MultiField' @ json=properties.items}"> <div data-sly-repeat="${multi.values}"> <h2>${item['linkLabel']} - ${item['anchor']}</h2> </div> </div>

and will give that a try for the json. in terms of passing `properties.buttons` to a component, I may be stuck making a template that's used by both components

Avatar

Level 2

(oh i now understand from reading more carefully, that this code sample assumes the creation of a custom java class without providing it )

Avatar

Level 10

WHen using a Sling Model and reading Multifield data (that was set via a component dialog) - most of the logic is in the HTL. There is very little logic in Java. Read this Development artilce to learn how to read multifield data set in a dialog and display the data in HTL.

Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.3 Component that uses Sling Mode...

Avatar

Level 2

I find that article extremeley complicated.. trying to find out what I actually need to do in my scenario I already have a maven build and AEM set up. It looks like it's adding a property called Products to an extended Multifield class and using that instead of the coral Multifield?  That doesn't really make sense for places we're not looping through products.. in order to make this extensible would I need a java model with each possible name of a multifield?

Avatar

Level 10

A few things here:

1 - the multi field is a granite/coral resource type - the latest AEM resource types.

2-  products is the name of the multifield node in the component dialog. If you call yours foo - then make the change your code.

3 - Sling Models in the best way to handle a multi field.  To read all of the items in a multi field - you need to iterate through it so all fields in each section is displayed. If you do not loop through it - then you will not be rendering all fields in each section.

Avatar

Level 10

This is how you can render values in mult field dialog like this:

ADIA.png

To render all of the fields in each section to look like a HTML component --

ADI22.png

Avatar

Level 2

Thanks! This could work, but I'm looking for a generic solution that doesn't require a Java class change for every time i use a multifield. I may look at creating one myself and see if I can get it to work possibly in the js-use api

Avatar

Level 2

I'm not very familiar with @inject, or java in general... would this require me to have a java model for every component i want to print a multifield in, or could i add it to a base component?

I saw this code snippet online:

<div data-sly-use.multi="${'com.project.sightly.MultiField' @ json=properties.items}"> <div data-sly-repeat="${multi.values}"> <h2>${item['linkLabel']} - ${item['anchor']}</h2> </div> </div>

and will give that a try for the json. in terms of passing `properties.buttons` to a component, I may be stuck making a template that's used by both components