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 suivi 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 sur l’accès à WebDAV, voir https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html. 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 tâche Liste de 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-none <%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-none <%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-none <%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"