DocumentationAEM 6.5User Guide

Theme Customization theme-customization

Last update: Fri May 24 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
  • Developer

You can customize the HTML code and CSS file to provide a distinct organization-specific look and feel to AEM Forms app. For example, you can change the background color and height of tasks or Startpoints. The following example provides instructions to change:

  • display instructions in place of the description
  • number of display routes
  • background gradient color

Steps steps

  1. Open your project.

    • For iOS, open Capture.xcodeproj in Xcode
    • For Android, open the Android project in Eclipse.
    • For Windows, open MWSWindows.sln in Visual Studio.

  2. Navigate to the templates folder.

    • In Xcode, navigate to the Capture > www > wsmobile > js > runtime > templates folder.
    • In Eclipse, navigate to the assets > www > wsmobile > js > runtime > templates folder.
    • In Visual Studio, navigate to the MWSWindows > www > wsmobile > js > runtime > templates folder.

  3. Open the template.html file for editing.

  4. Locate the following string:

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

    Replace it with <%.

  5. Locate the following code in the template.html file:

    code language-jsp 
    <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. Comment the following line and save the file.

    code language-jsp 
    task.availableCommands.directCommands[1]%>">
<%= task.availableCommands.directCommands[1]%>
</li>

  7. Navigate to the css folder.

    • In Xcode, navigate to Capture > www > wsmobile > css.
    • In Eclipse, navigate to assets > www > wsmobile > css.
    • In Visual Studio, navigate to MWSWindows > www > wsmobile > css.

  8. Open the _style.css file for editing.

  9. For Background image, change #323232 to #fff.

  10. Save the changes and close _style.css file.

  11. Open the AEM Forms app.

    The AEM Forms app now displays instructions instead of description.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2