Desarrollo del editor en bloque developing-the-bulk-editor

En esta sección se describe cómo desarrollar la herramienta Editor por lotes y cómo ampliar el componente Lista de productos, que se basa en el Editor por lotes.

Parámetros de consulta del editor en lotes bulk-editor-query-parameters

Al trabajar con el Editor por lotes, puede añadir varios parámetros de consulta a la URL para llamar al Editor por lotes con una configuración específica. Si desea que el editor en lotes siempre se utilice con una configuración determinada, por ejemplo, como en el componente Lista de productos, debe editar bulkeditor.jsp (en /libs/wcm/core/components/bulkeditor) o crear un componente con la configuración específica. Los cambios realizados con los parámetros de consulta no son permanentes.

Por ejemplo, si escribe lo siguiente en la dirección URL del explorador:

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

El editor en lotes se muestra sin el campo Ruta raíz, ya que hrp=true oculta el campo. Con el parámetro hrp=false, se muestra el campo (el valor predeterminado).

A continuación se muestra una lista de los parámetros de consulta del Editor por lotes:

NOTE
Cada parámetro puede tener un nombre largo y uno corto. Por ejemplo, el nombre largo de la ruta de acceso raíz de búsqueda es rootPath, el corto es rp. Si no se define el nombre largo, se lee el corto de la solicitud.

Parámetro

(nombre largo/nombre corto)

Tipo
Descripción
rootPath / rp
Cadena
ruta raíz de búsqueda
queryParams / qp
Cadena
consulta de búsqueda
contentMode / cm
Booleano
cuando es true, el modo de contenido está habilitado
colsValue / cv
String[]
propiedades buscadas (valores seleccionados de colsSelection mostrados como casillas de verificación)
extraCols / ec
String[]
propiedades buscadas adicionales (mostradas en un campo de texto separado por comas)
initialSearch / is
Booleano
cuando es true, la consulta se realiza al cargar la página
colsSelection / cs
String[]
selección de propiedades buscadas (mostradas como casillas de verificación)
showGridOnly / sgo
Booleano
cuando es true, muestra únicamente la cuadrícula y no el panel de búsqueda
searchPanelCollapsed/spc
Booleano
cuando es true, el panel de búsqueda se contrae al cargar
hideRootPath / hrp
Booleano
cuando es true, oculta el campo de ruta raíz
hideQueryParams/hqp
Booleano
cuando es true, oculta el campo de consulta
hideContentMode / hcm
Booleano
cuando es true, oculta el campo content mode
hideColsSelection / hcs
Booleano
cuando es true, oculta el campo de selección columnas
hideExtraCols/hec
Booleano
cuando es true, oculta el campo columnas adicionales
hideSearchButton
Booleano
cuando es true, oculta el botón buscar
hideSaveButton/hsavep
Booleano
cuando es true, oculta el botón guardar
hideExportButton / hexpb
Booleano
cuando es true, oculta el botón exportar
hideImportButton / hib
Booleano
cuando es true, oculta el botón importar
hideResultNumber / hrn
Booleano
cuando es true, oculta el texto del número de resultados de búsqueda de cuadrícula
hideInsertButton / hinsertb
Booleano
cuando es true, oculta el botón de inserción de cuadrícula
hideDeleteButton / hdelb
Booleano
cuando es true, oculta el botón eliminar de cuadrícula
hidePathCol/hpc
Booleano
cuando es true, oculta la columna "ruta" de la cuadrícula

Desarrollo de un componente basado en el editor por lotes: el componente Lista de productos developing-a-bulk-editor-based-component-the-product-list-component

Esta sección proporciona información general sobre cómo utilizar el Editor por lotes y ofrece una descripción del componente de Geometrixx existente basado en el Editor por lotes: el componente Lista de productos.

El componente Lista de productos permite a los usuarios mostrar y editar una tabla de datos. Por ejemplo, puede utilizar el componente Lista de productos para representar los productos en un catálogo. La información se presenta en una tabla de HTML estándar y cualquier edición se realiza en el cuadro de diálogo Editar, que contiene un widget de Editor en lotes. (Este editor en bloque es el mismo al que se puede acceder en /etc/importers/bulkeditor.html o a través del menú Herramientas). El componente Lista de productos se ha configurado para funciones específicas y limitadas del Editor por lotes. Se pueden configurar todas las partes del editor en bloque (o los componentes derivados del editor en bloque).

