CQ5 (AEM) optionsProvider from MultiFieldPanel

README.md

CQ5 (AEM): Dialog optionsProvider to read options from MultiFieldPanel

Use Case

As an AEM Administrative User, I wish to use a dialog to define the options for a select in a different dialog.

How it works

MultiFieldPanel

The MultiFieldPanel widget, provided by ACS-Commons (since 1.5.0) is used to configure the options. Fields should be text, value, and qtip; value is required.

optionsProvider

The optionsProvider defines a small JavaScript to populate the select options from a pre-determined property location. There's a little bit of mangling to make the data usable.

Enhancement

One feature enhancement may be to use a pathfield to select the configuration property node to be targeted by the optionsProvider.

configuration_dialog_tab.xml

<?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:Panel"
    title="Options Configuration">
    <items jcr:primaryType="cq:WidgetCollection">
        <container
            jcr:primaryType="cq:Widget"
            collapsible="{Boolean}false"
            xtype="dialogfieldset">
            <items jcr:primaryType="cq:WidgetCollection">
                <options
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Select Options"
                    name="./options"
                    orderable="{Boolean}false"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <text
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Attribute Name"
                                fieldSubLabel="Option Text"
                                key="text"
                                width="250"
                                xtype="textfield"/>
                            <value
                                jcr:primaryType="cq:Widget"
                                allowBlank="{Boolean}false"
                                fieldLabel="Attribute Value"
                                fieldSubLabel="Option Value"
                                key="value"
                                width="250"
                                xtype="textfield"/>
                            <qtip
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Q-Tip"
                                fieldSubLabel="Hover Text"
                                key="qtip"
                                width="250"
                                xtype="textfield"/>
                        </items>
                    </fieldConfig>
                </options>
            </items>
        </container>
    </items>
</jcr:root>

consumer.xml

<populatedExample
    jcr:primaryType="cq:Widget"
    fieldLabel="Populated Options Example"
    fieldDescription="(uses an optionsProvider to populate options from a MultiFieldPanel)"
    name="./populatedExample"
    optionsProvider="function(){ var servletPath = '/path/to/configuration/jcr:content/options.0.json'; return JSON.parse('[' + CQ.Util.eval(servletPath).options + ']'); }"
    type="select"
    xtype="selection" />

Hi @dlh3,
Please, do you know if the optionsProvider is supposed to work inside a multifieldpanel ?
For the dialog below, the callback function set to the optionsProvider is never called.

<multiFieldTest
    jcr:primaryType="cq:Widget"
    fieldLabel="multiField Test"
    key="multiFieldTest"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="cq:Widget"
        xtype="multifieldpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <level1Select1
                jcr:primaryType="cq:Widget"
                fieldLabel="select inner"
                type="select"
                optionsProvider="function(path, record) { console.log('multifieldpanel optionsProvider'); }"
                name="selectInner"
                xtype="selection"/>
        </items>
    </fieldConfig>
</multiFieldTest>

When direct inside a multifield, as you can see below, it works just fine:

<multiFieldTest
    jcr:primaryType="cq:Widget"
    fieldLabel="multiField Test"
    key="multiFieldTest"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="cq:Widget"
        fieldLabel="select inner 2"
        type="select"
        optionsProvider="function(path, record) { console.log('multifield optionsProvider'); }"
        key="selectInner2"
        xtype="selection"/>
</multiFieldTest>

Any help would be very appreciated!
Thank you in advance!