Personalização do console Sites (Interface clássica)

Adicionando uma coluna personalizada ao console Sites (siteadmin)

O console Administração de sites pode ser estendido para exibir colunas personalizadas. O console é criado com base em um objeto JSON que pode ser estendido pela criação de um serviço OSGI que implementa a interface ListInfoProvider. Esse serviço modifica o objeto JSON enviado para o cliente para criar o console.

Este tutorial passo a passo explica como exibir uma nova coluna no console Administração de sites implementando a interface ListInfoProvider. Ele consiste nas seguintes etapas:

  1. Criação do serviço OSGI e implantação do pacote que o contém no servidor AEM.
  2. (opcional) Testando o novo serviço emitindo uma chamada JSON para solicitar o objeto JSON usado para criar o console.
  3. Exibindo a nova coluna estendendo a estrutura de nós do console no repositório.
OBSERVAÇÃO

Este tutorial também pode ser usado para estender os seguintes consoles de administração:

  • o console Ativos digitais
  • o console Comunidade

Criando o serviço OSGI

A interface ListInfoProvider define dois métodos:

  • updateListGlobalInfo, para atualizar as propriedades globais da lista,
  • updateListItemInfo, para atualizar um item de lista única.

Os argumentos para ambos os métodos são:

  • request, o objeto de solicitação Sling HTTP associado,
  • info, o objeto JSON a ser atualizado, que é respectivamente a lista global ou o item de lista atual,
  • resource, um recurso Sling.

A implementação de amostra abaixo:

  • Adiciona uma propriedade starred para cada item, que é true se o nome da página for start com um e, caso contrário, false.

  • Adiciona uma propriedade starredCount, que é global para a lista e contém o número de itens de lista estrelados.

Para criar o serviço OSGI:

  1. No CRXDE Lite, crie um pacote.
  2. Adicione o código de amostra abaixo.
  3. Construa o pacote.

O novo serviço está funcionando.

package com.test;

import com.day.cq.commons.ListInfoProvider;
import com.day.cq.i18n.I18n;
import com.day.cq.wcm.api.Page;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;

@Component(metatype = false)
@Service(value = ListInfoProvider.class)
public class StarredListInfoProvider implements ListInfoProvider {

    private int count = 0;

    public void updateListGlobalInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        info.put("starredCount", count);
        count = 0; // reset for next execution
    }

    public void updateListItemInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        Page page = resource.adaptTo(Page.class);
        if (page != null) {
            // Consider starred if page name starts with 'e'
            boolean starred = page.getName().startsWith("e");
            if (starred) {
                count++;
            }
            I18n i18n = new I18n(request);
            info.put("starred", starred ? i18n.get("Yes") : i18n.get("No"));
        }
    }

}
CUIDADO
  • Sua implementação deve decidir, com base na solicitação e/ou no recurso fornecido, se deve ou não adicionar as informações ao objeto JSON.
  • Se sua implementação ListInfoProvider definir uma propriedade que já existe no objeto response, seu valor será substituído pelo valor fornecido.

Você pode usar classificação de serviço para gerenciar a ordem de execução de várias implementações ListInfoProvider.

Testando o Novo Serviço

Quando você abre o console Administração de sites e navega pelo site, o navegador emite uma chamada ajax para obter o objeto JSON usado para criar o console. Por exemplo, quando você navega para a pasta /content/geometrixx, a seguinte solicitação é enviada ao servidor AEM para criar o console:

https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

Para verificar se o novo serviço está em execução após ter implantado o pacote que o contém:

  1. Aponte seu navegador para o seguinte URL:
    https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

  2. A resposta deve exibir as novas propriedades da seguinte maneira:

screen_shot_2012-02-13at163046

Exibição da Nova Coluna

A última etapa consiste em adaptar a estrutura de nós do console Administração de sites para exibir a nova propriedade de todas as páginas do Geometrixx sobrepondo /libs/wcm/core/content/siteadmin. Proceda do seguinte modo:

  1. No CRXDE Lite, crie a estrutura de nós /apps/wcm/core/content com nós do tipo sling:Folder para refletir a estrutura /libs/wcm/core/content.

  2. Copie o nó /libs/wcm/core/content/siteadmin e cole-o abaixo de /apps/wcm/core/content.

  3. Copie o nó /apps/wcm/core/content/siteadmin/grid/assets para /apps/wcm/core/content/siteadmin/grid/geometrixx e altere suas propriedades:

    • Remover pageText

    • Defina pathRegex como /content/geometrixx(/.*?lang=pt-BR)?
      Isso tornará a configuração de grade ativa para todos os sites geometrixx.

    • Defina storeProxySuffix como .pages.json

    • Edite a propriedade com vários valores storeReaderFields e adicione o valor starred.

    • Para ativar a funcionalidade MSM, adicione os seguintes parâmetros MSM à propriedade multi-String storeReaderFields:

      • msm:isSource
      • msm:isInBlueprint
      • msm:isLiveCopy
  4. Adicione um nó starred (do tipo nt:unstructure) abaixo de /apps/wcm/core/content/siteadmin/grid/geometrixx/columns com as seguintes propriedades:

    • dataIndex: starred do tipo String

    • cabeçalho: Starred do tipo String

    • xtype: gridcolumn do tipo String

  5. (opcional) Solte as colunas que não deseja exibir em /apps/wcm/core/content/siteadmin/grid/geometrixx/columns

  6. /siteadmin é um caminho vaidoso que, como padrão, aponta para /libs/wcm/core/content/siteadmin.
    Para redirecionar isso para sua versão do siteadmin em /apps/wcm/core/content/siteadmin, defina a propriedade sling:vanityOrder para ter um valor superior ao definido em /libs/wcm/core/content/siteadmin. O valor padrão é 300, portanto qualquer valor maior é adequado.

  7. Vá para o console Administração de sites e navegue até o site do Geometrixx:
    https://localhost:4502/siteadmin#/content/geometrixx.

  8. A nova coluna chamada Starred está disponível, exibindo informações personalizadas da seguinte maneira:

screen_shot_2012-02-14at104602

CUIDADO

Se várias configurações de grade corresponderem ao caminho solicitado definido pela propriedade pathRegex, a primeira será usada, e não a mais específica, o que significa que a ordem das configurações é importante.

Pacote de amostra

O resultado deste tutorial está disponível no pacote Personalizando o console de administração de sites no Compartilhamento de pacotes.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now