Hello,
That's a very interesting question! 😁 It actually inspired me to write a tutorial on nested Multifields. It is pending publication for the moment, but I'll add it as a comment later when it's out.
However this question goes a bit beyond what's in the tutorial so let me explain.
To access properties from the design dialog, you will need a Sling Model, like this one. Here is the interface:
import org.apache.sling.api.resource.Resource;
public interface DemoModel {
Resource getPolicy();
}And here is the implementation:
import com.day.cq.wcm.api.designer.Style;
import lombok.Getter;
import lombok.extern.slf4j.Slf4j;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ScriptVariable;
import org.apache.sling.models.annotations.injectorspecific.Self;
import javax.annotation.PostConstruct;
@Model(
adaptables = SlingHttpServletRequest.class,
adapters = DemoModel.class
)
@Slf4j
public class DemoModelImpl implements DemoModel {
@ScriptVariable
private Style currentStyle;
@1961677
private SlingHttpServletRequest request;
@14766979
private Resource policy;
@PostConstruct
protected void init() {
policy = request.getResourceResolver().getResource(currentStyle.getPath());
if (policy == null) {
log.error("Could not find policy");
return;
}
}
}Take a look at the important parts:
1. The @ScriptVariable private Style currentStyle line injects the component's design dialog properties. However in the case of a multifield, you will first need to convert currentStyle into the specific policy node, as I do in the init() method.
The policy Resource then represents the policy node in the JCR. For me its this one:
2. Now that we have the policy resource, we expose it for use in HTL using the getPolicy() method (see interface and @14766979)
Now we can simply access the policy node and iterate over the nested multifield using HTL as you can see below:
<sly data-sly-use.model="com.theopendle.core.models.demo.DemoModel">
<!--/* Get all child resources */-->
<div data-sly-list.continentMultifield="${model.policy.getChildren}">
<div data-sly-test="${continentMultifield.name == 'continents'}">
<p>Continents</p>
<ul data-sly-list.continent="${continentMultifield.getChildren}">
<li>Name: ${continent.continentName}</li>
<li>Countries:
<!--/* Get all child resources */-->
<div data-sly-list.countryMultifield="${continent.getChildren}">
<!--/* Keep only the countries multifield and iterate over its children */-->
<ul data-sly-test="${countryMultifield.name == 'countries'}"
data-sly-list.country="${countryMultifield.getChildren}">
<li>Name: ${country.countryName}</li>
<li>Code: ${country.code}</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</sly> Here is the result:
Hope that helped 👍