要自定义路由操作中使用的图像,请执行自定义的一般步骤中描述的步骤,然后执行本文中描述的步骤。
在CSS中为新路由操作的以下位置添加定义图像的样式:
/apps/ws/css/newStyle.css
例如:添加名为myStyle1
的新样式,如下所示,并使用WebDAV客户端将图像文件myStyleIcon1.png
上传到/apps/ws/image
s文件夹。
有关WebDAV访问的更多信息,请参阅https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html。
希望使用样式名称与路由操作名称相同。
.myStyle1{
background-image: url('../images/myStyleIcon1.png');
}
创建任务列表操作弹出窗口,请参阅构建AEM Forms工作区代码。 需要使用开发包。
将/libs/ws/js/runtime/templates/task.html
复制到/apps/ws/js/runtime/templates/task.html
。
如果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>
<%}%>
<%}%>
如果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>
<%}%>
<%}%>
<%}%>
将/libs/ws/js/runtime/templates/taskdetails.html
复制到/apps/ws/js/runtime/templates/taskdetails.html
。
如果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>
<%}%>
如果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>
<%}%>
<%}%>
打开/apps/ws/js/registry.js
进行编辑,并查找以下文本:
"text!/lc/libs/ws/js/runtime/templates/taskdetails.html"
将文本替换为以下内容:
"text!/lc/apps/ws/js/runtime/templates/taskdetails.html"