DocumentazioneAEM 6.4Guida di Forms

Personalizzare le immagini utilizzate nelle azioni del percorso customize-images-used-in-route-actions

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • User
CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

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 images-for-route-actions

  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.

    note note
    NOTE
    Per ulteriori informazioni sull'accesso a WebDAV, vedi https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
    note note
    NOTE
    Preferisci utilizzare il nome dello stile come nome dell'azione di route.
    code language-css 
    .myStyle1{

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

    }

  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:

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

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

  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:

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

  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.

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

  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"

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da