Configuração do ícone para tipos dita personalizados/especializados (tópico ou mapa)
Declaração do problema
Com o esquema personalizado usado no AEM Guides, é possível criar tópicos personalizados ou tipos de mapa e com isso, você pode notar que os tipos de tópico/mapa personalizados não mostram o ícone no editor da Web ou na interface do usuário do Assets. Consulte a captura de tela abaixo para referência
Portanto, para atribuir um ícone aos tipos de tópico/mapa personalizados, é necessário fazer o seguinte:
- Localizar o tipo de tópico/mapa personalizado
- Escreva estilos para adicionar o ícone desejado para o tipo personalizado
Podemos implementar as etapas acima para mostrar o ícone no editor da Web (exibição do repositório), bem como na interface do usuário do Assets. Abaixo estão as etapas para ambos
Mostrando ícone de tópico/mapa personalizado na exibição do editor da Web
Etapa 1: Determine o tipo dita para o tópico/ap dita personalizado
- Abra a visualização de repositório no editor da web > abra o console do desenvolvedor no navegador
- Inspect o espaço de ícones ao lado do tópico/mapa listado
- Verifique a classe atribuída ao tópico personalizado
- Veja a captura de tela abaixo para obter mais detalhes
- Usaremos esta classe para atribuir ícone e escrever css para isto
Etapa 2: criar css e atribuir um ícone a este tipo dita
- Crie uma biblioteca do cliente em /apps, digamos que você crie um cq:ClientLibraryFolder no caminho desejado
- adicione categorias "apps.fmdita.xml_editor.page" a ela
- crie uma pasta "assets" neste diretório e adicione todos os ícones que deseja usar para tipos dita personalizados
- adicione um arquivo css na pasta da biblioteca do cliente, diga "tree-icons.css"
- adicionar o seguinte código a ele
.tree-item-icon {
&.custommaptype {
background-image: url('assets/custommap.svg')
}
&.customtopictype {
background-image: url('assets/customtopic.svg')
}
}
- adicione o css.txt na pasta da biblioteca do cliente e adicione a referência a "tree-icon.css" recém-criada
- salvar/implantar essas alterações
Consulte a captura de tela abaixo para obter mais detalhes.
E a saída final é mostrada abaixo da captura de tela
Exibição do ícone de tópico/mapa personalizado na interface do usuário do Assets
Etapa 1: determinando o tipo dita do tópico/mapa dita personalizado
- isso é explicado na Etapa 1 dos métodos anteriores
Etapa 2: Crie Javacscript para definir quais ícones serão carregados para o tipo dita personalizado para tipos de tópico/mapa personalizados
-
Crie uma biblioteca do cliente em /apps, digamos que você crie um cq:ClientLibraryFolder no caminho desejado
-
adicione as seguintes propriedades a ele:
- valor "categories"(cadeia de caracteres multivalor) como "dam.gui.admin.coral"
- valor "dependencies"(multi value string) como "libs.fmdita.versioncontrol"
-
-
Crie uma cópia do arquivo "/libs/fmdita/clientlibs/clientlibs/xmleditor/clientlib-dam/topic_type.js" neste diretório /apps
- edite o "topic_type.js" copiado e altere/adicione customtopictype na variável "typeImageNameMap"
- Você também pode alterar o caminho da pasta de imagens, alterando o valor da variável "parentImagePath" para onde os ícones personalizados são armazenados
-
Crie um arquivo chamado js.txt na pasta da biblioteca do cliente e adicione a referência a "topic_type.js"
-
salvar/implantar essas alterações
Consulte a captura de tela abaixo para obter mais detalhes.
E a saída final aparecerá como mostrado na captura de tela
