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

検索
Experience Manager 6.3 Forms マニュアル

目次

対象アプリケーション: Experience Manager 6.3 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

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

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

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

    /apps/ws/css/newStyle.css

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

    注意：

    WebDAV アクセスの詳細については、http://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"