경로 작업에 사용되는 이미지 사용자 지정 customize-images-used-in-route-actions
경로 작업에 사용되는 이미지를 사용자 지정하려면 사용자 지정의 일반 단계 다음에 이 문서에 설명된 단계를 따릅니다.
경로 지정 작업에 대한 이미지 images-for-route-actions
-
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
-
작업 목록 작업 팝업 만들기 AEM Forms 작업 공간 코드 작성. 개발 패키지를 사용해야 합니다.
-
복사
/libs/ws/js/runtime/templates/task.html
to/apps/ws/js/runtime/templates/task.html
. -
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> <%}%> <%}%>
-
CSS 스타일의 이름이 서버에서 오는 경로 작업 이름과 다른 경우 다음 코드를에서 수정합니다.
/apps/ws/js/runtime/templates/task.html
. 이렇게 하면if-else
스타일을 경로 작업 이름과 매핑할 서블릿 조건.
<%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
-
복사
/libs/ws/js/runtime/templates/taskdetails.html
to/apps/ws/js/runtime/templates/taskdetails.html
. -
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> <%}%>
-
CSS 스타일의 이름이 서버에서 오는 경로 작업 이름과 다른 경우 다음 코드를에서 수정합니다.
/apps/ws/js/runtime/templates/taskdetails.html
. 이렇게 하면if-else
스타일을 경로 작업 이름과 매핑할 서블릿 조건.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> <%}%> <%}%>
-
열기
/apps/ws/js/registry.js
를 편집하려면 다음 텍스트를 찾습니다."text!/lc/libs/ws/js/runtime/templates/taskdetails.html"
-
텍스트를 다음으로 바꿉니다.
"text!/lc/apps/ws/js/runtime/templates/taskdetails.html"