Entwickeln des Bulk Editors developing-the-bulk-editor

In diesem Abschnitt wird beschrieben, wie Sie das Bulk Editor-Tool entwickeln und die Produktlisten-Komponente erweitern, die auf dem Bulk Editor basiert.

Bulk Editor-Abfrageparameter bulk-editor-query-parameters

Beim Arbeiten mit dem Bulk Editor können Sie mehrere Abfrageparameter zur URL hinzufügen, um den Bulk Editor mit einer bestimmten Konfiguration aufzurufen. Wenn Sie möchten, dass der Bulk Editor immer mit einer bestimmten Konfiguration verwendet wird, z. B. wie in der Komponente Produktliste , müssen Sie bulkeditor.jsp (in /libs/wcm/core/components/bulkeditor) oder erstellen Sie eine Komponente mit der spezifischen Konfiguration. Änderungen, die mithilfe von Abfrageparametern vorgenommen werden, sind nicht dauerhaft.

Wenn Sie beispielsweise Folgendes in die URL Ihres Browsers eingeben:

https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true

Der Bulk Editor wird ohne die Stammverzeichnis als hrp=true das Feld ausblendet. Mit dem Parameter hrp=false wird das Feld angezeigt (der Standardwert).

Im Folgenden finden Sie eine Liste der Bulk Editor-Abfrageparameter:

NOTE
Jeder Parameter kann einen langen und einen kurzen Namen haben. Beispielsweise lautet der lange Name für den Suchstammpfad . rootPath, lautet die kurze rp. Wenn der lange Name nicht definiert ist, wird der kurze aus der Anfrage ausgelesen.

Parameter

(Langname/Kurzname)

Typ
Beschreibung
rootPath/rp
Zeichenfolge
Suchstammpfad
queryParams/qp
Zeichenfolge
Suchabfrage
contentMode/cm
Boolesch
Wenn „true“, ist der Inhaltsmodus aktiviert
colsValue/cv
Zeichenfolge[]
durchsuchte Eigenschaften (angekreuzte Werte aus colsSelection werden als Kontrollkästchen angezeigt)
extraCols/ec
Zeichenfolge[]
extra durchsuchte Eigenschaften (in einem kommagetrennten Textfeld angezeigt)
initialSearch/is
Boolesch
Wenn „true“, wird die Abfrage beim Laden der Seite ausgeführt
colsSelection/cs
Zeichenfolge[]
Auswahl durchsuchter Eigenschaften (angezeigt als Kontrollkästchen)
showGridOnly/sgo
Boolesch
Wenn „true“, wird nur das Raster und nicht das Suchfeld angezeigt
searchPanelCollapsed/spc
Boolesch
Wenn „true“, wird das Suchfeld beim Laden reduziert
hideRootPath/hrp
Boolesch
Wenn „true“, blendet das Stammpfadfeld aus
hideQueryParams/hqp
Boolesch
wenn „true“, wird das Abfragefeld ausgeblendet
hideContentMode/hcm
Boolesch
Wenn „true“, wird das Feld für den Inhaltsmodus ausgeblendet
hideColsSelection/hcs
Boolesch
Wenn „true“, wird das Spaltenauswahlfeld ausgeblendet
hideExtraCols/hec
Boolesch
Wenn „true“, wird das zusätzliche Spaltenfeld ausgeblendet
hideSearchButton
Boolesch
Wenn „true“, wird die Suchschaltfläche ausgeblendet
hideSaveButton/savep
Boolesch
Wenn „true“, wird die Schaltfläche „Speichern“ ausgeblendet
hideExportButton/hexpb
Boolesch
Wenn „true“, wird die Export-Schaltfläche ausgeblendet
hideImportButton/hib
Boolesch
Wenn „true“, wird die Importschaltfläche ausgeblendet
hideResultNumber/hrn
Boolesch
Wenn „true“, wird der Text der Rastersuchergebnisnummer ausgeblendet
hideInsertButton/hinsertb
Boolesch
Wenn „true“, wird die Rastereinfüge-Schaltfläche ausgeblendet
hideDeleteButton/hdelb
Boolesch
Wenn „true“, wird die Schaltfläche zum Löschen des Rasters ausgeblendet
hidePathCol/hpc
Boolesch
Wenn „true“, wird die Spalte „path“ des Rasters ausgeblendet

