We'll be using OOTB coral multifield provided by AEM 6.3 for storing multifield values as child nodes (NODE STORE): granite/ui/components/coral/foundation/form/multifield, and we'll retrieve the authored multifield values in our sightly code by using JS Use-API (To retrieve values via WCMUsePojo API, refer this post here).
The advantage of using JS Use-API here is you can get the node of multifield values stored in pages and pass it to the sightly code in few lines of code as compared to more lines of code when using JAVA for this.
Also, you won't need to use acs-commons package or any other custom multifield here for storing composite multifield values.
To make the multi-fields collapsible we'll be using the foundation layout type inside the container as granite/ui/components/foundation/layouts/collapsible, thus we would not need to write customization code in clientlibs for this.
The touch ui dialog structure is shown below:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Blog Component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="https://www.adobe.com/go/aem6_3_docs_component_en#Image - HTL">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<multi
jcr:primaryType="nt:unstructured"
jcr:title="Multi"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldenter
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Composite Multifield">
<field
jcr:primaryType="nt:unstructured"
jcr:title="Click to Expand"
sling:resourceType="granite/ui/components/foundation/container"
fieldLabel="Products Container"
name="./products">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
<items
jcr:primaryType="nt:unstructured">
<multitext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Multi Text"
name="multitext"/>
<multinum
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
fieldLabel="Multi Num"
name="multinum"/>
<multicheck
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
name="multicheck"
text="Multi Check"
value="{Boolean}true"/>
</items>
</field>
</fieldenter>
</items>
</column>
</items>
</multi>
</items>
</content>
</jcr:root>
The multifield values stored in the page is stored as child nodes as shown below:
You can use below JS Use code (blog.js) to fetch the node and pass to sightly:
"use strict";
use(function() {
var resourceResolver = resource.getResourceResolver();
return {
node : resourceResolver.getResource(currentNode.getPath() + "/products"),
};
});
<div data-sly-use.blog="blog.js">
<h4>Composite Multifield Values: </h4>
<ol data-sly-list.product="${blog.node.listChildren}">
<li>
${product.multitext} has ${product.multinum} with boolean
${product.multicheck}
</li>
</ol>
</div>
No comments:
Post a Comment
If you have any doubts or questions, please let us know.