Sviluppo dell’editor in blocco developing-the-bulk-editor

Questa sezione descrive come sviluppare lo strumento Bulk Editor e come estendere il componente Product List, basato sull’Bulk Editor.

Parametri di query dell’editor in blocco bulk-editor-query-parameters

Quando si lavora con l’editor in blocco, è possibile aggiungere diversi parametri di query all’URL per chiamare l’editor in blocco con una configurazione specifica. Se desideri utilizzare sempre l’Editor collettivo con una determinata configurazione, ad esempio nel componente Elenco prodotti, devi modificare bulkeditor.jsp (in /libs/wcm/core/components/bulkeditor) o crea 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 collettivo 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 di massa:

NOTE
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

Sviluppo di un componente basato su Editor in blocco: il componente Elenco prodotti developing-a-bulk-editor-based-component-the-product-list-component

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 contenente un widget BulkEditor. Questo Bulk Editor è 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 collettivo (o dei componenti derivati dall’Editor collettivo).

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 nell’archivio in /apps/geometrixx/components/productlist ed è composto da diverse parti come tutti i componenti di Adobe Experience Manager (AEM):

  • Rendering HTML: il rendering viene eseguito in un file JSP (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=it). JSP legge i sottonodi del componente Elenco prodotti corrente e li visualizza come riga di una tabella HTML.
  • Finestra di dialogo per modifica, in cui puoi definire la configurazione dell’editor di massa. Configura la finestra di dialogo in base alle esigenze del componente: colonne disponibili e possibili azioni eseguite sulla griglia o sulla ricerca. Consulta Proprietà di configurazione dell’editor in blocco per informazioni su tutte le proprietà di configurazione.

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>

Proprietà di configurazione dell’editor in blocco bulk-editor-configuration-properties

È possibile configurare ogni parte dell’editor di massa. Nella tabella seguente sono elencate tutte le proprietà di configurazione per l'editor in blocco.

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

  • cellStyle: stile html

  • cellCls: classe css

  • readOnly: true per non essere in grado di modificare il valore

  • casella di controllo: true per definire tutte le celle della colonna come caselle di controllo (valori true/false)

  • forcedPosition: valore intero per specificare la posizione della colonna nella griglia (tra 0-numero di colonne-1)

Configurazione metadati colonne columns-metadata-configuration

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 collettivo dispone di tre configurazioni di colonna:

  • Cell CSS class name (cellCls): nome di classe CSS aggiunto a ogni cella della colonna configurata.
  • Stile cella (cellStyle): stile HTML aggiunto a ogni cella della colonna configurata.
  • Sola lettura (sola lettura): la sola lettura è impostata per ogni cella della colonna configurata.

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 (https://experienceleague.adobe.com/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".

Query Servlet query-servlet

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 bulk come flusso JSON.

Nel caso del componente Elenco prodotti, i due parametri inviati al servlet Query sono i seguenti:

  • query: "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
  • colonne: "Selection,ProductId,ProductName,Color,CatalogCode,SellingSku"

Il flusso JSON viene restituito come segue:

{
  "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.

Salva servlet save-servlet

Nella configurazione predefinita dell’Editor collettivo ogni riga è un nodo e il percorso di questo nodo viene memorizzato nel record di riga. L’Editor collettivo 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).

Non utilizzare il codice predefinito così com'è perché 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 in grado di gestire un modello di ereditarietà delle proprietà.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2