Desenvolvimento do editor de itens em massa developing-the-bulk-editor

Esta seção descreve como desenvolver a ferramenta Editor de itens em massa e como estender o componente Lista de produtos, que é baseado no Editor de itens em massa.

Parâmetros de consulta do editor em massa bulk-editor-query-parameters

Ao trabalhar com o Editor de itens em massa, há vários parâmetros de consulta que você pode adicionar ao URL para chamar o Editor de itens em massa com uma configuração específica. Se você quiser que o Editor de itens em massa seja sempre usado com uma determinada configuração, por exemplo, como no componente Lista de produtos, edite bulkeditor.jsp (em /libs/wcm/core/components/bulkeditor) ou crie um componente com a configuração específica. As alterações feitas usando parâmetros de consulta não são permanentes.

Por exemplo, se você digitar o seguinte no URL do navegador:

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

O Editor de itens em massa é exibido sem a Caminho raiz field como hrp=true oculta o campo. Com o parâmetro hrp=false, o campo é exibido (o valor padrão).

Veja a seguir uma lista dos parâmetros de consulta do Editor de itens em massa:

NOTE
Cada parâmetro pode ter um nome longo e curto. Por exemplo, o nome longo do caminho raiz de pesquisa é rootPath, a curta é rp. Se o nome longo não estiver definido, o nome curto será lido da solicitação.

Parâmetro

(nome longo/nome curto)

Tipo
Descrição
rootPath/rp
String
caminho raiz de pesquisa
queryParams / qp
String
pesquisar consulta
contentMode/cm
Booleano
quando true, o modo de conteúdo é habilitado
colsValue / cv
String[]
propriedades pesquisadas (valores marcados de colsSelection exibidos como caixas de seleção)
extraCols / ec
String[]
propriedades adicionais pesquisadas (exibidas em um campo de texto separado por vírgulas)
initialSearch / é
Booleano
quando verdadeiro, a consulta é executada no carregamento da página
colsSelection / cs
String[]
seleção de propriedades pesquisadas (exibidas como caixas de seleção)
showGridOnly / sgo
Booleano
quando verdadeiro, mostra somente a grade e não o painel de pesquisa
searchPanelCollapsed/spc
Booleano
quando verdadeiro, o painel de pesquisa é recolhido ao carregar
hideRootPath / hrp
Booleano
quando verdadeiro, oculta o campo de caminho raiz
hideQueryParams / hqp
Booleano
quando verdadeiro, oculta o campo de consulta
hideContentMode / hcm
Booleano
quando verdadeiro, oculta o campo de modo de conteúdo
hideColsSelection / hcs
Booleano
quando verdadeiro, oculta o campo de seleção de colunas
hideExtraCols / hec
Booleano
quando verdadeiro, oculta o campo de colunas extra
hideSearchButton
Booleano
quando verdadeiro, oculta o botão de pesquisa
hideSaveButton / hsavep
Booleano
quando verdadeiro, oculta o botão salvar
hideExportButton / hexpb
Booleano
quando verdadeiro, oculta o botão exportar
hideImportButton / hib
Booleano
quando verdadeiro, oculta o botão importar
hideResultNumber / hrn
Booleano
quando verdadeiro, oculta o texto do número do resultado da pesquisa da grade
hideInsertButton / hinsertb
Booleano
quando verdadeiro, oculta o botão de inserção de grade
hideDeleteButton / hdelb
Booleano
quando verdadeiro, oculta o botão excluir da grade
hidePathCol / hpc
Booleano
quando verdadeiro, oculta a coluna "path" da grade

Desenvolvimento de um componente baseado no Editor de itens em massa: o componente de Lista de produtos developing-a-bulk-editor-based-component-the-product-list-component

Esta seção fornece uma visão geral de como usar o Editor de itens em massa e fornece uma descrição do componente Geometrixx existente com base no Editor de itens em massa: o componente Lista de produtos.

O componente Lista de produtos permite que os usuários exibam e editem uma tabela de dados. Por exemplo, você pode usar o componente Lista de produtos para representar produtos em um catálogo. As informações são apresentadas em uma tabela de HTML padrão e qualquer edição é executada no Editar que contém um dispositivo BulkEditor. (Este Editor de itens em massa é o mesmo que o acessível em /etc/importers/bulkeditor.html ou através do menu Ferramentas). O componente Lista de produtos foi configurado para funcionalidade específica e limitada do Editor de itens em massa. Cada parte do Editor de itens em massa (ou componentes derivados do Editor de itens em massa) pode ser configurada.