Entwickeln einer auf dem Bulk Editor basierenden Komponente: die Produktlisten-Komponente developing-a-bulk-editor-based-component-the-product-list-component

Dieser Abschnitt bietet einen Überblick darüber, wie der Bulk Editor verwendet werden kann, und beschreibt die bestehende Geometrixx anhand des Bulk Editors: der Produktlisten-Komponente.

Mit der Komponente Produktliste können Benutzer eine Datentabelle anzeigen und bearbeiten. Beispielsweise können Sie die Produktlisten-Komponente verwenden, um Produkte in einem Katalog darzustellen. Die Informationen werden in einer standardmäßigen HTML-Tabelle dargestellt und alle Bearbeitungen werden in der Bearbeiten Dialogfeld, das ein BulkEditor-Widget enthält. (Dieser Bulk Editor entspricht dem Bulk Editor, auf den Sie über /etc/importers/bulkeditor.html oder das Menü Tools zugreifen können.) Die Produktlisten-Komponente wurde für bestimmte, eingeschränkte Bulk Editor-Funktionen konfiguriert. Jeder Teil des Bulk Editors (oder die vom Bulk Editor abgeleiteten Komponenten) kann konfiguriert werden.

Mit dem Bulk Editor können Sie die Zeilen hinzufügen, ändern, löschen, filtern und exportieren, Änderungen speichern und eine Reihe von Zeilen importieren. Jede Zeile wird als Knoten unter der Produktlisten-Komponenteninstanz selbst gespeichert. Jede Zelle ist eine Eigenschaft jedes Knotens. Dies ist eine Entwurfsentscheidung und kann einfach geändert werden, z. B. können Sie Knoten an einer anderen Stelle im Repository speichern. Die Rolle des Abfrage-Servlets besteht darin, die Liste der anzuzeigenden Knoten zurückzugeben. Der Suchpfad wird als Produktlisten-Instanz definiert.

Der Quellcode der Produktlisten-Komponente ist im Repository unter /apps/geometrixx/components/productlist verfügbar und besteht aus mehreren Teilen wie allen Adobe Experience Manager-Komponenten (AEM):

  • HTML-Rendering: Das Rendering erfolgt in einer JSP-Datei (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=de). Die JSP liest die Unterknoten der aktuellen Produktlisten-Komponente und zeigt jede davon als Zeile einer HTML-Tabelle an.
  • Dialogfeld "Bearbeiten", in dem Sie die Konfiguration des Bulk Editors definieren. Konfigurieren Sie das Dialogfeld entsprechend den Anforderungen der Komponente: verfügbare Spalten und mögliche Aktionen, die auf dem Raster oder bei der Suche durchgeführt werden. Siehe Konfigurationseigenschaften des Bulk Editors für Informationen zu allen Konfigurationseigenschaften.

Im Folgenden finden Sie eine XML-Darstellung der Unterknoten des Dialogfelds:

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

Konfigurationseigenschaften des Bulk Editors bulk-editor-configuration-properties

Jeder Teil des Bulk Editors kann konfiguriert werden. In der folgenden Tabelle sind alle Konfigurationseigenschaften für den Bulk Editor aufgeführt.

