CQ5 - Dynamically populating options in selection xtype

Question

I've been banging my head for hours on this now. I'm trying to dynamically populate options in a selection xtype and can't get it to work. Here is my dialog.xml

<resourceType
            jcr:primaryType="cq:Panel"
            title="Header Type">
            <items jcr:primaryType="cq:WidgetCollection">
                <headerType
                        jcr:primaryType="cq:Widget"
                        fieldLabel="Header Type"
                        name="./headerType"
                        type="select"
                        xtype="selection">
                    <options jcr:primaryType="cq:WidgetCollection">
                        <categories
                            jcr:primaryType="cq:Widget"
                            path="/content/admin/adminView/jcr:content/header-admin-content/cats/type.infinity.json"
                            width="500"
                            xtype="cqinclude" />
                    </options>
                </headerType>
            </items>
        </resourceType>

The json that I'm producing for:

content/admin/adminView/jcr:content/header-admin-content/cats/type.infinity.json

Looks something like this:

{"jcr:primaryType":"nt:unstructured","item_1":  
{"jcr:primaryType":"nt:unstructured","text":"small","parameter":"small"},"item_2":
{"jcr:primaryType":"nt:unstructured","text":"medium","parameter":"medium"},"item_3":
{"jcr:primaryType":"nt:unstructured","text":"large","parameter":"large"},"item_4":
{"jcr:primaryType":"nt:unstructured","text":"none","parameter":"none"}} 

When I go to open the dialog nothing happens I just get a JS error TypeError: snippet.xtype is undefined

Any help is appreciated!

Answer 1

Options for the selection xtype can be set dynamically in two ways

1. setting the options property to a path that returns a JSON array of options
2. Writing a function that sets the options (using setOptions method ) and passing this function as the value for optionsProvider property.

In both the cases data returned in JSON must be an array.

To use method 1 , on the headerType node set options property to the path that will provide the JSON data. Set optionsRoot proprety to the name of the property that contains the JSON array. Set optionsTextField to the name of the property in the JSON data that should be text. Set optionsValueField to the name of the property in the JSOn data that should be the value.

A detailed tutorial on this can be found here : http://jenikya.com/blog/2013/04/dynamic-dialog-data-in-cq5.html

For method 2 refer this