Com o Editor de itens em massa, você pode adicionar, modificar, excluir, filtrar e exportar as linhas, salvar modificações e importar um conjunto de linhas. Cada linha é armazenada como um nó na própria instância do componente Lista de produtos. Cada célula é uma propriedade de cada nó. Essa é uma opção de design e pode ser facilmente alterada. Por exemplo, você pode armazenar nós em outro lugar no repositório. A função do servlet de consulta é retornar a lista dos nós a serem exibidos; o caminho de pesquisa é definido como uma instância da Lista de produtos.

O código-fonte do componente Lista de produtos está disponível no repositório em /apps/geometrixx/components/productlist e é composto por várias partes, como todos os componentes do Adobe Experience Manager (AEM):

  • Renderização de HTML: a renderização é feita em um arquivo JSP (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=pt-BR). O JSP lê os subnós do componente Lista de produtos atual e exibe cada um deles como uma linha de uma tabela HTML.
  • Caixa de diálogo de edição, que é onde você define a configuração do Editor de itens em massa. Configure a caixa de diálogo para corresponder às necessidades do componente: colunas disponíveis e possíveis ações executadas na grade ou na pesquisa. Consulte Propriedades de configuração do Editor de itens em massa para obter informações sobre todas as propriedades de configuração.

Aqui está uma representação XML dos subnós do 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>

Propriedades de configuração do editor de itens em massa bulk-editor-configuration-properties

Cada parte do Editor de itens em massa pode ser configurada. A tabela a seguir lista todas as propriedades de configuração do Editor de itens em massa.

Nome da propriedade
Definição
rootPath
Pesquisar caminho raiz
queryParams
Pesquisar consulta
contentMode
Verdadeiro para ativar o modo de conteúdo: as propriedades são lidas no nó jcr:content e não no nó de resultado de pesquisa
colsValue
Propriedades pesquisadas (valores marcados de colsSelection exibidos como caixas de seleção)
extraCols
Propriedades pesquisadas extras (exibidas em um campo de texto separado por vírgulas)
initialSearch
Verdadeiro para executar a consulta no carregamento da página
colsSelection
Seleção de propriedades pesquisadas (exibidas como caixas de seleção)
showGridOnly
Verdadeiro para mostrar apenas a grade e não o painel de pesquisa (não se esqueça de definir initialSearch como verdadeiro)
searchPanelCollapsed
Verdadeiro para recolher o painel de pesquisa por padrão
hideRootPath
Ocultar campo de caminho raiz
hideQueryParams
Ocultar campo de consulta
hideContentMode
Ocultar campo de modo de conteúdo
ocultarColsSelection
Ocultar campo de seleção de colunas
hideExtraCols
Ocultar campo cols extra
hideSearchButton
Ocultar botão de pesquisa
hideSaveButton
Ocultar botão Salvar
hideExportButton
Ocultar botão de exportação
hideImportButton
Ocultar botão de importação
hideResultNumber
Ocultar texto do número do resultado de pesquisa da grade
hideInsertButton
Ocultar botão de inserção de grade
hideDeleteButton
Ocultar o botão de exclusão da grade
hidePathCol
Ocultar a coluna "caminho" da grade
queryURL
Caminho para o servlet de consulta
exportURL
Caminho para exportar servlet
importURL
Caminho para importar servlet
insertedResourceType
Tipo de recurso adicionado ao nó quando uma linha é introduzida
saveButton
Salvar configuração do widget de botão
searchButton
Pesquisar configuração do widget de botão
exportButton
Exportar configuração do widget de botão
importButton
Importar configuração do widget de botão
searchPanel
Configuração do widget do painel de pesquisa
grade
Configuração do widget de grade
loja
Armazenar configuração
colModel
Configuração do modelo de coluna de grade
rootPathInput
configuração do widget rootPath
queryParamsInput
configuração do widget queryParams
contentModeInput
configuração do widget contentMode
colsSelectionInput
configuração do widget colsSelection
extraColsInput
configuração do widget extraCols
colsMetadata

Configuração de metadados da coluna. As possíveis propriedades são (aplicadas a todas as células da coluna):

  • cellStyle: html style

  • cellCls: classe css

  • readOnly: verdadeiro para não poder alterar o valor

  • caixa de seleção: true para definir todas as células da coluna como caixas de seleção (valores true/false)

  • forcedPosition: valor inteiro para especificar onde a coluna deve ser colocada na grade (entre 0 e o número de colunas-1)

