ルートアクションで使用されるイメージのカスタマイズ

ルートアクションで使用されるイメージをカスタマイズするには、 カスタマイズの一般的な手順 この記事で説明する手順が続きます。

ルートアクションのイメージ

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

   /apps/ws/css/newStyle.css

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

   メモ

   WebDAV アクセスについて詳しくは、https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html を参照してください。

   メモ

   ルートアクション名と同じスタイル名を使用することをお勧めします。

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

タスクリストタスクアクションポップアップ

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 で以下のコードを変更します。

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

タスクの詳細タスクアクションポップアップ

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

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

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

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

Business.Adobe.com リソース

Embedded Charts Managed Cloud Version History Dynamic Forms Digital Asset Management Digital Signage