Personalizar imagens usadas nas ações de roteiro

Para personalizar as imagens usadas nas ações de rota, execute as etapas descritas em Etapas genéricas de personalização seguido das 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 myStyle1conforme mostrado abaixo e faça upload do arquivo de imagem myStyleIcon1.png para o /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

   Prefira usar o nome do estilo como igual ao nome da ação da rota.

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

Pop-up de ação de tarefa da Lista de Tarefas

1. Pop-up de ação Criar uma 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 no /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 de tarefa de 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 no /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. Abertura /apps/ws/js/registry.js para editar e procurar o seguinte texto:
   "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

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

Recursos do Business.Adobe.com

Content Intelligence Responsive Forms Document Generation Dynamic Media Customer Experience Management Content Management