DocumentatieAEM 6.4Gids voor formulieren

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

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

Gemaakt voor:

  • User
CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Voer de in Algemene stappen voor aanpassing gevolgd door de stappen 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: Een nieuwe stijl toevoegen met de naam myStyle1zoals hieronder wordt getoond en uploadt het beelddossier myStyleIcon1.png aan de /apps/ws/images met een WebDAV-client.

    note note
    NOTE
    Voor meer informatie over WebDAV toegang, zie https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
    note note
    NOTE
    Voorkeur om de stijlnaam te gebruiken om het zelfde als 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. Een pop-upactie voor een taaklijst maken, zie AEM Forms-werkruimtecode samenstellen. Hiervoor moet het ontwikkelingspakket worden gebruikt.

  2. Kopiëren /libs/ws/js/runtime/templates/task.html tot /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-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. Als de naam van de CSS-stijl verschilt 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 if-else servlet voorwaarden om de stijl met de naam van de routeactie in kaart te brengen.

<%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. Kopiëren /libs/ws/js/runtime/templates/taskdetails.html tot /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-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. Als de naam van de CSS-stijl verschilt 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 toegevoegd if-else servlet voorwaarden om de stijl met de naam van de routeactie in kaart te brengen.

    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. Openen /apps/ws/js/registry.js voor het bewerken van en het zoeken 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
a6ebf046-2b8b-4543-bd46-42a0d77792da