テーマのカスタマイズ

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

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

手順

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. 次の文字列を探します。

   <%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 ファイル内の次のコードを探します。

   <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. 次の行にコメントをつけ、ファイルを保存します。

   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アプリに、説明ではなく手順が表示されるようになりました。