如何在CQ5中添加包含页面列表的下拉列表?

Har*_*sha 5 ajax query-builder aem

我有以下代码库与您分享列出通过AJAX调用使用查询构建器获取的页面.我们必须传递URL和参数以从我们提供的URL中获取子页面.

我已经放了一些console.log来跟踪每个状态的值.替换你的项目.

<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>
Run Code Online (Sandbox Code Playgroud)

如果你有更好的想法,我想知道这一点.

干杯,

Sha*_*awn 5

另一种方法是使用选择xtype的"options"属性,通过servlet或sling选择器从AJAX调用中获取下拉列表选项.小部件api(http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - 搜索"选择")对options属性说明了这一点:

如果options是一个字符串,则假定它是一个指向返回选项的JSON资源的URL(与上面相同的结构适用).这应该是绝对URL,或者它可以使用占位符(Selection.PATH_PLACEHOLDER ="$ PATH")编辑内容资源的路径,例如:$ PATH.options.json.

因此,构建一个将使用JSON响应AJAX请求的servlet可能是一种更简洁的方法,然后将此servlet作为"options"属性.例如,属性可能是类似的options="/libs/myServlet"东西options="$PATH.options.json".这可能会使对话更清晰(不需要监听器),并且它使用内置的CQ功能通过AJAX获取选项.