DocumentationAEM 6.4Forms Guide

Branding Customization branding-customization

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

You can customize the application icon, application name, launch images, and login page to provide a distinct organization-specific appearance to AEM Forms app. For example, you can change the images to use logos from your organization. The AEM Forms app supports the following customizations:

  • Customizing application icon and launch images
  • Customizing app name
  • Customizing images on the login page
  • Customizing the logo in the app menu

Customizing icon and launch images customizing-icon-and-launch-images

Perform the following steps to customize the default app icon and the launch image of the AEM Forms app:

NOTE
For all the icons and images, use non-interlaced PNG format.

To customize icon and launch images to-customize-icon-and-launch-images

For iOS for-ios

  1. Open the Capture.xcodeproj project in Xcode.

  2. (For customizing icon) In the navigator view of Capture, navigate to Capture > Capture > Supporting Files > Capture-info.plist. Click the drop-down next to the Icon files. Specify the name of the icon file (.png) and upload the file at Capture > Capture > Resources > icons. Currently supported dimesions are: 29x29, 50x50, 58x58, 72x72, 100x100, and 144x144.

  3. (For customizing launch images) Ensure that the filenames of your images are:

    • For portrait: Default-Portrait~ipad.png and Default-Portrait@2x~ipad.png
    • For landscape: Default-Landscape~ipad.png and Default-Landscape@2x~ipad.png

    Upload them to the Capture project to replace existing files in the project.

    note note
    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  4. Build and run AEM Forms app on iOS device or iOS simulator.

For Android for-android

  1. Name the application icon files as:

    ic_launcher.png

  2. Place the corresponding icon files in the following directories:

    • [User_Home]/Projects/[your-project]/src/android/res/drawable-hdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-mdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxxhdpi
    note note
    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  3. Rebuild the AEM Forms app.

For Windows for-windows

  1. Replace the icons in the path:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\icons\windows

  2. Replace the launcher image in the path:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\screens\windows

    note note
    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  3. Rebuild the AEM Forms app.

Customize the app name customize-the-app-name

For iOS for-ios-1

  1. Open the Capture.xcodeproj project in Xcode.

  2. In the navigator view of Capture, navigate to Capture > Capture > Supporting Files > InfoPlist.strings.

    Update the value for the CFBundleDisplayName attribute to a name you want to display for the app.

  3. Build and run AEM Forms app on iOS device or iOS simulator.

    For details on building the app for iOS, see Set up the Xcode project and build the iOS app.

For Android for-android-1

  1. Open the following Xml in any text or Xml editor:

    [User_Home]/Projects/[your-project]/src/android/res/values/strings.xml and android/res/values-en/strings.xml

  2. Update the value for the key app_name.

  3. Rebuild the AEM Forms app.

    For details on building the app for Android, see Set up the Eclipse project and build the Android app.

For Windows for-windows-1

  1. Open the following Xml in any text editor:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\config.xml

  2. Update the value in the <name>...</name> tag.

  3. Rebuild the AEM Forms app.

    For details on building the app for Windows, see Set up the Visual Studio project and build the Windows app.

Customizing images on the login page customizing-images-on-the-login-page

The login page of the AEM Forms app has logo and background images. The logo is located above the login dialog box and background image is located below the login dialog box. Perform the following steps to customize the default image on the login page:

Before you start

Ensure that you have following images:

Description
Size
Filename
Logo
72 x 72 pixel
LC-logo.png
Background image (Portrait)
1280 x 989 pixel
Landing_bg.jpeg

To customize images on the login page using Xcode

  1. Open the Capture.xcodeproj project in Xcode.

  2. Navigate to the www/wsmobile/imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on iOS device or iOS simulator.

To customize images on the login pages using Eclipse to-customize-images-on-the-login-pages-using-eclipse

  1. Open the Android project in Eclipse.

  2. Navigate to the assets/www/wsmobile/imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on Android device.

To customize images on the login pages using Visual Studio to-customize-images-on-the-login-pages-using-visual-studio

  1. Open the MWSWindows.sln project in Visual Studio.

  2. Navigate to the MWSWindows\www\wsmobile\imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on Windows device.

Customizing the logo in the app menu customizing_images_on_the_login_page-1

After you login to the AEM Forms app and tap the menu button, you can see the logo above the menu. Perform the following steps to customize the default logo:

Before you start

Ensure that you have following image:

Description
Size
Filename
Logo
72 x 72 pixel
aem_icon.png

To customize images on the login page using Xcode

  1. Open the Capture.xcodeproj project in Xcode.

  2. Navigate to the www/wsmobile/imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on iOS device or iOS simulator.

To customize images on the login pages using Eclipse to-customize-images-on-the-login-pages-using-eclipse-1

  1. Open the Android project in Eclipse.

  2. Navigate to the assets/www/wsmobile/imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on Android device.

To customize images on the login pages using Visual Studio to-customize-images-on-the-login-pages-using-visual-studio-1

  1. Open the MWSWindows.sln project in Visual Studio.

  2. Navigate to the MWSWindows\www\wsmobile\imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on Windows device.

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