작업 작업 사용자 지정

AEM Forms 작업 영역을 사용하면 작업 작업을 사용자 정의할 수 있습니다. 작업 작업을 사용자 지정하기 전에 AEM Forms 작업 영역 사용자 지정](/docs/experience-manager-64/forms/using/generic-steps-html-workspace-customization.html?lang=ko)에 대한 [일반 단계에 나열된 단계를 따라야 합니다.

텍스트 스타일 사용자 지정

텍스트 스타일을 사용자 정의하려면 /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;
}

이미지 사용자 지정

이미지를 사용자 정의하려면 /apps/ws/css/newStyle.css 파일에 다음 코드 조각을 추가합니다. 다음 코드 조각은 lock 작업의 이미지를 사용자 정의합니다.

#taskarea .taskActionsPopUp .lock, .task .taskActionsPopUp .lock{
    background: url(../images/icons.png) no-repeat -265px -6px;
}
노트

별도의 스타일을 추가하여 작업 목록 및 작업 세부 사항 작업에 대해 서로 다른 해상도의 이미지나 이미지를 표시할 수 있습니다. 예를 들어 '잠금' 작업을 변경합니다.

#taskarea .taskActionsPopUp .lock{
    background: url(../images/icons1.png) no-repeat -265px -6px;
}
.task .taskActionsPopUp .lock{
    background: url(../images/icons2.png) no-repeat -265px -6px;
}

작업에 대한 이미지만 표시

동작에 대한 이미지만 표시하려면 경로 작업에 사용되는 이미지를 사용자 정의합니다. 자세한 내용은 경로 작업 이미지를 참조하십시오.

작업 목록 작업 팝업 메뉴

  1. AEM Forms 작업 영역 작업 목록 작업 팝업 메뉴의 항목을 사용자 정의하려면 개발 패키지가 필요합니다. 개발 패키지 만들기에 대한 자세한 내용은 AEM Forms 작업 영역 코드 작성을 참조하십시오.

  2. /libs/ws/js/runtime/templates/task.html을 /apps/ws/js/runtime/templates/task.html에 복사하여 다음 코드 조각을 바꿉니다.

    // 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>
    
  3. /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;
    }
    

작업 세부 정보 작업 팝업 메뉴

세부 정보 작업 팝업 메뉴를 사용자 정의하려면 다음 단계를 수행합니다.

  • /libs/ws/js/runtime/templates/taskdetails.html 파일을 /apps/ws/js/runtime/templates/ 폴더에 복사합니다.
  • 텍스트 대신 앵커 태그 내에 아이콘 태그를 캡슐화합니다. 예를 들어, 아래에 나열된 *new code *는 앵커 태그 내에 icon 태그를 캡슐화합니다.
// 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>
  • 편집할 /apps/ws/js/registry.js 파일을 엽니다.
  • 다음 텍스트를 찾습니다.text!/lc/libs/ws/js/runtime/templates/taskdetails.html
  • 찾은 텍스트를 다음 텍스트로 바꿉니다.text!/lc/apps/ws/js/runtime/templates/taskdetails.html

지원 문의

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free