Vadim Badea
Vadim Badea

Reputation: 449

CQ5 nested multi-field with select option

I will need to add the values that editor writes them in textfield from dialog panel into a <select> option. I have created the multi-field option for the dialog component, but not sure how I should get values in the <select> it self.

I'm using the JS widget for multi-field, you can find it here. I know that the multi-field JS should return a JSON array of options, how do I achieve this in my case?

Here's my XML markup:

<developer
    jcr:primaryType="cq:Widget"
    title="Data"
    xtype="panel">
    <items jcr:primaryType="cq:WidgetCollection">
        <developer
            jcr:primaryType="cq:Widget"
            fieldDescription="Click the '+' to add a new data"
            fieldLabel="Dev Data"
            name="./devdata"
            xtype="multifield">
            <fieldConfig
                jcr:primaryType="cq:Widget"
                xtype="devprofile"/>
        </developer>
    </items>
</developer>

JavaScript that is adding the textfield for multi-field

this.developerName = new CQ.Ext.form.TextField({
    fieldLabel : "Developer's Name",
    allowBlank: true,
    width : 400,
    listeners : {
        change : {
            scope : this,
            fn : this.updateHidden
        },
        dialogclose : {
            scope : this,
            fn : this.updateHidden
        }
    }
});
this.add(this.developerName);

And the markup:

<c:if test="${not(empty(developerName))}">
    <select id="use-names" class="js-example-basic-multiple">
        <option>Example</option>
        <option>${developerName}</option>
    </select>
</c:if>

Please let me know if you need more detailed shared.

Upvotes: 0

Views: 1315

Answers (1)

Vivek Sachdeva
Vivek Sachdeva

Reputation: 149

ACS commons has pretty good working example of custom multifield. Take a look at https://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html

Just replace textarea with your dropdown and you will have what you need..

Upvotes: 1

Related Questions