Personalizar imagens usadas em ações de rota

Última atualização em 2023-05-04
  • Criado para:
  • User
ATENÇÃO

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.

Para personalizar as imagens usadas nas ações de rota, execute as etapas descritas em Etapas genéricas da personalização seguido pelas etapas descritas neste artigo.

Imagens para ações de rota

  1. Adicione os estilos que definem imagens no CSS no seguinte local para as novas ações de rota:

    /apps/ws/css/newStyle.css

    Por exemplo: Adicione um novo estilo chamado myStyle1como mostrado abaixo e faça upload do arquivo de imagem myStyleIcon1.png para /apps/ws/imagePasta s usando um cliente WebDAV.

    OBSERVAÇÃO

    Para obter mais informações sobre o acesso WebDAV, consulte https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.

    OBSERVAÇÃO

    Prefere usar o nome do estilo para ser igual ao nome da ação de rota.

    .myStyle1{
    
            background-image: url('../images/myStyleIcon1.png');
    
        }
    

Pop-up de ação de tarefa Lista de tarefas

  1. Crie um pop-up de ação da lista de tarefas, consulte Criação do código do espaço de trabalho do AEM Forms. É necessário usar o pacote dev.

  2. Copiar /libs/ws/js/runtime/templates/task.html para /apps/ws/js/runtime/templates/task.html.

  3. Se o nome do estilo CSS for igual ao nome da ação de rota proveniente do servidor, modifique o seguinte código em /apps/ws/js/runtime/templates/task.html:

    <%if(routeList == null){%>
                <li>
                    <a href="javascript:void(0);" title="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%>" value="<%= availableCommands.directCommands[0]%>" data-action="route"><%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%></a>
                </li>
                <%}else{%>
                <%for(var i = 0; i<availableCommands.directCommands.length; i++){%>
                <li>
                    <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                </li>
                <%}%>
                <%}%>
    
    To
    
    <%if(routeList == null){%>
                <li class="<%= availableCommands.directCommands[0]%>" alt="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0]+'.value')%>">
                    <a href="javascript:void(0);" title="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%>" value="<%= availableCommands.directCommands[0]%>" data-action="route"><%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%></a>
                </li>
                <%}else{%>
                <%for(var i = 0; i<availableCommands.directCommands.length; i++){%>
                <li class="<%= availableCommands.directCommands[i]%>" alt="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[i]+'.value')%>">
                    <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                </li>
                <%}%>
                <%}%>
    
  4. Se o nome do estilo CSS for diferente do nome da ação de rota proveniente do servidor, modifique o seguinte código em /apps/ws/js/runtime/templates/task.html. Ele adiciona uma pilha de if-else condições do servlet para mapear o estilo com o nome da ação de rota.

<%if(routeList == null){%>
            <li>
                <a href="javascript:void(0);" title="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%>" value="<%= availableCommands.directCommands[0]%>" data-action="route"><%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%></a>
            </li>
            <%}else{%>
            <%for(var i = 0; i<availableCommands.directCommands.length; i++){%>
            <li>
                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
            </li>
            <%}%>
            <%}%>

To

<%if(routeList == null){%>
            <li class="<%= availableCommands.directCommands[0]%>" alt="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0]+'.value')%>">
                <a href="javascript:void(0);" title="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%>" value="<%= availableCommands.directCommands[0]%>" data-action="route"><%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%></a>
            </li>
            <%}else{%>
            <%for(var i = 0; i<availableCommands.directCommands.length; i++){%>
                <%if(availableCommands.directCommands[i].equals("myAction1")){%>
                     <li class="myStyle1" alt="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[i]+'.value')%>">
                         <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                     </li>
                <%}else if(availableCommands.directCommands[i].equals("myAction2")){%>
                     <li class="myStyle2" alt="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[i]+'.value')%>">
                         <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                     </li>
                <%}%>
            <%}%>
            <%}%>

pop-up de ação da tarefa Detalhes da tarefa

  1. Copiar /libs/ws/js/runtime/templates/taskdetails.html para /apps/ws/js/runtime/templates/taskdetails.html.

  2. Se o nome do estilo CSS for igual ao nome da ação de rota proveniente do servidor, modifique o seguinte código em /apps/ws/js/runtime/templates/taskdetails.html:

    <%for (var i = 0; i < availableCommands.directCommands.length; i++) {%>
                            <li class="routeAction">
                                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                            </li>
                        <%}%>
    
    To
    
    <%for (var i = 0; i < availableCommands.directCommands.length; i++) {%>
                            <li class="routeAction">
                                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route">
                                <i class="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"/>
                                </a>
                            </li>
                        <%}%>
    
  3. Se o nome do estilo CSS for diferente do nome da ação de rota proveniente do servidor, modifique o seguinte código em /apps/ws/js/runtime/templates/taskdetails.html. Ele adiciona uma pilha de if-else condições do servlet para mapear o estilo com o nome da ação de rota.

    <%for (var i = 0; i < availableCommands.directCommands.length; i++) {%>
                            <li class="routeAction">
                                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a>
                            </li>
                        <%}%>
    
    To
    
    <%for (var i = 0; i < availableCommands.directCommands.length; i++) {%>
                    <%if(availableCommands.directCommands[i].equals("myAction1")){%>
                        <li class="routeAction">
                                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route">
                                <i class="myStyle1" value="<%= availableCommands.directCommands[i]%>" data-action="route"/>
                                </a>
                            </li>
                    <%}else if(availableCommands.directCommands[i].equals("myAction2")){%>
                        <li class="routeAction">
                                <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route">
                                <i class="myStyle2" value="<%= availableCommands.directCommands[i]%>" data-action="route"/>
                                </a>
                            </li>
                    <%}%>
                <%}%>
    
  4. Abrir /apps/ws/js/registry.js para editar e procurar o seguinte texto :
    "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

  5. Substitua o texto pelo seguinte:
    "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

Nesta página