Con el editor en bloque, puede añadir, modificar, eliminar, filtrar y exportar las filas, guardar modificaciones e importar un conjunto de filas. Cada fila se almacena como un nodo en la propia instancia del componente Lista de productos. Cada celda es una propiedad de cada nodo. Esta es una opción de diseño y se puede cambiar fácilmente, por ejemplo, puede almacenar nodos en otro lugar del repositorio. La función del servlet de consulta es devolver la lista de los nodos que se van a mostrar; la ruta de búsqueda se define como una instancia de lista de productos.

El código fuente del componente Lista de productos está disponible en el repositorio en /apps/geometrixx/components/productlist y se compone de varias partes, como todos los componentes de Adobe Experience Manager AEM ():

  • Procesamiento de HTML: el procesamiento se realiza en un archivo JSP (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=es). El JSP lee los subnodos del componente de lista de productos actual y muestra cada uno de ellos como una fila de una tabla de HTML.
  • Cuadro de diálogo Editar, que es donde se define la configuración del Editor por lotes. Configure el cuadro de diálogo para que coincida con las necesidades del componente: columnas disponibles y posibles acciones realizadas en la cuadrícula o en la búsqueda. Consulte Propiedades de configuración del editor en lotes para obtener información sobre todas las propiedades de configuración.

Esta es una representación XML de los subnodos del cuadro de diálogo:

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

Propiedades de configuración del editor en lotes bulk-editor-configuration-properties

Se pueden configurar todas las partes del editor en bloque. En la tabla siguiente se enumeran todas las propiedades de configuración del Editor por lotes.

Nombre de la propiedad
Definición
rootPath
Ruta raíz de búsqueda
queryParams
Consulta de búsqueda
contentMode
True para habilitar el modo de contenido: las propiedades se leen en el nodo jcr:content y no en el nodo de resultados de búsqueda
colsValue
Propiedades buscadas (valores seleccionados de colsSelection mostrados como casillas de verificación)
extraCols
Propiedades buscadas adicionales (mostradas en un campo de texto separadas por comas)
initialSearch
True para realizar la consulta al cargar la página
colsSelection
Selección de propiedades buscadas (mostradas como casillas de verificación)
showGridOnly
True para mostrar únicamente la cuadrícula y no el panel de búsqueda (no olvide establecer initialSearch en true)
searchPanelCollapsed
True para contraer el panel de búsqueda de forma predeterminada
hideRootPath
Ocultar campo de ruta raíz
hideQueryParams
Ocultar campo de consulta
hideContentMode
Ocultar campo de modo de contenido
hideColsSelection
Ocultar campo de selección de columnas
hideExtraCols
Ocultar campo de columnas adicionales
hideSearchButton
Ocultar botón de búsqueda
hideSaveButton
Ocultar botón de guardar
hideExportButton
Ocultar botón de exportación
hideImportButton
Ocultar botón de importación
hideResultNumber
Ocultar texto de número de resultado de búsqueda de cuadrícula
hideInsertButton
Ocultar botón de inserción de cuadrícula
hideDeleteButton
Ocultar botón de eliminación de cuadrícula
hidePathCol
Ocultar columna de "ruta" de cuadrícula
queryURL
Ruta al servlet de consulta
exportURL
Ruta para exportar el servlet
importURL
Ruta para importar servlet
insertedResourceType
Tipo de recurso agregado al nodo cuando se inserta una fila
saveButton
Guardar configuración del widget de botón
searchButton
Configuración del widget del botón de búsqueda
exportButton
Configuración del widget del botón Exportar
importButton
Configuración del widget del botón Importar
searchPanel
Configuración del widget del panel de búsqueda
rejilla
Configuración del widget de cuadrícula
almacenar
Configuración de tienda
colModel
Configuración del modelo de columna de cuadrícula
rootPathInput
Configuración del widget rootPath
queryParamsInput
Configuración del widget queryParams
contentModeInput
configuración del widget contentMode
colsSelectionInput
configuración del widget colsSelection
extraColsInput
configuración del widget extraCols
colsMetadata

Configuración de metadatos de columna. Las propiedades posibles son (aplicadas a todas las celdas de la columna):

  • cellStyle: estilo html

  • cellCls: clase css

  • readOnly: true para no poder cambiar el valor

  • casilla de verificación: true para definir todas las celdas de la columna como casillas de verificación (valores true/false)

  • forcedPosition: valor entero para especificar dónde se debe colocar la columna en la cuadrícula (entre 0 y 1)

Configuración de metadatos de columnas columns-metadata-configuration

