ルートアクションで使用されるイメージをカスタマイズするには、 カスタマイズの一般的な手順 この記事で説明する手順が続きます。
新しいルートアクション用に、次の場所にある CSS でイメージを定義するスタイルを追加します。
/apps/ws/css/newStyle.css
例えば、以下に示すように myStyle1
という名前の新しいスタイルを追加し、WebDAV クライアントを使用して画像ファイル myStyleIcon1.png
を /apps/ws/image
s フォルダーにアップロードします。
WebDAV アクセスについて詳しくは、https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html を参照してください。
ルートアクション名と同じスタイル名を使用することをお勧めします。
.myStyle1{
background-image: url('../images/myStyleIcon1.png');
}
タスクリストアクションのポップアップを作成します。AEM Forms Workspace コードのビルドを参照してください。これには、Dev パッケージを使用する必要があります。
/libs/ws/js/runtime/templates/task.html
を /apps/ws/js/runtime/templates/task.html
にコピーします。
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>
<%}%>
<%}%>
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>
<%}%>
<%}%>
<%}%>
/libs/ws/js/runtime/templates/taskdetails.html
を /apps/ws/js/runtime/templates/taskdetails.html
にコピーします。
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>
<%}%>
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>
<%}%>
<%}%>
/apps/ws/js/registry.js
を編集用に開いて、以下のテキストを探します。
"text!/lc/libs/ws/js/runtime/templates/taskdetails.html"
テキストを以下のテキストに置き換えます。
"text!/lc/apps/ws/js/runtime/templates/taskdetails.html"