文件AEM 6.4Forms 指南

自定義用於路由操作的影像 customize-images-used-in-route-actions

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • User
CAUTION
AEM 6.4已結束延伸支援，本檔案不再更新。 如需詳細資訊，請參閱 技術支援期. 尋找支援的版本 此處.

要自定義路由操作中使用的影像，請執行 自訂的一般步驟 以及本文所述步驟。

路由操作的影像 images-for-route-actions

  1. 為新路由操作在以下位置添加定義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

  1. 建立任務清單操作彈出式菜單，請參閱 建立AEM Forms工作區程式碼. 需要使用開發套件。

  2. 複製 /libs/ws/js/runtime/templates/task.html to /apps/ws/js/runtime/templates/task.html.

  3. 如果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>
            <%}%>
            <%}%>

  4. 如果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>
                <%}%>
            <%}%>
            <%}%>

「任務詳細資訊」任務操作彈出式菜單 task-details-task-action-popup

  1. 複製 /libs/ws/js/runtime/templates/taskdetails.html to /apps/ws/js/runtime/templates/taskdetails.html.

  2. 如果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>
                    <%}%>

  3. 如果CSS樣式的名稱與來自伺服器的路由操作名稱不同，請在 /apps/ws/js/runtime/templates/taskdetails.html. 它會新增 if-else servlet條件來映射具有路由操作名稱的樣式。

    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>
                <%}%>
            <%}%>

  4. 開啟 /apps/ws/js/registry.js 編輯並尋找下列文字：
    "text!/lc/libs/ws/js/runtime/templates/taskdetails.html"

  5. 將文字取代為：
    "text!/lc/apps/ws/js/runtime/templates/taskdetails.html"

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da