Personnaliser les images utilisées dans les actions d’itinéraire customize-images-used-in-route-actions
Pour personnaliser les images utilisées dans les actions d’itinéraire, suivez la procédure décrite à la section Procédure générique de personnalisation, suivie des étapes décrites dans cet article.
Images pour les actions d’itinéraire images-for-route-actions
-
Ajoutez les styles définissant les images dans le CSS à l’emplacement suivant pour les nouvelles actions d’itinéraire :
/apps/ws/css/newStyle.css
Par exemple : ajoutez un nouveau style appelé
myStyle1
comme indiqué ci-dessous et chargez le fichier imagemyStyleIcon1.png
dans le dossier/apps/ws/image
à l’aide d’un client WebDAV.note note NOTE Pour plus d’informations, voir Accès WebDAV. note note NOTE Préférez l’utilisation du nom du style pour qu’il soit identique au nom de l’action d’itinéraire. code language-css .myStyle1{ background-image: url('../images/myStyleIcon1.png'); }
Fenêtre contextuelle d’action de la liste des tâches task-list-task-action-popup
-
Créez un menu déroulant d’actions de liste de tâches, voir Création du code de l’espace de travail AEM Forms. Vous devez utiliser le package de développement.
-
Copiez
/libs/ws/js/runtime/templates/task.html
dans/apps/ws/js/runtime/templates/task.html
. -
Si le nom du style CSS est identique au nom de l’action d’itinéraire provenant du serveur, modifiez le code suivant dans
/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> <%}%> <%}%>
-
Si le nom du style CSS est différent du nom de l’action d’itinéraire provenant du serveur, modifiez le code suivant dans
/apps/ws/js/runtime/templates/task.html
. Il ajoute une pile des conditions de servletif-else
pour mapper le style avec le nom de l’action d’itinéraire.
<%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>
<%}%>
<%}%>
<%}%>
Menu déroulant de l’action de tâche Détails de la tâche task-details-task-action-popup
-
Copiez
/libs/ws/js/runtime/templates/taskdetails.html
dans/apps/ws/js/runtime/templates/taskdetails.html
. -
Si le nom du style CSS est identique au nom de l’action d’itinéraire provenant du serveur, modifiez le code suivant dans
/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> <%}%>
-
Si le nom du style CSS est différent du nom de l’action d’itinéraire provenant du serveur, modifiez le code suivant dans
/apps/ws/js/runtime/templates/taskdetails.html
. Il ajoute une pile des conditions de servletif-else
pour mapper le style avec le nom de l’action d’itinéraire.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> <%}%> <%}%>
-
Ouvrez
/apps/ws/js/registry.js
pour le modifier et recherchez le texte suivant :"text!/lc/libs/ws/js/runtime/templates/taskdetails.html"
-
Remplacez le texte par le texte suivant :
"text!/lc/apps/ws/js/runtime/templates/taskdetails.html"