How to add a page list dropdown in CQ5?

Question

I have the following code base to share with you guys to display pages that are retrieved using the query builder using an AJAX call. We must pass the URL and parameters to retrieve the child pages from the URL that we provide.

I put some console.log to track the values ​​of each state. replace it with your design.

<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 an idea better than this, I would like to know about it.

Greetings

Answer 1

Another alternative is to use the "options" attribute to select xtype to select the dropdown options from an AJAX call through a servlet or selector. Widgets api ( http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - search "choice") says this for the options attribute:

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

So this could be a cleaner approach for creating a servlet that will respond JSON to an AJAX request, and then put that servlet as the "options" attribute. For example, an attribute might be something like options="/libs/myServlet" or something like options="$PATH.options.json" . A dialog box cleaner can do this (no listener is required), and it uses the built-in CQ feature to select parameters through AJAX.

Answer 2

We can use the dynamic drop-down menu as shown below:

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

: url will return json format for xtype selection

optionsRoot: json root element name

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

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

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

Xtype selection