ドキュメントAEM 6.5ユーザーガイド

ルートアクションで使用されるイメージのカスタマイズ customize-images-used-in-route-actions

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • ユーザー
  • 開発者

ルートアクションで使用される画像をカスタマイズするには、カスタマイズの一般的な手順で説明されている手順を実行した後、この記事で説明されている手順を実行します。

ルートアクションの画像 images-for-route-actions

  1. 新しいルートアクション用に、次の場所にある CSS で画像を定義するスタイルを追加します。

    /apps/ws/css/newStyle.css

    例えば、以下に示すように myStyle1 という名前の新しいスタイルを追加し、WebDAV クライアントを使用して画像ファイル myStyleIcon1.png を /apps/ws/images フォルダーにアップロードします。

    note note
    NOTE
    詳しくは、WebDAV アクセスを参照してください。
    note note
    NOTE
    ルートアクション名と同じスタイル名を使用することをお勧めします。
    code language-css 
    .myStyle1{

        background-image: url('../images/myStyleIcon1.png');

    }

タスクのリストタスクアクションポップアップ task-list-task-action-popup

  1. タスクリストアクションのポップアップを作成します。AEM Forms Workspace コードのビルドを参照してください。これには、Dev パッケージを使用する必要があります。

  2. /libs/ws/js/runtime/templates/task.html を /apps/ws/js/runtime/templates/task.html にコピーします。

  3. CSS スタイルの名前がサーバーからのルートアクションの名前と同じである場合は、/apps/ws/js/runtime/templates/task.html で以下のコードを変更します。

    code language-jsp 
    <%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 サーブレット条件のスタックを追加してルートアクション名でスタイルをマップします。

<%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 を /apps/ws/js/runtime/templates/taskdetails.html にコピーします。

  2. CSS スタイルの名前がサーバーからのルートアクションの名前と同じである場合は、/apps/ws/js/runtime/templates/taskdetails.html で以下のコードを変更します。

    code language-jsp 
    <%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 サーブレット条件のスタックを追加してルートアクション名でスタイルをマップします。

    code language-jsp 
    <%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
19ffd973-7af2-44d0-84b5-d547b0dffee2