AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
Questa sezione descrive come sviluppare lo strumento Modifiche in serie e come estendere il componente Elenco prodotti, basato sull'editor in serie.
Quando lavori con l’editor in blocco, puoi aggiungere all’URL diversi parametri di query per chiamare l’editor in blocco con una configurazione specifica. Se desideri che l’editor in blocco sia sempre utilizzato con una determinata configurazione, ad esempio, come 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 immetti 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 serie viene visualizzato senza Percorso radice come 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 del percorso 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 principale di ricerca |
queryParams / qp |
Stringa | query di ricerca |
contentMode / cm |
Booleano | se true, la modalità contenuto è abilitata |
colsValue / cv |
Stringa[] | proprietà di ricerca (valori selezionati da colsSelection visualizzati come caselle di controllo) |
extraCols / ec |
Stringa[] | ulteriori proprietà di ricerca (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 | quando true, nasconde il campo del percorso principale |
hideQueryParams / hqp | Booleano | quando true, nasconde il campo query |
hideContentMode / hcm | Booleano | quando è true, nasconde il campo modalità contenuto |
hideColsSelection / hcs | Booleano | quando è true, nasconde il campo di selezione delle colonne |
hideExtraCols / hec | Booleano | quando è true, nasconde il campo colonne extra |
hideSearchButton | Booleano | se true, nasconde il pulsante di ricerca |
hideSaveButton / hsavep | Booleano | se true, nasconde il pulsante salva |
hideExportButton / hexpb | Booleano | quando è true, nasconde il pulsante di esportazione |
hideImportButton / hib | Booleano | se true, nasconde il pulsante di importazione |
hideResultNumber / hrn | Booleano | se true, nasconde il testo del numero del risultato della ricerca griglia |
hideInsertButton / hinsertb | Booleano | se true, nasconde il pulsante di inserimento griglia |
hideDeleteButton / hdelb | Booleano | se true, nasconde il pulsante di eliminazione griglia |
hidePathCol / hpc | Booleano | quando è true, nasconde la colonna "path" della griglia |
Questa sezione fornisce una panoramica sull’utilizzo dell’editor in blocco e fornisce una descrizione del componente di Geometrixx esistente in base all’editor in serie: 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 HTML standard ed eventuali modifiche vengono eseguite nel Modifica che contiene un widget BulkEditor. (Questo Modifiche collettive è esattamente lo stesso di quello accessibile da /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 di massa (o dei componenti derivati dall’editor di massa).
Con l’editor di massa puoi aggiungere, modificare, eliminare, filtrare ed esportare le righe, salvare le modifiche e importare un set di righe. Ogni riga viene memorizzata come nodo nell’istanza del componente Elenco prodotti stessa. Ogni cella è una proprietà di ogni nodo. Si tratta di una scelta progettuale che può essere facilmente modificata, ad esempio, è possibile memorizzare nodi in un altro punto dell'archivio. Il ruolo del servlet di query consiste nel restituire l’elenco dei nodi da visualizzare; il percorso di ricerca è definito come un’istanza dell’elenco dei prodotti.
Il codice sorgente del componente Elenco prodotti è disponibile nell’archivio in /apps/geometrixx/components/productlist ed è composto da diverse parti come tutti i componenti AEM:
Ecco una rappresentazione XML dei sotto-nodi 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 in blocco.
Nome proprietà | Definizione |
rootPath | Percorso radice di ricerca |
queryParams | Query di ricerca |
contentMode | True per abilitare la modalità contenuto: le proprietà vengono lette sul nodo jcr:content e non sul nodo dei risultati di ricerca |
colsValue | Proprietà cercate (valori selezionati da colsSelection visualizzati come caselle di controllo) |
extraCols | Proprietà di ricerca extra (visualizzate in un campo di testo separato da virgole) |
initialSearch | True per eseguire la query al caricamento della pagina |
colsSelection | Selezione di proprietà cercate (visualizzate come caselle di controllo) |
showGridOnly | True per mostrare 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 principale |
hideQueryParams | Nascondi campo query |
hideContentMode | Nascondi campo modalità contenuto |
hideColsSelection | Nascondi campo selezione colori |
hideExtraCols | Nascondi campo punti extra |
hideSearchButton | Pulsante Nascondi ricerca |
hideSaveButton | Pulsante Nascondi salvataggio |
hideExportButton | Pulsante Nascondi esportazione |
hideImportButton | Pulsante Nascondi importazione |
hideResultNumber | Nascondi testo del numero del risultato della ricerca griglia |
hideInsertButton | Pulsante Nascondi inserimento griglia |
hideDeleteButton | Pulsante Nascondi eliminazione griglia |
hidePathCol | Nascondi la colonna "percorso" della griglia |
queryURL | Percorso del servlet di query |
exportURL | Percorso del servlet di esportazione |
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 di esportazione |
importButton | Configurazione widget pulsante di importazione |
searchPanel | Configurazione widget del pannello di ricerca |
griglia | Configurazione widget griglia |
archiviare | Configurazione store |
colModel | Configurazione del modello a colonne griglia |
rootPathInput | configurazione widget rootPath |
queryParamsInput | configurazione widget queryParams |
contentModeInput | configurazione widget contentMode |
colsSelectionInput | configurazione widget colsSelection |
extraColsInput | configurazione widget extraCols |
colsMetadata | Configurazione dei metadati della colonna. Le proprietà possibili sono (applicate a tutte le celle della colonna):
|
Puoi configurare per ogni colonna:
proprietà di visualizzazione: stile html, classe CSS e sola lettura
una casella di controllo
posizione forzata
Colonne CSS e di sola lettura
L’editor in serie dispone di tre configurazioni di colonna:
La configurazione deve essere definita come segue:
"colsMetadata": {
"Column name": {
"cellStyle": "html style",
"cellCls": "CSS class",
"readOnly": true/false
}
}
L’esempio seguente è disponibile nel componente elenco prodotti (/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 sottoposte a rendering come caselle di controllo. Una casella di controllo invia true al servlet di salvataggio del server, false altrimenti. Nel menu dell’intestazione è inoltre possibile seleziona tutto o seleziona nessuno. Queste opzioni sono abilitate se l’intestazione selezionata è l’intestazione di una colonna di controllo.
Nell’esempio precedente la colonna di selezione contiene solo le caselle di controllo come check="true".
Posizione forzata
I metadati di posizione forzata, l'opzione di posizione forzata ForzaPosition consente di specificare la posizione della colonna all'interno della griglia: 0 è il primo posto e <number of="" columns="">-1 è l'ultima posizione. Qualsiasi altro valore viene ignorato.
Nell'esempio precedente la colonna di selezione è la prima colonna come forzatoPosition="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 invia di nuovo i risultati 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 sue proprietà e viene visualizzato come una riga nella griglia.
È possibile estendere il servlet Query per restituire un modello di ereditarietà complesso o i nodi di ritorno memorizzati in una posizione logica specifica. Il servlet Query può essere utilizzato per eseguire qualsiasi tipo di calcolo complesso. La griglia può quindi visualizzare le righe che sono un aggregato di più nodi nel repository. La modifica e il salvataggio di queste righe devono in tal caso essere gestiti dal servlet Save.
Nella configurazione predefinita dell'editor in serie ogni riga è un nodo e il percorso di questo nodo è memorizzato nel record di riga. L'editor in blocco mantiene il collegamento tra la riga e il nodo attraverso il percorso jcr. Quando un utente modifica la griglia, viene generato un elenco di tutte le modifiche. Quando un utente fa clic su Salva, viene inviata una query POST a ogni percorso 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 è implementato per eseguire il calcolo dell’ereditarietà, questo modello non può funzionare come proprietà restituita dal servlet Query può essere ereditato da un altro nodo.
Il concetto di servlet Save è che le modifiche non vengono pubblicate direttamente su ciascun nodo ma vengono pubblicate su un servlet che esegue il processo di salvataggio. Questo dà a questo servlet la possibilità di analizzare le modifiche e salvare le proprietà sul nodo destro.
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=""> format) e scrive le proprietà sui nodi utilizzando l'API JCR. Crea anche un nodo se non esistono (righe inserite nella griglia).
Il codice predefinito non deve essere utilizzato così com'è 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à di proprietà.