DocumentatieAEM 6.5Handboek

Afbeeldingen aanpassen die worden gebruikt in routehandelingen customize-images-used-in-route-actions

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Van toepassing op:
  • Experience Manager 6.5

Gemaakt voor:

  • Gebruiker
  • Ontwikkelaar

Om de beelden aan te passen die in routeacties worden gebruikt, voer de stappen uit die in ​ worden beschreven Algemene Stappen van aanpassing ​ door de stappen worden gevolgd die in dit artikel worden beschreven.

Afbeeldingen voor routeacties images-for-route-actions

  1. Voeg de stijlen die afbeeldingen in de CSS definiëren toe op de volgende locatie voor de nieuwe routeacties:

    /apps/ws/css/newStyle.css

    Bijvoorbeeld: voeg een nieuwe stijl toe genoemd myStyle1 zoals hieronder getoond en upload het beelddossier myStyleIcon1.png aan de /apps/ws/image omslag gebruikend een cliënt WebDAV.

    note note
    NOTE
    Voor meer informatie, zie ​ Toegang WebDAV ​.
    note note
    NOTE
    Voorkeur om de stijlnaam te gebruiken om de naam van de routeactie te zijn.
    code language-css 
    .myStyle1{

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

    }

Taaklijstactie pop-up task-list-task-action-popup

  1. Creeer pop-up de actie van de taaklijst, zie ​ de werkruimtecode van AEM Forms bouwen ​. Hiervoor moet het ontwikkelingspakket worden gebruikt.

  2. Kopieer /libs/ws/js/runtime/templates/task.html naar /apps/ws/js/runtime/templates/task.html .

  3. Als de naam van de CSS-stijl gelijk is aan de naam van de routeactie die van de server komt, wijzigt u de volgende 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>
            <%}%>
            <%}%>

  4. Als de naam van de CSS-stijl afwijkt van de naam van de routeactie die van de server komt, wijzigt u de volgende code in /apps/ws/js/runtime/templates/task.html . Er wordt een stapel toegevoegd van de servervoorwaarden van if-else om de stijl toe te wijzen aan de naam van de routeactie.

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

Taakdetails taakactie pop-up task-details-task-action-popup

  1. Kopieer /libs/ws/js/runtime/templates/taskdetails.html naar /apps/ws/js/runtime/templates/taskdetails.html .

  2. Als de naam van de CSS-stijl gelijk is aan de naam van de routeactie die van de server komt, wijzigt u de volgende 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>
                    <%}%>

  3. Als de naam van de CSS-stijl afwijkt van de naam van de routeactie die van de server komt, wijzigt u de volgende code in /apps/ws/js/runtime/templates/taskdetails.html . Er wordt een stapel met if-else servlet-voorwaarden toegevoegd om de stijl toe te wijzen aan de naam van de routeactie.

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

  4. Open /apps/ws/js/registry.js voor bewerking en zoek naar de volgende tekst:
    "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

  5. Vervang de tekst door:
    "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2