Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Need help on using multifield values

Avatar

Level 4

I'm using AEM 6.5.10, I have a multifield as below;

I should be using the values authored from 1st multifield(Action Type, Behavior, Label, Value, Feedback, Action Parameters) in a anchor<a> tag.

I should be using the values authored from 2nd multifield(Action Type, Behavior, Label, Value, Feedback, Action Parameters) in a <button> tag.

samsundar23_0-1637255224446.png

 

  • First multifield should be used in <a>tag as below;

<a class="buttonyellow btnborder" href="#" action-value="${actionParameters.value}">
${actions.label}
</a>

 

  • Second multifield should be using in button tag as below

<button class="secondary" href="#" action-value="${actionParameters.value}">
${actions.label}
</button>

 

Can someone help me with the sightly code which could render me the desired result.

Any immediate response will be very much helpful.

 

Thanks !

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @samsundar23 

You can use the below snippet for first and second item.

If you are using index, it starts from 0 and for count, it starts from 1. Full list of supported variables as part of list is available here - https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html#list

<div data-sly-list.multiItems="${obj.outerMulti}">
	<a data-sly-test="${multiItemsList.first}" class="${multiItems.textField}">${multiItems.label}</a>
    <button data-sly-test="${multiItemsList.index == 1}" class="${multiItems.textField}">${multiItems.label}</button>
</div>

where outerMulti is the multifield resource (@ChildResource annotation and exposed as List<Resource>)

Before doing so, please consider scenario like 

  • what if content author adds 3rd item
    • Is it controlled via max validation as 2 items
    • If it is not, how you would want the markup to be. 

Based on the answer to the above, approach needs to be amended accordingly. 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @samsundar23 

You can use the below snippet for first and second item.

If you are using index, it starts from 0 and for count, it starts from 1. Full list of supported variables as part of list is available here - https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html#list

<div data-sly-list.multiItems="${obj.outerMulti}">
	<a data-sly-test="${multiItemsList.first}" class="${multiItems.textField}">${multiItems.label}</a>
    <button data-sly-test="${multiItemsList.index == 1}" class="${multiItems.textField}">${multiItems.label}</button>
</div>

where outerMulti is the multifield resource (@ChildResource annotation and exposed as List<Resource>)

Before doing so, please consider scenario like 

  • what if content author adds 3rd item
    • Is it controlled via max validation as 2 items
    • If it is not, how you would want the markup to be. 

Based on the answer to the above, approach needs to be amended accordingly. 

Avatar

Community Advisor

Hi @samsundar23 

 

Multi fields are complicated. Please check my blog to get more info on implementing them https://allaembykiran.wordpress.com/2021/01/13/nested-multi-field/

 

Hope this helps!

 

Thanks,

Kiran Vedantam.

Avatar

Level 4

Thanks for your worthful suggestions - @Vijayalakshmi_S  and @Kiran_Vedantam 

The below code snippet worked for me 🙂

 

<sly data-sly-test="${handler.actions}" && data-sly-list.actions="${handler.actions}">
	<span data-sly-test="${actions.actionParameters}" && data-sly-list.actionParameters="${actions.actionParameters}">
		<sly data-sly-test="${actionsList.count==1}">
			<a class="buttonyellow btnborder" href="#" action-value="${actionParameters.value}">
				${actions.label}
			</a>
		</sly>
		<sly data-sly-test="${actionsList.count==2}">
			<button class="secondary" href="#" action-value="${actionParameters.value}">
				${actions.label}
			</button>
		</sly>
	</span>
</sly>