Theme Customization theme-customization
NOTE
The Android and iOS versions of the AEM Forms app have been discontinued. The Android app was unpublished from Google Play in September 2026, and the iOS app has been removed from the Apple App Store.
These apps are no longer available for installation. For assistance with the Android app, contact aemformsapp-android@adobe.com.
These apps are no longer available for installation. For assistance with the Android app, contact aemformsapp-android@adobe.com.
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
-
Open your project.
- For iOS, open
Capture.xcodeprojin Xcode - For Android, open the Android project in Eclipse.
- For Windows, open
MWSWindows.slnin Visual Studio.
- For iOS, open
-
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.
-
Open the
template.htmlfile for editing. -
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> <%} elseReplace it with
<%. -
Locate the following code in the
template.htmlfile: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> -
Comment the following line and save the file.
code language-jsp task.availableCommands.directCommands[1]%>"> <%= task.availableCommands.directCommands[1]%> </li> -
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.
-
Open the
_style.cssfile for editing. -
For Background image, change
#323232to#fff. -
Save the changes and close
_style.cssfile. -
Open the AEM Forms app.
The AEM Forms app now displays instructions instead of description.
recommendation-more-help
experience-manager-65-lts-help-main-toc