自定义路由操作中使用的图像

要自定义路由操作中使用的图像,请执行自定义的常规步骤中所述的步骤,然后执行本文中所述的步骤。

路由操作的图像

  1. 在CSS中为新路由操作添加定义图像的样式,其位置如下:

    /apps/ws/css/newStyle.css

    例如:添加一个名为myStyle1的新样式,如下所示,并使用WebDAV客户端将图像文件myStyleIcon1.png上传到/apps/ws/images文件夹。

    注意

    有关WebDAV访问的详细信息,请参阅https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html

    注意

    希望使用样式名称与路由操作名称相同。

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

任务列表任务操作弹出窗口

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

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

  3. 如果CSS样式的名称与来自服务器的路由操作名称相同,请修改/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. 如果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>
                <%}%>
            <%}%>
            <%}%>

任务详细信息任务操作弹出窗口

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

  2. 如果CSS样式的名称与来自服务器的路由操作名称相同,请修改/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. 如果CSS样式的名称与来自服务器的路由操作名称不同,请修改/apps/ws/js/runtime/templates/taskdetails.html中的以下代码。 它添加一个if-else servlet条件堆栈,以将样式与路由操作名称进行映射。

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

在此页面上