Questa sezione descrive come sviluppare lo strumento dell’editor collettivo e come estendere il componente Elenco prodotti, basato sull’editor collettivo.
Quando si lavora con l’editor bulk, è possibile aggiungere diversi parametri di query all’URL per chiamare l’editor bulk con una configurazione specifica. Se desideri che l’editor collettivo venga sempre utilizzato con una determinata configurazione, ad esempio nel componente Elenco prodotti, devi modificare bulkeditor.jsp (che si trova in /libs/wcm/core/components/bulkeditor) o creare un componente con la configurazione specifica. Le modifiche apportate utilizzando i parametri di query non sono permanenti.
Ad esempio, se digiti quanto segue nell’URL del browser:
https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true
l’editor in blocco viene visualizzato senza Percorso directory principale field as hrp=true nasconde il campo. Con il parametro hrp=false, viene visualizzato il campo (il valore predefinito).
Di seguito è riportato un elenco dei parametri di query dell’editor in blocco:
Ogni parametro può avere un nome lungo e breve. Ad esempio, il nome lungo per il percorso della directory principale di ricerca è rootPath
, quello breve è rp
. Se il nome lungo non è definito, quello breve viene letto dalla richiesta.
Parametro (nome lungo/nome breve) |
Tipo |
Descrizione |
rootPath/rp |
Stringa | percorso directory principale di ricerca |
queryParams / qp |
Stringa | query di ricerca |
contentMode/cm |
Booleano | se true, la modalità contenuto è abilitata |
colsValue/cv |
Stringa[] | proprietà ricercate (valori selezionati da colonneCaselle di controllo visualizzate in Selection) |
extraCols/ec |
Stringa[] | proprietà ricercate aggiuntive (visualizzate in un campo di testo separato da virgole) |
initialSearch / is |
Booleano | se true, la query viene eseguita al caricamento della pagina |
colsSelection/cs |
Stringa[] | selezione delle proprietà cercate (visualizzate come caselle di controllo) |
showGridOnly/sgo |
Booleano | se true, mostra solo la griglia e non il pannello di ricerca |
searchPanelCollapsed/spc | Booleano | se true, il pannello di ricerca viene compresso al caricamento |
hideRootPath/hrp | Booleano | se true, nasconde il campo percorso radice |
hideQueryParams/hqp | Booleano | se true, nasconde il campo query |
hideContentMode / hcm | Booleano | se true, nasconde il campo in modalità contenuto |
hideColsSelection/hcs | Booleano | se è true, nasconde il campo di selezione delle colonne |
hideExtraCols / hec | Booleano | se true, nasconde il campo colonne aggiuntive |
hideSearchButton | Booleano | se true, nasconde il pulsante di ricerca |
hideSaveButton/hsavep | Booleano | se true, nasconde il pulsante salva |
hideExportButton/hexpb | Booleano | se true, nasconde il pulsante esporta |
hideImportButton/hib | Booleano | se true, nasconde il pulsante importa |
hideResultNumber/hrn | Booleano | se true, nasconde il testo del numero di risultati della ricerca griglia |
hideInsertButton / hinsertb | Booleano | se true, nasconde il pulsante inserimento griglia |
hideDeleteButton/hdelb | Booleano | se true, nasconde il pulsante elimina griglia |
hidePathCol/hpc | Booleano | se true, nasconde la colonna "percorso" della griglia |
Questa sezione fornisce una panoramica sull’utilizzo dell’editor collettivo e fornisce una descrizione del componente Geometrixx esistente basato sull’editor collettivo: il componente Elenco prodotti.
Il componente Elenco prodotti consente agli utenti di visualizzare e modificare una tabella di dati. Ad esempio, puoi utilizzare il componente Elenco prodotti per rappresentare i prodotti in un catalogo. Le informazioni vengono presentate in una tabella standard di HTML e tutte le modifiche vengono eseguite in Modifica , che contiene un widget BulkEditor. Questo Bulk Editor è esattamente lo stesso di quello accessibile all’indirizzo /etc/importers/bulkeditor.html o dal menu Strumenti. Il componente Elenco prodotti è stato configurato per funzionalità specifiche e limitate dell’editor in blocco. È possibile configurare ogni parte dell’editor per la modifica in serie (o componenti derivati dall’editor per la modifica in serie).
Con l’editor collettivo, puoi aggiungere, modificare, eliminare, filtrare ed esportare le righe, salvare le modifiche e importare un set di righe. Ogni riga viene memorizzata come nodo sotto l’istanza del componente Elenco prodotti stessa. Ogni cella è una proprietà di ogni nodo. Si tratta di una scelta di progettazione che può essere facilmente modificata. Ad esempio, è possibile memorizzare i nodi altrove nell’archivio. Il ruolo del servlet di query consiste nel restituire l’elenco dei nodi da visualizzare; il percorso di ricerca è definito come istanza dell’elenco di prodotti.
Il codice sorgente del componente Elenco prodotti è disponibile nel repository all’indirizzo /apps/geometrixx/components/productlist ed è composto da diverse parti, come tutti i componenti AEM:
Ecco una rappresentazione XML dei sottonodi della finestra di dialogo:
<editor
jcr:primaryType="cq:Widget"
colsSelection="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
colsValue="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
contentMode="false"
exportURL="/etc/importers/bulkeditor/export.tsv"
extraCols="Selection"
hideColsSelection="false"
hideContentMode="true"
hideDeleteButton="false"
hideExportButton="false"
hideExtraCols="true"
hideImportButton="false"
hideInsertButton="false"
hideMoveButtons="false"
hidePathCol="true"
hideRootPath="true"
hideSaveButton="false"
hideSearchButton="false"
importURL="/etc/importers/bulkeditor/import"
initialSearch="true"
insertedResourceType="geometrixx/components/productlist/sku"
queryParams=""
queryURL="/etc/importers/bulkeditor/query.json"
saveURL="/etc/importers/bulkeditor/save"
xtype="bulkeditor">
<saveButton
jcr:primaryType="nt:unstructured"
text="Save modifications"/>
<searchButton
jcr:primaryType="nt:unstructured"
text="Apply filter"/>
<queryParamsInput
jcr:primaryType="nt:unstructured"
fieldDescription="Enter here your filters"
fieldLabel="Filters"/>
<searchPanel
jcr:primaryType="nt:unstructured"
height="200">
<defaults
jcr:primaryType="nt:unstructured"
labelWidth="150"/>
</searchPanel>
<grid
jcr:primaryType="nt:unstructured"
height="275"/>
<store jcr:primaryType="nt:unstructured">
<sortInfo
jcr:primaryType="nt:unstructured"
direction="ASC"
field="CatalogCode"/>
</store>
<colModel
jcr:primaryType="nt:unstructured"
width="150"/>
<colsMetadata jcr:primaryType="nt:unstructured">
<Selection
jcr:primaryType="nt:unstructured"
checkbox="true"
forcedPosition="0"
headerText=""/>
<ProductId
jcr:primaryType="nt:unstructured"
cellCls="productlist-cell-productid"
headerText="Product Id"/>
<ProductName
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #FFCC99;"
headerText="Product Name"/>
<CatalogCode
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #EDEDED;"
headerText="Catalog Code"/>
<Color jcr:primaryType="nt:unstructured">
<editor
jcr:primaryType="nt:unstructured"
store="[Blue,Red,Yellow]"
triggerAction="all"
typeAhead="true"
xtype="combo"/>
</Color>
<SellingSku
jcr:primaryType="nt:unstructured"
headerText="Sku Id"/>
</colsMetadata>
</editor>
È possibile configurare ogni parte dell’editor in blocco. Nella tabella seguente sono elencate tutte le proprietà di configurazione per l’editor bulk.
Nome proprietà | Definizione |
rootPath | Percorso directory principale ricerca |
queryParams | Query di ricerca |
contentMode | True per attivare la modalità contenuto: le proprietà vengono lette nel nodo jcr:content e non nel nodo dei risultati di ricerca |
colsValue | Proprietà cercate (valori selezionati da colonneCaselle di controllo visualizzate in Selection) |
extraCols | Proprietà ricercate aggiuntive (visualizzate in un campo di testo separato da virgole) |
initialSearch | True per eseguire una query al caricamento della pagina |
colsSelection | Selezione delle proprietà cercate (visualizzate come caselle di controllo) |
showGridOnly | True per visualizzare solo la griglia e non il pannello di ricerca (non dimenticare di impostare initialSearch su true) |
searchPanelCollapsed | True per comprimere il pannello di ricerca per impostazione predefinita |
hideRootPath | Nascondi campo percorso directory principale |
hideQueryParams | Nascondi campo query |
hideContentMode | Nascondi campo modalità contenuto |
hideColsSelection | Nascondi campo di selezione colonne |
hideExtraCols | Nascondi campo dei punti aggiuntivi |
hideSearchButton | Nascondi pulsante di ricerca |
hideSaveButton | Nascondi pulsante di salvataggio |
hideExportButton | Nascondi pulsante di esportazione |
hideImportButton | Nascondi pulsante di importazione |
hideResultNumber | Nascondi testo numero risultati ricerca griglia |
hideInsertButton | Nascondi pulsante inserimento griglia |
hideDeleteButton | Nascondi pulsante di eliminazione griglia |
hidePathCol | Nascondi colonna "percorso" griglia |
queryURL | Percorso del servlet di query |
exportURL | Percorso per esportare il servlet |
importURL | Percorso del servlet di importazione |
insertResourceType | Tipo di risorsa aggiunto al nodo quando viene inserita una riga |
saveButton | Configurazione widget pulsante Salva |
searchButton | Configurazione widget pulsante di ricerca |
exportButton | Configurazione widget pulsante Esporta |
importButton | Configurazione widget pulsante Importa |
searchPanel | Configurazione widget pannello di ricerca |
griglia | Configurazione widget griglia |
archiviare | Configurazione archivio |
colModel | Configurazione modello colonna griglia |
rootPathInput | configurazione widget rootPath |
queryParamsInput | configurazione widget queryParams |
contentModeInput | configurazione widget contentMode |
colsSelectionInput | config widget colsSelection |
extraColsInput | configurazione widget extraCols |
colsMetadata | Configurazione metadati colonna. Le possibili proprietà sono (applicate a tutte le celle della colonna):
|
Puoi configurare per ciascuna colonna:
proprietà di visualizzazione: stile html, classe CSS e sola lettura
una casella di controllo
una posizione forzata
Colonne CSS e di sola lettura
L’editor in blocco dispone di tre configurazioni di colonna:
La configurazione deve essere definita come la seguente:
"colsMetadata": {
"Column name": {
"cellStyle": "html style",
"cellCls": "CSS class",
"readOnly": true/false
}
}
Il seguente esempio si trova nel componente productlist (/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=it):
<colsMetadata jcr:primaryType="nt:unstructured">
<Selection
jcr:primaryType="nt:unstructured"
checkbox="true"
forcedPosition="0"
headerText=""/>
<ProductId
jcr:primaryType="nt:unstructured"
cellCls="productlist-cell-productid"
headerText="Product Id"/>
<ProductName
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #FFCC99;"
headerText="Product Name"/>
<CatalogCode
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #EDEDED;"
headerText="Catalog Code"/>
<Color jcr:primaryType="nt:unstructured">
<editor
jcr:primaryType="nt:unstructured"
store="[Blue,Red,Yellow]"
triggerAction="all"
typeAhead="true"
xtype="combo"/>
</Color>
<SellingSku
jcr:primaryType="nt:unstructured"
headerText="Sku Id"/>
</colsMetadata>
Casella di selezione
Se la proprietà di configurazione della casella di controllo è impostata su true, tutte le celle della colonna vengono visualizzate come caselle di controllo. Una casella selezionata invia true al server Salva servlet, false altrimenti. Nel menu dell’intestazione puoi anche seleziona tutto o seleziona nessuno. Queste opzioni sono attivate se l'intestazione selezionata è l'intestazione di una colonna di una casella di controllo.
Nell'esempio precedente la colonna di selezione contiene solo caselle di controllo come checkbox="true".
Posizione forzata
I metadati di posizione forzati forcedPosition consentono di specificare la posizione della colonna all'interno della griglia: 0 è la prima posizione e <number of="" columns="">-1 è l'ultima posizione. Qualsiasi altro valore viene ignorato.
Nell'esempio precedente la colonna di selezione è la prima colonna denominata forcedPosition="0".
Per impostazione predefinita, il servlet Query si trova in /libs/wcm/core/components/bulkeditor/json.java
. Puoi configurare un altro percorso per recuperare i dati.
Il servlet Query funziona come segue: riceve una query GQL e le colonne da restituire, calcola i risultati e li invia nuovamente all’editor in blocco come flusso JSON.
Nel caso del componente Elenco prodotti, i due parametri inviati al servlet Query sono i seguenti:
e il flusso JSON restituito è il seguente:
{
"hits": [{
"jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
"ProductId": "21",
"ProductName": "Cube",
"Color": "Blue",
"CatalogCode": "43244",
"SellingSku": "32131"
}
],
"results": 1
}
Ogni hit corrisponde a un nodo e alle relative proprietà e viene visualizzato come riga nella griglia.
Puoi estendere il servlet Query per restituire un modello di ereditarietà complesso o restituire nodi memorizzati in una posizione logica specifica. Il servlet Query può essere utilizzato per eseguire qualsiasi tipo di calcolo complesso. La griglia può quindi visualizzare righe che sono un aggregato di diversi nodi nell’archivio. In tal caso, la modifica e il salvataggio di queste righe devono essere gestiti dal servlet di salvataggio.
Nella configurazione predefinita dell’editor bulk ogni riga è un nodo e il percorso di questo nodo viene memorizzato nel record di riga. L’editor bulk mantiene il collegamento tra la riga e il nodo attraverso il percorso jcr. Quando un utente modifica la griglia, viene creato un elenco di tutte le modifiche. Quando un utente fa clic su Salva, a ogni percorso viene inviata una query POST con i valori delle proprietà aggiornati. Questa è la base del concetto Sling e funziona bene se ogni cella è una proprietà del nodo. Tuttavia, se il servlet Query viene implementato per eseguire il calcolo dell’ereditarietà, questo modello non può funzionare in quanto una proprietà restituita dal servlet Query può essere ereditata da un altro nodo.
Il concetto del servlet di salvataggio è che le modifiche non vengono inviate direttamente a ciascun nodo, ma a un servlet che esegue il processo di salvataggio. Questo consente a questo servlet di analizzare le modifiche e salvare le proprietà sul nodo giusto.
Ogni proprietà aggiornata viene inviata al servlet nel seguente formato:
Nome parametro: <jcr path="">/<property name="">
Esempio: /content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku
Valore: <value>
Esempio: 12123
Il servlet deve sapere dove è memorizzata la proprietà catalogCode.
Un’implementazione predefinita del servlet Save è disponibile all’indirizzo /libs/wcm/bulkeditor/save/POST.jsp e viene utilizzata nel componente Elenco prodotti. Prende tutti i parametri dalla richiesta (con un <jcr path="">/<property name=""> e scrive le proprietà sui nodi utilizzando l’API JCR. Crea anche un nodo se non esiste (righe inserite nella griglia).
Il codice predefinito non deve essere utilizzato così come è, in quanto reimplementa ciò che il server fa in modo nativo (un POST su <jcr path="">/<property name="">) ed è quindi solo un buon punto di partenza per la creazione di un servlet Save che gestirà un modello di ereditarietà delle proprietà.