Need help on using multifield values

[samsundar23]

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.

• 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 !

[Vijayalakshmi_S · Accepted solution]

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. 

[Kiran_Vedantam]

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.

[samsundar23]

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>