Eigenschaftsname
Definition
rootPath
Suchstammpfad
queryParams
Suchabfrage
contentMode
Wenn „true“, wird der Inhaltsmodus aktiviert: Eigenschaften werden auf dem Knoten jcr:content und nicht im Suchergebnisknoten gelesen
colsValue
Durchsuchte Eigenschaften (angekreuzte Werte aus colsSelection werden als Kontrollkästchen angezeigt)
extraCols
Zusätzliche durchsuchte Eigenschaften (in einem Textfeld durch Kommas getrennt angezeigt)
initialSearch
Wenn „true“, wird eine Abfrage beim Laden der Seite ausgeführt
colsSelection
Auswahl der durchsuchten Eigenschaften (angezeigt als Kontrollkästchen)
showGridOnly
Wenn „true“, wird nur das Raster und nicht das Suchfeld angezeigt (vergessen Sie nicht, initialSearch auf „true“ festzulegen)
searchPanelCollapsed
Wenn „true“, wird das Suchfeld standardmäßig reduziert
hideRootPath
Feld für Stammpfad ausblenden
hideQueryParams
Abfragefeld ausblenden
hideContentMode
Feld für Inhaltsmodus ausblenden
hideColsSelection
Spaltenauswahlfeld ausblenden
hideExtraCols
Feld „Zusätzliche Protokolle“ ausblenden
hideSearchButton
Schaltfläche „Suche“ ausblenden
hideSaveButton
Schaltfläche „Speichern“ ausblenden
hideExportButton
Schaltfläche „Export“ ausblenden
hideImportButton
Schaltfläche „Import“ ausblenden
hideResultNumber
Text der Rastersuchergebnisnummer ausblenden
hideInsertButton
Schaltfläche zum Einfügen eines Rasters ausblenden
hideDeleteButton
Schaltfläche zum Löschen eines Rasters ausblenden
hidePathCol
Rasterspalte „Pfad“ ausblenden
queryURL
Pfad zum Abfrage-Servlet
exportURL
Pfad zum Exportieren des Servlets
importURL
Pfad zum Importieren des Servlets
insertedResourceType
Ressourcentyp, der dem Knoten hinzugefügt wird, wenn eine Zeile eingefügt wird
saveButton
Widget-Konfiguration für die Schaltfläche „Speichern“
searchButton
Widget-Konfiguration für die Schaltfläche „Suche“
exportButton
Widget-Konfiguration für die Schaltfläche „Export“
importButton
Widget-Konfiguration für die Schaltfläche „Import“
searchPanel
Widget-Konfiguration für das Bedienfeld „Suche“
grid
Widget-Konfiguration für Raster
store
Konfiguration für store
colModel
Konfiguration des Rasterspaltenmodells
rootPathInput
Widget-Konfiguration für rootPath
queryParamsInput
Widget-Konfiguration für queryParams
contentModeInput
Widget-Konfiguration für contentMode
colsSelectionInput
Widget-Konfiguration für colsSelection
extraColsInput
Widget-Konfiguration für extraCols-Widget
colsMetadata

Konfiguration der Spaltenmetadaten. Mögliche Eigenschaften sind (auf alle Zellen der Spalte angewendet):

  • cellStyle: HTML-Stil

  • cellCls: CSS-Klasse

  • readOnly: Wenn „true“, kann der Wert nicht geändert werden

  • Kontrollkästchen: Wenn „true“, werden alle Zellen der Spalte als Kontrollkästchen definiert (true/false-Werte)

  • forcedPosition: ganzzahliger Wert, der angibt, wo die Spalte im Raster platziert werden muss (zwischen 0-Anzahl Spalten-1)

Konfiguration der Spalten-Metadaten columns-metadata-configuration

Sie können für jede Spalte konfigurieren:

  • Anzeige-Eigenschaften: HTML-Stil, CSS-Klasse und Schreibschutz

  • ein Kontrollkästchen

  • eine erzwungene Position

CSS- und schreibgeschützte Spalten

Der Bulk Editor verfügt über drei Spaltenkonfigurationen:

  • Zellen-CSS-Klassenname (cellCls): ein CSS-Klassenname, der zu jeder Zelle der konfigurierten Spalte hinzugefügt wird.
  • Zellstil (cellStyle): ein HTML-Stil, der zu jeder Zelle der konfigurierten Spalte hinzugefügt wird.
  • Schreibgeschützt (readOnly): Schreibgeschützt ist für jede Zelle der konfigurierten Spalte.

Die Konfiguration muss wie folgt definiert sein:

"colsMetadata": {
"Column name": {
     "cellStyle": "html style",
     "cellCls": "CSS class",
     "readOnly": true/false
}
}

Das folgende Beispiel finden Sie in der Produktlisten-Komponente (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=de):

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

Kontrollkästchen

Wenn die Konfigurationseigenschaft des Kontrollkästchens auf "true"festgelegt ist, werden alle Zellen der Spalte als Kontrollkästchen gerendert. Ein aktiviertes Kontrollkästchen sendet true zum Servlet "Speichern", false andernfalls. Im Kopfzeilenmenü können Sie auch Alle auswählen oder Keine auswählen. Diese Optionen sind aktiviert, wenn die ausgewählte Kopfzeile die Kopfzeile einer Kontrollkästchenspalte ist.

Im vorherigen Beispiel enthält die Auswahlspalte nur die Kontrollkästchen checkbox="true".

Erzwungene Position

