Peržiūrite versijai skirtą žinyno turinį:
AEM Forms workspace allows users to customize the task actions. Before customizing the task actions, ensure that you follow the steps listed at Generic steps for AEM Forms workspace customization.
/*-------- For Task Actions visible in task list task action popup ----------------------------------------------------*/ #taskarea .taskActionsPopUp{ position:absolute; right: 78px; top: 16px; display: none; } #taskarea .taskActionsPopUp ul{ list-style-type: none; padding: 0px; margin: 0px; border: 1px solid #B2B2B2; background: #1D1D1D; box-shadow: inset 0px 0px 11px 2px #1C1C1C; height:34px; } #taskarea .taskActionsPopUp li{ width: auto; height: 34px; float: left; border-right: 1px solid #B2B2B2; } #taskarea .taskActionsPopUp li i{ height: 34px; width: 20px; float: left; cursor: pointer; } #taskarea .taskActionsPopUp li a{ color: white; text-decoration: none; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; max-width: 150px; margin: 8px 10px 0px 4px; } /*-------- For Task Actions visible in task Details task action popup ----------------------------------------------------*/ .task .taskActionsPopUp { position: absolute; border: 1px solid #1D1D1D; z-index: 110; right: 5px; top : 35px; background: #2f2f2f; display:none; } .task .taskActionsPopUp ul{ list-style: none outside none; font-size: 13px; width: 160px; } .task .taskActionsPopUp li{ height: 33px; border-bottom: 1px solid #474747; width: 20px } .task .taskActionsPopUp ul a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; text-decoration: none; height: 26px; width: 133px; padding: 7px 0px 0px 27px; display: block; text-align: left; cursor: pointer; border-bottom: 1px solid #474747; }
To customize the images, add the following code snippet in the /apps/ws/css/newStyle.css file. The following code snippet customizes image for the lock action:
#taskarea .taskActionsPopUp .lock, .task .taskActionsPopUp .lock{ background: url(../images/icons.png) no-repeat -265px -6px; }
Pastaba:
Add separate styles to display different images or images of different resolution for the Task list and Task details actions. For example to change the 'lock' action:
#taskarea .taskActionsPopUp .lock{ background: url(../images/icons1.png) no-repeat -265px -6px; } .task .taskActionsPopUp .lock{ background: url(../images/icons2.png) no-repeat -265px -6px; }
To show only images for actions, customize the images used in route actions. For detailed information, see Images for Route Actions.
-
You require development package to customize items of the AEM Forms workspace Task list task action pop-up menu. For detailed information about creating development package, see Building AEM Forms workspace code.
-
Copy /libs/ws/js/runtime/templates/task.html to /apps/ws/js/runtime/templates/task.html replace the following code snippet:
// Orignal code <div class="taskActionsPopUp"> <!--START_TASKACTIONS--> <ul> <li class="arrow"></li> <%if(!isMustOpenToComplete && window.lcWorkspace != undefined && window.lcWorkspace.currentUser != undefined && window.lcWorkspace.currentUser.properties != undefined && window.lcWorkspace.currentUser.properties['/client/routes/formViewOnly'] == 'false'){%> <%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> <%}%> <%}%> <%}%> <%for(var i = 0; i<availableCommands.taskACLCommands.length; i++){%> <li class="<%= availableCommands.taskACLCommands[i]%>" alt="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.value')%>"> <a href="javascript:void(0);" title="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.tooltip')%>" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"><%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.value')%></a> </li> <%}%> <%for(var i = 0; i<availableCommands.otherCommands.length; i++){%> <li class="<%= availableCommands.otherCommands[i]%>" alt="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.value')%>"> <a href="javascript:void(0);" title="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.tooltip')%>" value="<%= availableCommands.otherCommands[i]%>" data-action="other"><%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.value')%></a> </li> <%}%> </ul> <!--END_TASKACTIONS--> <%}%> </div>
//New code <div class="taskActionsPopUp"> <!--START_TASKACTIONS--> <ul> <li class="arrow"></li> <%if(!isMustOpenToComplete && window.lcWorkspace != undefined && window.lcWorkspace.currentUser != undefined && window.lcWorkspace.currentUser.properties != undefined && window.lcWorkspace.currentUser.properties['/client/routes/formViewOnly'] == 'false'){%> <%if(routeList == null){%> <li> <a href="javascript:void(0);" title="<%= $.t('taskaction.directcommand.'+availableCommands.directCommands[0])%>" value="<%= availableCommands.directCommands[0]%>" data-action="route"></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"></a> </li> <%}%> <%}%> <%}%> <%for(var i = 0; i<availableCommands.taskACLCommands.length; i++){%> <li class="<%= availableCommands.taskACLCommands[i]%>" alt="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.value')%>"> <a href="javascript:void(0);" title="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.tooltip')%>" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"></a> </li> <%}%> <%for(var i = 0; i<availableCommands.otherCommands.length; i++){%> <li class="<%= availableCommands.otherCommands[i]%>" alt="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.value')%>"> <a href="javascript:void(0);" title="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.tooltip')%>" value="<%= availableCommands.otherCommands[i]%>" data-action="other"></a> </li> <%}%> </ul> <!--END_TASKACTIONS--> <%}%> </div>
-
.task .taskActionsPopUp ul{ list-style: none outside none; font-size: 13px; width: 160px; } To .task .taskActionsPopUp ul{ list-style: none outside none; font-size: 13px; } AND .task .taskActionsPopUp ul a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; text-decoration: none; height: 26px; width: 133px; padding: 7px 0px 0px 27px; display: block; text-align: left; cursor: pointer; border-bottom: 1px solid #474747; } To .task .taskActionsPopUp ul a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; text-decoration: none; height: 26px; width: 0px; padding: 7px 0px 0px 27px; display: block; text-align: left; cursor: pointer; border-bottom: 1px solid #474747; }
- Copy the /libs/ws/js/runtime/templates/taskdetails.html file to the /apps/ws/js/runtime/templates/ folder:
Encapsulate icon tag inside the anchor tag instead of text. For example, the new code listed below encapsulates the icon tag inside the anchor tag:
// Original code <div class="taskActionsPopUp"> <!--START_ACTIONBUTTONGROUP--> <ul> <li class="leftArrow"><a href="javascript:void(0);"><</a></li> <% if (isOwner && showDirectActions) { %> <% if (routeList === null) {%> <li class="routeAction"> <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="routeAction"> <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a> </li> <%}%> <%}%> <%}%> <% if (isOwner || (showACLActions && availableCommands.taskACLCommands !== null && availableCommands.taskACLCommands !== undefined && availableCommands.taskACLCommands.length > 0) || availableCommands.otherCommands.length > 2) { %> <%for (var i = 0; showACLActions && i < availableCommands.taskACLCommands.length; i++) {%> <li title="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.tooltip')%>"> <i class="<%= availableCommands.taskACLCommands[i]%>" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"/> <a href="javascript:void(0);" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"><%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.value')%></a> </li> <%}%> <%for (var i = 0; i < availableCommands.otherCommands.length; i++) {%> <li title="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.tooltip')%>"> <i class="<%= availableCommands.otherCommands[i]%>" value="<%= availableCommands.otherCommands[i]%>" data-action="other"/> <a href="javascript:void(0);" value="<%= availableCommands.otherCommands[i]%>" data-action="other"><%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.value')%></a> </li> <%}%> <%}%> <li class="rightArrow"><a href="javascript:void(0);">></a></li> </ul> <!--END_ACTIONBUTTONGROUP--> </div>
//New code <div class="taskActionsPopUp"> <!--START_ACTIONBUTTONGROUP--> <ul> <li class="leftArrow"><a href="javascript:void(0);"><</a></li> <% if (isOwner && showDirectActions) { %> <% if (routeList === null) {%> <li class="routeAction"> <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="routeAction"> <a href="javascript:void(0);" title="<%= availableCommands.directCommands[i]%>" value="<%= availableCommands.directCommands[i]%>" data-action="route"><%= availableCommands.directCommands[i]%></a> </li> <%}%> <%}%> <%}%> <% if (isOwner || (showACLActions && availableCommands.taskACLCommands !== null && availableCommands.taskACLCommands !== undefined && availableCommands.taskACLCommands.length > 0) || availableCommands.otherCommands.length > 2) { %> <%for (var i = 0; showACLActions && i < availableCommands.taskACLCommands.length; i++) {%> <li title="<%= $.t('taskaction.taskaclcommand.'+availableCommands.taskACLCommands[i]+'.tooltip')%>"> <a href="javascript:void(0);" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"> <i class="<%= availableCommands.taskACLCommands[i]%>" value="<%= availableCommands.taskACLCommands[i]%>" data-action="taskACL"/> </a> </li> <%}%> <%for (var i = 0; i < availableCommands.otherCommands.length; i++) {%> <li title="<%= $.t('taskaction.othercommand.'+availableCommands.otherCommands[i]+'.tooltip')%>"> <a href="javascript:void(0);" value="<%= availableCommands.otherCommands[i]%>" data-action="other"> <i class="<%= availableCommands.otherCommands[i]%>" value="<%= availableCommands.otherCommands[i]%>" data-action="other"/> </a> </li> <%}%> <%}%> <li class="rightArrow"><a href="javascript:void(0);">></a></li> </ul> <!--END_ACTIONBUTTONGROUP--> </div>
- Open the /apps/ws/js/registry.js file for editing.
- Locate the following text:
text!/lc/libs/ws/js/runtime/templates/taskdetails.html - Replace the located text with the following text: text!/lc/apps/ws/js/runtime/templates/taskdetails.html