Personalizar imágenes utilizadas en acciones de ruta customize-images-used-in-route-actions

Para personalizar las imágenes utilizadas en las acciones de ruta, siga los pasos que se describen en Pasos genéricos para la personalización y, a continuación, los pasos descritos en este artículo.

Imágenes de acciones de ruta images-for-route-actions

  1. Agregue los estilos que definen las imágenes en CSS en la siguiente ubicación para las nuevas acciones de ruta:

    /apps/ws/css/newStyle.css

    Por ejemplo: añada un nuevo estilo llamado myStyle1 como se muestra a continuación y cargue el archivo de imagen myStyleIcon1.png en la carpeta /apps/ws/images utilizando un cliente de WebDAV.

    note note
    NOTE
    Para obtener más información, consulte Acceso a WebDAV.
    note note
    NOTE
    Especifique que el nombre del estilo sea el mismo que el nombre de la acción de ruta en las preferencias.
    code language-css
    .myStyle1{
    
            background-image: url('../images/myStyleIcon1.png');
    
        }
    

Elemento emergente de acción de tarea Lista de tareas task-list-task-action-popup

  1. Cree un elemento emergente de acción de la lista de tareas. Consulte Creación del código de espacio de trabajo de AEM Forms. Requiere utilizar el paquete dev.

  2. Copie /libs/ws/js/runtime/templates/task.html en /apps/ws/js/runtime/templates/task.html.

  3. Si el nombre del estilo CSS es el mismo que el nombre de la acción de ruta proveniente del servidor, modifique el siguiente código en /apps/ws/js/runtime/templates/task.html:

    code language-jsp
    <%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. Si el nombre del estilo CSS es diferente del nombre de la acción de ruta proveniente del servidor, modifique el siguiente código en /apps/ws/js/runtime/templates/task.html. Esto agrega una pila de las condiciones del servlet if-else para asignar el estilo con el nombre de la acción de ruta.

<%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>
                <%}%>
            <%}%>
            <%}%>

Elemento emergente de acción de tarea Detalles de tarea task-details-task-action-popup

  1. Copie /libs/ws/js/runtime/templates/taskdetails.html en /apps/ws/js/runtime/templates/taskdetails.html.

  2. Si el nombre del estilo CSS es el mismo que el nombre de la acción de ruta proveniente del servidor, modifique el siguiente código en /apps/ws/js/runtime/templates/taskdetails.html:

    code language-jsp
    <%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. Si el nombre del estilo CSS es diferente del nombre de la acción de ruta proveniente del servidor, modifique el siguiente código en /apps/ws/js/runtime/templates/taskdetails.html. Agrega una pila de las condiciones del servlet if-else para asignar el estilo con el nombre de la acción de ruta.

    code language-jsp
    <%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. Abra el archivo /apps/ws/js/registry.js para editarlo y busque el siguiente texto :
    "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

  5. Reemplace el texto con lo siguiente:
    "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2