文档AEM 6.4Forms 指南

自定义路由操作中使用的图像 customize-images-used-in-route-actions

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

创建对象：

  • User
CAUTION
AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

要自定义在路由操作中使用的图像，请执行 自定义的一般步骤 执行本文所述的步骤。

用于路由操作的图像 images-for-route-actions

  1. 在CSS中为新路由操作的以下位置添加定义图像的样式：

    /apps/ws/css/newStyle.css

    例如：添加名为 myStyle1如下所示，并上传图像文件 myStyleIcon1.png 到 /apps/ws/image使用WebDAV客户端的文件夹。

    note note
    NOTE
    有关WebDAV访问的更多信息，请参阅 https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
    note note
    NOTE
    希望使用样式名称与路由操作名称相同。
    code language-css 
    .myStyle1{

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

    }

任务列表任务操作弹出窗口 task-list-task-action-popup

  1. 创建任务列表操作弹出窗口，请参阅 构建AEM Forms工作区代码. 需要使用开发包。

  2. 复制 /libs/ws/js/runtime/templates/task.html to /apps/ws/js/runtime/templates/task.html.

  3. 如果CSS样式的名称与来自服务器的路由操作名称相同，请在 /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. 如果CSS样式的名称与来自服务器的路由操作名称不同，请在 /apps/ws/js/runtime/templates/task.html. 它会添加 if-else servlet条件以使用路由操作名称映射样式。

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

“任务详细信息”任务操作弹出窗口 task-details-task-action-popup

  1. 复制 /libs/ws/js/runtime/templates/taskdetails.html to /apps/ws/js/runtime/templates/taskdetails.html.

  2. 如果CSS样式的名称与来自服务器的路由操作名称相同，请在 /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. 如果CSS样式的名称与来自服务器的路由操作名称不同，请在 /apps/ws/js/runtime/templates/taskdetails.html. 它会添加一堆 if-else servlet条件以使用路由操作名称映射样式。

    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. 打开 /apps/ws/js/registry.js 进行编辑和查找以下文本：
    "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

  5. 将文本替换为以下内容：
    "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

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