Configuração de metadados de colunas columns-metadata-configuration

Você pode configurar para cada coluna:

  • propriedades de exibição: estilo html, classe CSS e somente leitura

  • uma caixa de seleção

  • uma posição forçada

Colunas CSS e somente leitura

O Editor de itens em massa tem três configurações de coluna:

  • Nome da classe CSS da célula (cellCls): um nome de classe CSS que é adicionado a cada célula da coluna configurada.
  • Estilo da célula (cellStyle): um estilo de HTML que é adicionado a cada célula da coluna configurada.
  • Somente leitura (readOnly): somente leitura é definido para cada célula da coluna configurada.

A configuração deve ser definida como a seguinte:

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

O exemplo a seguir pode ser encontrado no componente da lista de produtos (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=pt-BR):

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

Caixa de seleção

Se a propriedade de configuração da caixa de seleção estiver definida como verdadeira, todas as células da coluna serão renderizadas como caixas de seleção. Uma caixa de seleção envia true ao servidor Salvar servlet, false caso contrário. No menu de cabeçalho, você também pode selecionar tudo ou selecionar nenhum. Essas opções serão ativadas se o cabeçalho selecionado for o cabeçalho de uma coluna de caixa de seleção.

No exemplo anterior, a coluna de seleção contém apenas caixas de seleção como checkbox="true".

Posição forçada

Os metadados de posição forçada forcedPosition permitem especificar onde a coluna é colocada na grade: 0 é o primeiro lugar e <number of="" columns="">-1 é a última posição. Qualquer outro valor será ignorado.

No exemplo anterior, a coluna de seleção é a primeira coluna como forcedPosition="0".

Query Servlet query-servlet

Por padrão, o servlet Query pode ser encontrado em /libs/wcm/core/components/bulkeditor/json.java. Você pode configurar outro caminho para recuperar os dados.

O servlet Query funciona da seguinte maneira: ele recebe uma consulta GQL e as colunas a serem retornadas, calcula os resultados e os envia de volta para o Editor de itens em massa como um fluxo JSON.

No caso do componente Lista de produtos, os dois parâmetros enviados para o servlet de consulta são os seguintes:

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

E o fluxo JSON é retornado da seguinte maneira:

{
  "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 ocorrência corresponde a um nó e suas propriedades e é exibida como uma linha na grade.

Você pode estender o servlet Query para retornar um modelo de herança complexo ou retornar nós armazenados em um local lógico específico. O servlet Query pode ser usado para fazer qualquer tipo de computação complexa. A grade pode exibir linhas que são uma agregação de vários nós no repositório. A modificação e o salvamento dessas linhas devem, nesse caso, ser gerenciados pelo Servlet de gravação.

Salvar servlet save-servlet

Na configuração padrão do Editor de itens em massa, cada linha é um nó e o caminho desse nó é armazenado no registro de linhas. O Editor de itens em massa mantém o link entre a linha e o nó pelo caminho jcr. Quando um usuário edita a grade, uma lista de todas as modificações é criada. Quando um usuário clica em Salvar, uma consulta POST é enviada para cada caminho com os valores de propriedades atualizados. Essa é a base do conceito Sling e funciona bem se cada célula for uma propriedade do nó. Mas se o servlet Query estiver implementado para fazer o cálculo de herança, esse modelo não poderá funcionar como uma propriedade retornada pelo servlet Query que pode ser herdada de outro nó.

O conceito de servlet Salvar é que as modificações não são publicadas diretamente em cada nó, mas são publicadas em um servlet que realiza o trabalho de gravação. Isso dá a esse servlet a possibilidade de analisar as modificações e salvar as propriedades no nó direito.

Cada propriedade atualizada é enviada para o servlet no seguinte formato:

  • Nome do parâmetro: <jcr path="">/<property name="">

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

  • Valor: <value>

    Exemplo: 12123

O servlet precisa saber onde a propriedade catalogCode está armazenada.

Uma implementação padrão para Salvar servlet está disponível em /libs/wcm/bulkeditor/save/POST.jsp e é usada no componente Lista de produtos. São necessários todos os parâmetros da solicitação (com um <jcr path="">/<property name=""> format) e grava as propriedades nos nós usando a API JCR. Também cria nó se eles não existirem (linhas inseridas na grade).

Não use o código padrão como está, pois ele reimplementa o que o servidor faz nativamente (um POST em <jcr path="">/<property name="">) e, portanto, é apenas um bom ponto de partida para criar um servlet Save que possa gerenciar um modelo de herança de propriedade.

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