AEM CQ 56 - Panel in CQ.form.MultiField

Goal

Create a Composite Multifield Component (CQ.form.MultiField) with panel field config to store data as json, in Classic UI. For Touch UI multifield check this post

Logic for AEM 60 and AEM 56 is same, i just didn't want to remove the link to 56 code

To store multi field values as child nodes (not json) check this post


AEM 60

Demo | Package Install


Bug Fixes

Reordering items overrides empty fields, Using CQ.form.Selection.PATH_PLACEHOLDER like $PATH/countries.options.json doesn't load options of a selection drop down in multi-field-panel - Demo | Package Install

LoadContent event does not fire on multifield items; Drag and drop to pathfield (in multifield) doesn't work; Widgets added in multifield in a tab other than the visible one, shrink; supporting allowBlank on widgets added in multifield - Demo | Package Install

AEM 56

Source code (not package install) and Demo

Prerequisites

If you are new to CQ

1) Read this post on how to create a sample page component

2) Here is another blog post on multifield fieldConfig customization

Create Component

1) Create component /apps/multifieldpanel/multifieldpanel with the following properties

2) Create clientlib /apps/multifieldpanel/multifieldpanel/clientlib of type cq:ClientLibraryFolder with the following properties

3) Create file /apps/multifieldpanel/multifieldpanel/clientlib/multipanel.js and add the following code. Here we are creating a panel extension and registering it as xtype mymultipanel

var MyClientLib = MyClientLib || {};

MyClientLib.MyMultiPanel = CQ.Ext.extend(CQ.Ext.Panel, {
    panelValue: '',

    constructor: function(config){
        config = config || {};
        MyClientLib.MyMultiPanel.superclass.constructor.call(this, config);
    },

    initComponent: function () {
        MyClientLib.MyMultiPanel.superclass.initComponent.call(this);

        this.panelValue = new CQ.Ext.form.Hidden({
            name: this.name
        });

        this.add(this.panelValue);

        var dialog = this.findParentByType('dialog');

        dialog.on('beforesubmit', function(){
            var value = this.getValue();

            if(value){
                this.panelValue.setValue(value);
            }
        },this);
    },

    getValue: function () {
        var pData = {};

        this.items.each(function(i){
            if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){
                return;
            }

            pData[i.dName] = i.getValue();
        });

        return $.isEmptyObject(pData) ? "" : JSON.stringify(pData);
    },

    setValue: function (value) {
        this.panelValue.setValue(value);

        var pData = JSON.parse(value);

        this.items.each(function(i){
            if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){
                return;
            }

            if(!pData[i.dName]){
                return;
            }

            i.setValue(pData[i.dName]);
        });
    },

    validate: function(){
        return true;
    },

    getName: function(){
        return this.name;
    }
});

CQ.Ext.reg("mymultipanel", MyClientLib.MyMultiPanel);

4) Create file /apps/multifieldpanel/multifieldpanel/clientlib/js.txt and add the following code

               multipanel.js

5) Create dialog /apps/multifieldpanel/multifieldpanel/dialog for component above with the following properties. Here,

       a) The node /apps/multifieldpanel/multifieldpanel/dialog/items/items/tab1/items/map/fieldConfig has xtype mymultipanel

       b) Each widget in the multipanel (eg. /apps/multifieldpanel/multifieldpanel/dialog/items/items/tab1/items/map/fieldConfig/items/product-year-value) should have a dName property, which is read by multi panel to store value entered by author for the field

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="Multi Field"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <tab1
                jcr:primaryType="cq:Panel"
                title="Add">
                <items jcr:primaryType="cq:WidgetCollection">
                    <map
                        jcr:primaryType="cq:Widget"
                        hideLabel="false"
                        name="./map"
                        title="Map"
                        xtype="multifield">
                        <fieldConfig
                            jcr:primaryType="cq:Widget"
                            border="true"
                            hideLabel="true"
                            layout="form"
                            padding="10px"
                            width="1000"
                            xtype="mymultipanel">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <product-year-value
                                    jcr:primaryType="cq:Widget"
                                    dName="year"
                                    fieldLabel="Year"
                                    width="60"
                                    xtype="textfield"/>
                                <product-price-value
                                    jcr:primaryType="cq:Widget"
                                    dName="price"
                                    fieldLabel="Price"
                                    width="60"
                                    xtype="textfield"/>
                                <product-version-value
                                    jcr:primaryType="cq:Widget"
                                    dName="version"
                                    fieldLabel="Path to Version"
                                    xtype="pathfield"/>
                                <product-lowStock-value
                                    jcr:primaryType="cq:Widget"
                                    dName="lowStock"
                                    fieldLabel="Low Stock ?"
                                    width="25"
                                    xtype="checkbox"/>
                            </items>
                        </fieldConfig>
                    </map>
                </items>
            </tab1>
        </items>
    </items>
</jcr:root>

6) Add the following code in /apps/multifieldpanel/multifieldpanel/multifieldpanel.jsp

<%@ page import="org.apache.sling.commons.json.JSONObject" %>
<%@ page import="java.io.PrintWriter" %>
<%@include file="/libs/foundation/global.jsp" %>
<%@page session="false" %>

<div style="display: block; border-style: solid; border-width: 1px; margin: 10px; padding: 10px">
    <b>Multi Field Sample</b>

    <%
        try {
            Property property = null;

            if(currentNode.hasProperty("map")){
                property = currentNode.getProperty("map");
            }

            if (property != null) {
                JSONObject obj = null;
                Value[] values = null;

                if(property.isMultiple()){
                    values = property.getValues();
                }else{
                    values = new Value[1];
                    values[0] = property.getValue();
                }

                for (Value val : values) {
                    obj = new JSONObject(val.getString());
    %>
                        Year : <b><%= obj.get("year") %></b>,
                        Price : <b><%= obj.get("price") %></b>,
                        Version : <b><%= obj.get("version")%></b>,
                        Low Stock : <b><%=obj.get("lowStock")%></b>
    <%
                }
            } else {
    %>
                Add values in dialog
    <%
            }
        } catch (Exception e) {
            e.printStackTrace(new PrintWriter(out));
        }
    %>

</div>