’area di lavoro di AEM Forms consente agli utenti di personalizzare le azioni dell’attività. Prima di personalizzare le azioni dell'attività, accertarsi di seguire i passaggi elencati in Passaggi generici per personalizzazione dell'area di lavoro AEM Forms.
Per personalizzare lo stile del testo, aggiungete il seguente frammento di codice nel file /apps/ws/css/newStyle.css
:
/*-------- 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;
}
Per personalizzare le immagini, aggiungete il seguente frammento di codice nel file /apps/ws/css/newStyle.css
. Il frammento di codice seguente personalizza l'immagine per l'azione lock:
#taskarea .taskActionsPopUp .lock, .task .taskActionsPopUp .lock{
background: url(../images/icons.png) no-repeat -265px -6px;
}
Aggiungere stili separati per visualizzare immagini o immagini di diversa risoluzione per l'elenco Attività e le azioni Dettagli Attività. Ad esempio, per modificare l'azione di blocco:
#taskarea .taskActionsPopUp .lock{
background: url(../images/icons1.png) no-repeat -265px -6px;
}
.task .taskActionsPopUp .lock{
background: url(../images/icons2.png) no-repeat -265px -6px;
}
Per visualizzare solo le immagini per le azioni, personalizzare le immagini utilizzate per le azioni di route. Per informazioni dettagliate, vedere Immagini per le azioni route.
È necessario che il pacchetto di sviluppo personalizzate gli elementi del menu a comparsa Azioni dell'area di lavoro di AEM Forms . Per informazioni dettagliate sulla creazione del pacchetto di sviluppo, vedere Creazione codice dell'area di lavoro AEM Forms.
Copiate /libs/ws/js/runtime/templates/task.html in /apps/ws/js/runtime/templates/task.html
sostituire il frammento di codice seguente:
// 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>
Rimuovere la larghezza fissa assegnata a un tag di ancoraggio dal file /apps/ws/css/newStyle.css
:
.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;
}
Per personalizzare il menu a comparsa Azioni attività Dettagli, effettuate le seguenti operazioni:
/apps/ws/js/runtime/templates/
:// 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>
text!/lc/libs/ws/js/runtime/templates/taskdetails.html
text!/lc/apps/ws/js/runtime/templates/taskdetails.html