テーマのカスタマイズ theme-customization

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

HTMLコードと CSS ファイルをカスタマイズして、AEM Formsアプリに組織固有の独自のルックアンドフィールを提供できます。 例えば、タスクや Startpoint の背景色や高さを変更できます。 次の例に、変更手順を示します。

  • 説明の代わりに手順を表示
  • 表示ルート数
  • 背景のグラデーションの色

手順 steps

  1. プロジェクトを開きます。

    • iOS の場合、Xcode で Capture.xcodeproj を開きます。
    • Android の場合、Eclipse で Android プロジェクトを開きます。
    • Windows の場合、Visual Studio で MWSWindows.sln を開きます。
  2. テンプレートフォルダーに移動します。

    • Xcode では、Capture/www/wsmobile/js/runtime/templates フォルダーに移動します。
    • Eclipse では、assets/www/wsmobile/js/runtime/templates フォルダーに移動します。
    • Visual Studio では、MWSWindows/www/wsmobile/js/runtime/templates フォルダーに移動します。
  3. template.html ファイルを開いて編集します。

  4. 次の文字列を探します。

    code language-none
    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
                   <div class="description_details">
                     <%= task.description %>
                   </div>
                  <%} else
    

    <% に置き換えます。

  5. template.html ファイル内の次のコードを探します。

    code language-none
    <ul id="task_menu_list">
                                    <li class="approve" title="<%= task.availableCommands.directCommands[0]%>" data-routename="<%= task.availableCommands.directCommands[0]%>">
                                        <%= task.availableCommands.directCommands[0]%>
                                    </li>
                                    <li class="reject last" title="<%= task.availableCommands.directCommands[1]%>" data-routename="<%= task.availableCommands.directCommands[1]%>">
                                        <%= task.availableCommands.directCommands[1]%>
                                    </li>
    
  6. 次の行にコメントをつけ、ファイルを保存します。

    code language-none
    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
  7. css フォルダーに移動します。

    • Xcode では、Capture/www/wsmobile/css に移動します。
    • Eclipse では、assets/www/wsmobile/css に移動します。
    • Visual Studio では、MWSWindows/www/wsmobile/css に移動します。
  8. _style.css ファイルを開いて編集します。

  9. 背景画像は、#323232#fff に変更します。

  10. 変更を保存し、_style.css ファイルを閉じます。

  11. AEM Formsアプリを開きます。

    AEM Formsアプリに、説明ではなく手順が表示されるようになりました。

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