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

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

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

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

Ao trabalhar com o editor em massa, há vários parâmetros de consulta que você pode adicionar ao URL para chamar o editor em massa com uma configuração específica. Se você quiser que o editor em massa seja sempre usado com uma determinada configuração, por exemplo, como no componente Lista de produtos , será necessário modificar bulkeditor.jsp (localizado em /libs/wcm/core/components/bulkeditor) ou criar 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 em massa é exibido sem o Caminho raiz o campo 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 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 abreviatura é rp. Se o nome longo não estiver definido, o 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
consulta de pesquisa
contentMode / cm
Booleano
quando verdadeiro, o modo de conteúdo é ativado
colsValue / cv
String[]
propriedades pesquisadas (valores marcados de colsSelection exibidos como caixas de seleção)
extraCols / ec
String[]
propriedades pesquisadas extras (exibidas em um campo de texto separado por vírgulas)
initialSearch / is
Booleano
quando true, a consulta é executada no carregamento da página
colsSelection / cs
String[]
seleção de propriedades pesquisadas (exibida 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 / HI
Booleano
quando verdadeiro, oculta o campo de colunas extras
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 de grade
hideInsertButton / hinsertb
Booleano
quando verdadeiro, oculta o botão de inserção de grade
hideDeleteButton / hdelb
Booleano
quando verdadeiro, oculta o botão de exclusão de grade
hidePathCol / hpc
Booleano
quando true, oculta a coluna "caminho" da grade

Desenvolvimento de um componente baseado no editor em massa: o componente 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 em massa e fornece uma descrição do componente existente do Geometrixx com base no editor 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 na variável Editar , que contém um widget BulkEditor. (Esse editor em massa é exatamente o mesmo que o acessível em /etc/importers/bulkeditor.html ou pelo menu Ferramentas ). O componente Lista de produtos foi configurado para funcionalidade específica e limitada do editor em massa. Toda parte do editor em massa (ou componentes derivados do editor em massa) pode ser configurada.

Com o editor em massa, é possível 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 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 de HTML.
  • Caixa de diálogo Editar, que é onde você define a configuração do Editor em massa. Configure a caixa de diálogo para atender à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 em massa para obter informações sobre todas as propriedades de configuração.

Esta é uma representação XML dos subnós da caixa 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>

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

Todas as partes do editor em massa podem ser configuradas. A tabela a seguir lista todas as propriedades de configuração do editor em massa.

Nome da propriedade
Definição
rootPath
Caminho raiz de pesquisa
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ó do resultado da 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 consulta no carregamento da página
colsSelection
Seleção de propriedades pesquisadas (exibida 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 true)
searchPanelCollapsed
Verdadeiro para recolher o painel de pesquisa por padrão
hideRootPath
Ocultar campo de caminho raiz
hideQueryParams
Ocultar campo de consulta
hideContentMode
Campo Ocultar modo de conteúdo
hideColsSelection
Ocultar campo de seleção de colunas
hideExtraCols
Ocultar campo de cores extras
hideSearchButton
Ocultar botão de pesquisa
hideSaveButton
Botão Ocultar salvar
hideExportButton
Botão Ocultar exportação
hideImportButton
Botão Ocultar importação
hideResultNumber
Ocultar texto do número do resultado da pesquisa em grade
hideInsertButton
Ocultar botão de inserção de grade
hideDeleteButton
Botão Ocultar exclusão de grade
hidePathCol
Ocultar coluna de "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 é inserida
saveButton
Salvar configuração do widget de botão
searchButton
Configuração do widget de botão de pesquisa
exportButton
Configuração do widget de botão Exportar
importButton
Configuração do widget de botão Importar
searchPanel
Configuração do widget do painel de pesquisa
grade
Configuração do widget de grade
loja
Configuração da loja
colModel
Configuração do modelo da 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 dos metadados da coluna. As possíveis propriedades são (aplicadas a todas as células da coluna):

  • cellStyle: estilo html

  • cellCls: classe css

  • readOnly: true 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 número de colunas-1)

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

É possível 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 em massa tem três configurações de coluna:

  • Nome da classe CSS da Célula (cellCls): um nome de classe CSS adicionado a cada célula da coluna configurada.
  • Estilo da célula (cellStyle): um estilo HTML 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 true, todas as células da coluna serão renderizadas como caixas de seleção. Uma caixa marcada envia true para o servlet Save do servidor, false caso contrário. No menu de cabeçalho, também é possível 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 caixa de seleção="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".

Servlet de consulta 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: recebe uma consulta GQL e as colunas a serem retornadas, calcula os resultados e envia os resultados para o editor em massa como um fluxo JSON.

No caso do componente Lista de produtos , os dois parâmetros enviados para o servlet 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 é o seguinte:

{
  "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 nós de retorno 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 então 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 gerenciadas pelo Servlet Salvar.

Salvar servlet save-servlet

Na configuração padrão do editor em massa, cada linha é um nó e o caminho desse nó é armazenado no registro de linha. O editor 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 do 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 pode ser herdada de outro nó.

O conceito de servlet Save é que as modificações não são publicadas diretamente em cada nó, mas são publicadas em um servlet que faz o trabalho de salvamento. 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 é armazenada.

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

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

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e