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,

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.

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