How to iterate Multifield simply using HTL

Let's refer Multifield we created here, which has following fields:

Following HTML uses Sling Model to access multifield values:

<section 
data-sly-use.props="com.aemblog.core.models.MultifieldExampleSlingModel">
    <div data-sly-list.multifielditem="${props.multifieldList}">
           <p>Title: ${multifielditem.name}</p>
           <p>URL: ${multifielditem.url}</p>
    </div>
</section>

Following HTML uses Global Object resource to access multifield values:

<section 
data-sly-list.props="${resource.getChildren}">
    <div data-sly-test="${props.name == 'multifieldList'}"
    data-sly-list.multifielditem="${props.getChildren}">
           <p>Title: ${multifielditem.name}</p>
           <p>URL: ${multifielditem.url}</p>
    </div>
</section>

Using HTL for accessing Multifield values comes handy when no custom processing is required on dialog values.

That's all for today! If you've found this blog post informative or helpful, I’d greatly appreciate it if you could give it a like. It keeps me motivated 💛

☕️ Click Here to Buy me a coffee ☕️

Enjoying my ad-free blog? Support by buying me a coffee! I've kept this space ad-free, sponsoring it myself to maintain its purity. Your contribution would help keep the site afloat and ensure quality content. Thanks for being part of this ad-free community.