Overview

When you create a mobile app using AEM Mobile, you can embed a responsive and engaging adaptive form or document. Embedding an adaptive form lets you create a customized data capturing experience. For example, you want to create an app for your online retail site. You use an adaptive form that lets your customers provide personal details such as name, address, social security number, and credit card number. When you create an app using AEM Mobile, you can embed the adaptive form in your app. In addition to adaptive forms, you can add adaptive documents in your app.

Note:

Currently, users can see and fill a form only if the app is online.

Embedding an adaptive form or document in AEM Mobile using AEM Form component

Configuration

The AEM Form component relies on client side javascript to function correctly. Component initialization and runtime logic is handled by the clientlib: aemfd.mobile.angular.core. For the component to work properly, ensure that the client library is available offline in your app.

To ensure availability of the client library offline, make appropriate changes in content sync configuration. See recommendation to make appropriate changes in content sync configuration in the JAVASCRIPT AND CSS CLIENTLIBS section in Structure an App.

Note:

For out-of-the-box Geometrixx Outdoors app, add a corresponding entry to aemfd.mobile.angular.core in the embed property of the clientlib located at /etc/designs/phonegap/geometrixx/ng-outdoors/ng-clientlibsall.

Using AEM Forms component

Use AEM Form component to add an adaptive form or document in your app. AEM Forms component lets you provide offline and thank you messages that customers see when the app is offline or when they submit the form.

Perform the following steps to use the component that lets you embed an adaptive form or document in AEM Mobile:

Open the app page in edit mode.

When you open the app page in edit mode, ensure that the side panel is visible. Use Toggle Side Panel in the page toolbar to show or hide it.

From the Component browser panel, drag-drop the AEM Form component on the page.

Tap AEM Form and then tap on the action bar. The AEM Form dialog opens.

Based on the Asset Type you select, your options vary.

In the AEM Form dialog, specify the following.

For Adaptive Form asset type:

Asset Path

Browse and select the adaptive form to embed.

Thank You Message

Write a message using the rich text editor to show on form submission.

Theme

(Optional) Browse and select a theme that defines styling for components of your adaptive form. Styling includes appearance properties such as font style, background color, dimensions, and alignment.