Personalizzare le immagini utilizzate nelle azioni del percorso

Per personalizzare le immagini utilizzate nelle azioni di route, esegui i passaggi descritti in Passaggi generici di personalizzazione seguiti dai passaggi descritti nel presente articolo.

Immagini per le azioni di route

1. Aggiungi gli stili che definiscono le immagini nel CSS nella posizione seguente per le nuove azioni di route:

   /apps/ws/css/newStyle.css

   Ad esempio: Aggiungi un nuovo stile denominato myStyle1come mostrato di seguito e carica il file immagine myStyleIcon1.png al /apps/ws/imageCartella s utilizzando un client WebDAV.

   NOTA

   Per ulteriori informazioni sull'accesso a WebDAV, vedi https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.

   NOTA

   Preferisci utilizzare il nome dello stile come nome dell'azione di route.

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

Popup di azioni attività Elenco attività

1. Crea una finestra a comparsa di azioni elenco attività, vedi Creazione del codice dell’area di lavoro di AEM Forms. Richiede l'utilizzo del pacchetto di sviluppo.

2. Copia /libs/ws/js/runtime/templates/task.html a /apps/ws/js/runtime/templates/task.html.

3. Se il nome dello stile CSS è uguale al nome dell’azione di route proveniente dal server, modifica il seguente codice in /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 il nome dello stile CSS è diverso dal nome dell’azione di route proveniente dal server, modifica il seguente codice in /apps/ws/js/runtime/templates/task.html. Aggiunge una pila di if-else condizioni del servlet per mappare lo stile con il nome dell'azione di route.

<%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 di azioni attività Dettagli attività

1. Copia /libs/ws/js/runtime/templates/taskdetails.html a /apps/ws/js/runtime/templates/taskdetails.html.

2. Se il nome dello stile CSS è uguale al nome dell’azione di route proveniente dal server, modifica il seguente codice in /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 il nome dello stile CSS è diverso dal nome dell’azione di route proveniente dal server, modifica il seguente codice in /apps/ws/js/runtime/templates/taskdetails.html. Aggiunge una pila di if-else condizioni del servlet per mappare lo stile con il nome dell'azione di route.

   <%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. Apri /apps/ws/js/registry.js per modificare e cercare il seguente testo :
   "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

5. Sostituisci il testo con quanto segue:
   "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

Risorse Business.Adobe.com

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