Anpassen der in Route-Aktionen verwendeten Bilder customize-images-used-in-route-actions
Um die in Route-Aktionen verwendeten Bilder anzupassen, führen Sie die Schritte in Generische Schritte zur Anpassung und anschließend die Schritte in diesem Artikel durch.
Bilder für Route-Aktionen images-for-route-actions
-
Fügen Sie im CSS am folgenden Speicherort die Stile hinzu, die die Bilder für die neuen Route-Aktionen definieren:
/apps/ws/css/newStyle.css
Ein Beispiel: Fügen Sie einen neuen Stil mit dem Namen
myStyle1
wie unten gezeigt hinzu und laden Sie die GrafikdateimyStyleIcon1.png
mithilfe eines WebDAV-Clients in den Ordner/apps/ws/image
hoch.note note NOTE Weitere Informationen erhalten Sie unter WebDAV-Zugriff. note note NOTE Verwenden Sie den Namen der Route-Aktion auch als den Stilnamen. code language-css .myStyle1{ background-image: url('../images/myStyleIcon1.png'); }
Popup für Aufgabenliste und Aufgabenaktion task-list-task-action-popup
-
Erstellen Sie ein Tasklisten-Aktionspopup siehe Erstellen von AEM Forms Workspace-Code. Dazu muss ein Dev-Paket verwendet werden.
-
Kopieren Sie
/libs/ws/js/runtime/templates/task.html
nach/apps/ws/js/runtime/templates/task.html
. -
Wenn der Name des CSS-Stils mit dem Namen der vom Server kommenden Route-Aktion übereinstimmt, ändern Sie den folgenden Code in
/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> <%}%> <%}%>
-
Wenn der Name des CSS-Stils nicht mit dem Namen der vom Server kommenden Route-Aktion übereinstimmt, ändern Sie den folgenden Code in
/apps/ws/js/runtime/templates/task.html
. Er fügt einen Stapel derif-else
-Servlet-Bedingungen hinzu, um den Stil dem Route-Aktionsnamen zuzuordnen.
<%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>
<%}%>
<%}%>
<%}%>
Popup bei Aufgabendetails-Aufgabenaktion task-details-task-action-popup
-
Kopieren Sie
/libs/ws/js/runtime/templates/taskdetails.html
nach/apps/ws/js/runtime/templates/taskdetails.html
. -
Wenn der Name des CSS-Stils mit dem Namen der vom Server kommenden Route-Aktion übereinstimmt, ändern Sie den folgenden Code in
/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> <%}%>
-
Wenn der Name des CSS-Stils nicht mit dem Namen der vom Server kommenden Route-Aktion übereinstimmt, ändern Sie den folgenden Code in
/apps/ws/js/runtime/templates/taskdetails.html
. Er fügt einen Stapel derif-else
-Servlet-Bedingungen hinzu, um den Stil dem Route-Aktionsnamen zuzuordnen.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> <%}%> <%}%>
-
Öffnen Sie
/apps/ws/js/registry.js
zur Bearbeitung und suchen Sie den folgenden Text:"text!/lc/libs/ws/js/runtime/templates/taskdetails.html"
-
Ersetzen Sie den Text durch Folgendes:
"text!/lc/apps/ws/js/runtime/templates/taskdetails.html"