Mit forcedPosition, den Metadaten für die erzwungene Position, können Sie festlegen, an welcher Stelle im Raster die Spalte platziert werden soll: 0 ist die erste Position und <number of columns> – 1 ist die letzte Position. Alle anderen Werte werden ignoriert.

Im vorherigen Beispiel ist die Auswahlspalte die erste Spalte mit forcedPosition="0".

Query Servlet query-servlet

Standardmäßig findet sich das Abfrage-Servlet unter /libs/wcm/core/components/bulkeditor/json.java. Sie können einen anderen Pfad konfigurieren, um die Daten abzurufen.

Das Abfrage-Servlet funktioniert wie folgt: Es empfängt eine GQL-Abfrage und die zurückzugebenden Spalten, berechnet die Ergebnisse und sendet die Ergebnisse als JSON-Stream an den Bulk Editor.

Im Komponentenfall Produktliste werden die beiden Parameter an das Abfrage-Servlet wie folgt gesendet:

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

Und der JSON-Stream wird wie folgt zurückgegeben:

{
  "hits": [{
      "jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
      "ProductId": "21",
      "ProductName": "Cube",
      "Color": "Blue",
      "CatalogCode": "43244",
      "SellingSku": "32131"
    }
  ],
  "results": 1
}

Jeder Treffer entspricht einem Knoten und seinen Eigenschaften und wird als Zeile im Raster angezeigt.

Sie können das Abfrage-Servlet erweitern, um ein komplexes Vererbungsmodell zurückzugeben oder Knoten zurückzugeben, die an einem bestimmten logischen Ort gespeichert sind. Das Abfrage-Servlet kann für jede Art von komplexer Berechnung verwendet werden. Das Raster kann dann Zeilen anzeigen, die ein Aggregat mehrerer Knoten im Repository sind. Die Änderung und das Speichern dieser Zeilen müssen in diesem Fall vom Save Servlet verwaltet werden.

Servlet speichern save-servlet

In der Standardkonfiguration des Bulk Editors ist jede Zeile ein Knoten und der Pfad dieses Knotens wird im Zeileneintrag gespeichert. Der Bulk Editor behält die Verknüpfung zwischen Zeile und Knoten über den jcr-Pfad bei. Wenn ein Benutzer das Raster bearbeitet, wird eine Liste aller Änderungen erstellt. Klickt ein Benutzer auf Speichern, wird eine POST-Abfrage an jeden Pfad mit den aktualisierten Eigenschaftswerten gesendet. Dies ist die Grundlage des Sling-Konzepts und funktioniert gut, wenn jede Zelle eine Eigenschaft des Knotens ist. Wenn jedoch das Abfrage-Servlet für die Vererbungsberechnung implementiert ist, kann dieses Modell nicht funktionieren, da eine vom Abfrage-Servlet zurückgegebene Eigenschaft von einem anderen Knoten übernommen werden kann.

Das Konzept des Servlets "Speichern"besteht darin, dass die Änderungen nicht direkt an jeden Knoten gesendet werden, sondern in einem Servlet veröffentlicht werden, das den Speicherauftrag ausführt. Dadurch kann dieses Servlet die Änderungen analysieren und die Eigenschaften auf dem richtigen Knoten speichern.

Jede aktualisierte Eigenschaft wird im folgenden Format an das Servlet gesendet:

  • Parametername: <jcr path>/<property name>

    Beispiel: /content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku

  • Wert: <value>

    Beispiel: 12123

Das Servlet muss wissen, wo die Eigenschaft catalogCode gespeichert ist.

Eine standardmäßige Implementierung des Speichern-Servlets findet sich unter /libs/wcm/bulkeditor/save/POST.jsp und wird in der Produktlisten-Komponente genutzt. Es übernimmt alle Parameter der Anfrage (mit dem Format <jcr path>/<property name>) und schreibt mithilfe der JCR-API Eigenschaften auf Knoten. Außerdem erstellt das Servlet Knoten, wenn sie nicht vorhanden sind (in das Raster eingefügte Zeilen).

Verwenden Sie den Standardcode nicht so, wie er ist, da er die nativen Aufgaben des Servers (eine POST auf <jcr path="">/<property name="">) und ist daher nur ein guter Ausgangspunkt zum Erstellen eines Servlets zum Speichern, das ein Eigenschaftsvererbungsmodell verwalten kann.

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