Come aggiungere un elenco a discesa con l'elenco delle pagine in CQ5?

Question

Ho il seguente codice di base da condividere con voi per elencare le pagine che recuperano usando il generatore di query tramite chiamata AJAX. Dobbiamo passare l'URL e i parametri per recuperare le pagine secondarie dall'URL che forniamo.

Ho messo un po 'di console.log per tracciare i valori di ogni stato. sostituisci con il tuo progetto.

<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> 

Se avete un'idea migliore di questa, mi piacerebbe saperlo.

Acclamazioni,

Answer 1

Un'altra alternativa è quella di utilizzare il "mangiare" l'attributo xtype selezione per recuperare le opzioni dell'elenco discesa da una chiamata AJAX tramite un selettore di servlet o imbracatura. L'API widget (http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - cercare "selezione") dice che questo per le opzioni attributo:

Se opzioni è una stringa che si presume essere un URL che punta a un JSON risorsa che restituisce le opzioni (stessa struttura come sopra si applica). Questo deve essere un URL assoluto oppure può utilizzare il percorso della risorsa di contenuto modificata utilizzando un segnaposto (Selection.PATH_PLACEHOLDER = "$ PATH"), ad esempio: $ PATH.options.json.

Quindi può essere un approccio più pulito costruire un servlet che risponderà con JSON a una richiesta AJAX, quindi inserire questo servlet come attributo "options". Ad esempio, l'attributo potrebbe essere qualcosa come options="/libs/myServlet" o qualcosa come options="$PATH.options.json". Ciò potrebbe rendere la finestra di dialogo più pulita (nessun listener richiesto) e utilizza la funzionalità CQ integrata per recuperare le opzioni tramite AJAX.

Answer 2

Possiamo usare la tendina dinamica come di seguito:

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

opzioni: l'url restituirà il formato JSON per la xtype selezione

optionsRoot: il nome dell'elemento radice del JSON

optionsTextField: il nome del campo di testo (valore predefinito: "testo")

optionsValueField: il nome del campo del valore (valore predefinito: "valore")

Esempio di json: {"root": [{"testo": "Elemento 1", "valore": "Valore 1"}, {"testo": "Elemento 2", "valore": "Valore 2 "}, {" testo ":" Articolo 3" , "valore": "value 3"}]}

Selection xtype