Layout capabilities of Adaptive Forms

Adobe Experience Manager lets you create easy-to-use Adaptive Forms that offer dynamic experiences to end users. The form layout controls how items or components are displayed in an Adaptive Form.

Types of layouts

An Adaptive Form provides you with the following types of layouts:

Panel Layout Controls how items or components inside a panel are displayed on a device.

Mobile Layout Controls the navigation of a form on a mobile device. If the device width is 768 pixels or more, the layout is considered a Mobile layout and optimized for a mobile device.

Toolbar Layout Controls the placement of Action buttons in the toolbar or panel toolbar in a form.

All these panel layouts are defined at the /libs/fd/af/layouts location.

To change the layout of an Adaptive Form, use the Authoring Mode in Experience Manager.

Panel layout

A form author can associate a layout with each panel of an Adaptive Form, including the root panel.

The Panel layouts are available at /libs/fd/af/layouts/panel location. Tap the panel and select cmppr1 to view the panel properties.

List of panel layouts for root panel of an Adaptive Form

Responsive - everything on one page without navigation

Use this panel layout to create a responsive layout that adjusts to the screen size of your device without any need for specialized navigation.

Using this layout, you can place multiple Panel Adaptive Form components one after another inside the panel.

A form using responsive layout as seen on a small screen

Wizard

Use this panel layout to provide guided navigation inside a form. For example, use this layout when you want to capture mandatory information in a form while guiding users step by step.

Use the Panel Adaptive Form component to provide step-by-step navigation inside a panel. When you use this layout, a user moves to the next step only after the current step is complete

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

A form using wizard layout

Accordion

Using this layout, you can place the Panel Adaptive Form component in a panel with accordion style navigation. Using this layout, you can also create repeatable panels. Repeatable panels enable you to dynamically add or remove panels as needed. You can define the minimum and the maximum number of times a panel repeats. Also, the title of the panel can be determined dynamically, based on the information provided in the panel items.

Summary expression can be used to show the values provided by the end user in the title of the minimized panel.

Repeatable panels using Accordion layout in Adaptive Forms

Tabbed layout - tabs appear on the left

Using this layout, you can place the Panel Adaptive Form component in a panel with tab navigation. The tabs are placed on the left of the panel content.

In the Tabbed layout, the tabs appear on the left

Tabs appearing on the left of a panel

Tabbed layout - tabs appear on the top

Using this layout, you can place the Panel Adaptive Form Component in a panel with tab navigation. The tabs are placed on top of the panel content.

Tabbed layout in Adaptive Forms with tabs on the top

Mobile layouts

Mobile layouts allow for user-friendly navigation on the mobile devices with relatively smaller screens. Mobile layouts use either tabbed or wizard styles for form navigation. Applying a Mobile Layout provides a single layout for the entire form.

This layout controls navigation using a navigation bar and a navigation menu. The navigation bar shows < and > icon to indicate next and previous navigation steps in the form.

The Mobile Layouts are available at /libs/fd/af/layouts/mobile/ location. The following mobile layouts are available in Adaptive Forms, by default.

List of Mobile Layouts in Adaptive Forms

Select the Add navigable items of responsive layout to mobile menu option to view the navigable options available for a panel in Mobile layout. The navigable options are visible only if you select Responsive layout for a panel.

When using a Mobile layout, the form menu, to access various form panels, is available by tapping aem6forms_form_menu icon.

Layout with panel titles in the form header

This layout, as the name suggests, shows panel titles along with the navigation menu and navigation bar. This layout also provides Next and Previous icons for navigation.

Mobile layouts with panel titles in the form headers

Layout without panel titles in the form header

This layout, as the name suggests, shows only the navigation menu and navigation bar without panel titles. This layout also provides Next and Previous icons for navigation.

Mobile layouts without panel titles in the form headers

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now