Puede configurar para cada columna:

  • propiedades de visualización: estilo html, clase CSS y solo lectura

  • una casilla

  • una posición forzada

Columnas CSS y de solo lectura

El editor en bloque tiene tres configuraciones de columna:

  • Cell CSS class name (cellCls): un nombre de clase CSS que se agrega a cada celda de la columna configurada.
  • Estilo de celda (cellStyle): Un estilo de HTML que se añade a cada celda de la columna configurada.
  • Solo lectura (readOnly): solo lectura se establece para cada celda de la columna configurada.

La configuración debe definirse como la siguiente:

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

El siguiente ejemplo se encuentra en el componente productlist (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=es):

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

Casilla de verificación

Si la propiedad checkbox configuration se establece en true, todas las celdas de la columna se representan como casillas de verificación. Una casilla marcada envía true al servidor Guardar servlet, false en caso contrario. En el menú del encabezado, también puede seleccionar todo o seleccionar ninguno. Estas opciones se activan si el encabezado seleccionado es el encabezado de una columna de casilla de verificación.

En el ejemplo anterior, la columna de selección contiene solo casillas de verificación como checkbox="true".

Posición forzada

Los metadatos de posición forzada forcedPosition le permiten especificar dónde se coloca la columna dentro de la cuadrícula: 0 es el primer lugar y <número de columnas>-1 es la última posición. Se ignora cualquier otro valor.

En el ejemplo anterior, la columna de selección es la primera columna como forcedPosition="0".

Servlet de consulta query-servlet

De manera predeterminada, el servlet de consulta se encuentra en /libs/wcm/core/components/bulkeditor/json.java. Puede configurar otra ruta para recuperar los datos.

El servlet de consulta funciona de la siguiente manera: recibe una consulta GQL y las columnas que se van a devolver, calcula los resultados y devuelve los resultados al Editor por lotes como un flujo JSON.

En el caso del componente Lista de productos, los dos parámetros enviados al servlet de Consulta son los siguientes:

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

Y la secuencia JSON se devuelve de la siguiente manera:

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

Cada visita individual corresponde a un nodo y a sus propiedades, y se muestra como una fila en la cuadrícula.

Puede ampliar el servlet de consulta para devolver un modelo de herencia complejo o nodos devueltos almacenados en un lugar lógico específico. El servlet de consulta se puede utilizar para realizar cualquier tipo de cálculo complejo. La cuadrícula puede mostrar filas que son un agregado de varios nodos en el repositorio. La modificación y el guardado de estas filas deben ser administrados en ese caso por Save Servlet.

Guardar servlet save-servlet

En la configuración predeterminada del Editor por lotes, cada fila es un nodo y la ruta de este nodo se almacena en el registro de fila. El Editor por lotes mantiene el vínculo entre la fila y el nodo a través de la ruta jcr. Cuando un usuario edita la cuadrícula, se crea una lista de todas las modificaciones. Cuando un usuario hace clic en Guardar, se envía una consulta al POST a cada ruta con los valores de propiedades actualizados. Esta es la base del concepto de Sling y funciona bien si cada celda es una propiedad del nodo. Sin embargo, si el servlet de consulta está implementado para realizar el cálculo de herencia, este modelo no puede funcionar porque una propiedad devuelta por el servlet de consulta se puede heredar de otro nodo.

El concepto Guardar servlet implica que las modificaciones no se publican directamente en cada nodo, sino que se publican en un servlet que realiza el trabajo de guardado. Esto ofrece a este servlet la posibilidad de analizar las modificaciones y guardar las propiedades en el nodo derecho.

Cada propiedad actualizada se envía al servlet en el siguiente formato:

  • Nombre del parámetro: <jcr path>/<property name>

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

  • Valor: <value>

    Ejemplo: 12123

El servlet debe saber dónde se almacena la propiedad catalogCode.

Una implementación predeterminada del servlet Guardar está disponible en /libs/wcm/bulkeditor/save/POST.jsp y se utiliza en el componente Lista de productos. Toma todos los parámetros de la solicitud (con un formato <jcr path>/<property name>) y escribe propiedades en los nodos mediante la API de JCR. También crea un nodo si no existen (filas insertadas en la cuadrícula).

No utilice el código predeterminado tal cual, ya que reimplementa lo que hace el servidor de forma nativa (un POST en <jcr path>/<property name>) y, por lo tanto, solo es un buen punto de partida para crear un servlet de guardado que pueda administrar un modelo de herencia de propiedades.

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