How to add a dropdown list with page list in CQ5?

Question

I have the following code base to share with you guys to list the pages that fetch using the query builder via AJAX call. We have to pass the URL and the parameters to fetch the child pages from the URL that we provide.

I have put some console.log to track the values of each states. replace the with your project.

<featurearticles
    jcr:primaryType="cq:Widget"
    fieldLabel="Article Pages"
    itemId="selectauthorId"
    name="./authorselect"
    type="select"
    xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection"/>
    <listeners
        jcr:primaryType="nt:unstructured"
        loadcontent="function(box,value) { 
        CQ.Ext.Ajax.request({ 
            url: '/bin/querybuilder.json', 
            success: function(response, opts) { 
                console.log('Response from the ajax'); 
                var resTexts = $.parseJSON(response.responseText); 
                var selectopts = []; 
                console.log(resTexts); 
                $.each(resTexts.hits, function(key, page) { 
                    console.log(page); 
                    selectopts.push({value: page['path'], text:page['name']}); 
                }); 
                console.log(selectopts); 
                box.setOptions(selectopts); 
            },  
            params: {
            'type' :'cq:Page', 
            'group.1_path' : '/content/<PROJECT_NAME>/Feature_Articles' 
            } 
        }); 
       }"
       selectionchanged="function(box,value) { 
        var panel = this.findParentByType('panel');
        var articleTitle = panel.getComponent('articleTitleId');

        CQ.Ext.Ajax.request({ 
            url: value + '/_jcr_content/par/featurearticleintro.json',
            success: function(response, opts) {
                console.log('success now');
                var resTexts = $.parseJSON(response.responseText); 
                console.log(resTexts);
            },
            failure: function(response, opts) {                    
                console.log('server-side failure with status code ' + response.status);
            }
        });            
    }"/>
</featurearticles>

If you have any better idea than this, I would like to know about that.

Cheers,

Mcclimans

Thanks for sharing. Unfortunately, one has to write the whole JS in the Node attribtue... :-( This is really annoying. – Octane

You don't need to put the whole JS in the node itself--just put the JavaScript in a client library that the page loads, then you only need a bit, such as this: loadcontent="function(box,value) { MyClientLib.method(box,value); }" – Coeternal

Answer 1

Another alternative is to use the "options" attribute of the selection xtype to fetch the dropdown list options from an AJAX call via a servlet or sling selector. The widgets api (http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - search for "selection") says this for the options attribute:

If options is a string it is assumed to be an URL pointing to a JSON resource that returns the options (same structure as above applies). This should be either an absolute URL or it can use the path of the content resource being edited using a placeholder (Selection.PATH_PLACEHOLDER = "$PATH"), for example: $PATH.options.json.

So it may be a cleaner approach to build a servlet that will respond with JSON to an AJAX request, then put this servlet as the "options" attribute. For example, the attribute might be something like options="/libs/myServlet" or something like options="$PATH.options.json". That may make the dialog cleaner (no listener required), and it uses built-in CQ capability to fetch options via AJAX.

Coeternal

Answer 2

We can use the dynamic dropdown as below:

<item
    jcr:primaryType="cq:Widget"
    fieldLabel="Item"
    name="./item"
    optionsRoot="root"
    options="/bin/service/item.json"
    type="select"
    xtype="selection"/>

options: the url will return the json format for the selection xtype

optionsRoot: the name of the root item of the json

optionsTextField: the name of text field (default value: "text")

optionsValueField: the name of the value field (default value: "value")

Example of json: {"root":[{"text":"Item 1", "value":"Value 1"},{"text":"Item 2", "value":"Value 2"},{"text":"Item 3", "value":"Value 3"}]}

Selection xtype

Zirconium