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:

  • background gradient color
  • height of tasks or Startoints
  • number of display routes
  • display instructions in place of the description

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 task.html file for editing.
  4. Locate the following string and replace it with <%.

    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ){%> <%= task.description %> <%}
    else 
     
  5. Locate the following code in the task.html file:
  6. <ul>
    <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>
    </ul>
    </div>

  7. Comment the following line and save the file. 
  8. <li class="reject last" title="<%=
    task.availableCommands.directCommands[1]%>" data-routename="<%=
    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>

  9. 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.
  10. Open the _style.css file for editing.
  11. Search for the following code:

    #wrapper .task {

  12. Change the height from 80px to 150px.
  13. For Background image, change #1d1d1d to #fff.
  14. Save the changes and close _style.css file.
  15. Open the AEM forms app.
The AEM forms app now displays instructions instead of description. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy