DocumentationAEM as a Cloud ServiceUser Guide

Layout capabilities of Adaptive Forms based on Core Components

Last update: Mon Nov 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Applies to:
  • Experience Manager as a Cloud Service
  • Topics:
  • Adaptive Forms
  • Core Components

CREATED FOR:

  • User
  • Developer
  • Admin
Version
Article link
AEM 6.5
Click here
AEM as a Cloud Service (Foundation Components)
Click here
AEM as a Cloud Service (Core Components)
This article

Adaptive Forms provides first-class components to layout and design the forms effectively. The layout controls how components are displayed in a form. Adaptive Forms support various layouts: panel, wizard, accordion, tabs on top/horizontal tabs, and tabs on left/vertical tabs.

Pre-requisite

Before exploring the various capabilities of a layout, ensure that core components are enabled for your environment. For detailed instructions on how to enable core components for your environment, click here.

Adaptive Forms layout types

Adaptive Form based on Core Components supports the following types of layouts:

  • Panel layout
  • Wizard layout
  • Vertical layout
  • Horizontal layout
  • Accordion layout
Panel Layout

Panel layout is useful for organizing related fields in a way that makes it easier to navigate and find corresponding content. The panel layout arranges form components within distinct, sections or panels in an Adaptive Form.

Panel Layout

Panel Layout

You can use the panel component to add the panel layout in a form. For detailed instructions on how to configure various properties of the panel component, refer to the panel component article.

Wizard Layout

The wizard layout helps simplifying a complex form by breaking it into distinct steps. Each step represents a different part of the process, and users navigate through the steps sequentially, often with Next and Previous buttons. You can use the wizard layout to create a form that involves multiple sections or steps.

Wizard Layout

Wizard Layout

You can use the wizard component to add the wizard layout in a form. For detailed instructions on how to configure the various properties of the wizard component, refer to the wizard component article.

Vertical Tabs Layout

The vertical tabs layout is also known as tabs on the left layout. The vertical tabs layout organizes panels or sections along the left side of a form. It is a common layout for forms where panels/sections is stacked vertically for easy reading and navigation.

Vertical Layout

Vertical Tabs Layout

You can use the vertical tabs component to add the vertical tabs layout in a form. For detailed instructions on how to configure the various properties of the vertical tabs component, refer to the vertical tabs component article.

Horizontal Tabs Layout

The horizontal tabs layout is also known as Tabs on the top layout. The horizontal tabs layout arranges panels or sections side-by-side in a row. This layout presents the form sections in a linear manner across the width of the form or panel.

Horizontal Layout

Horizontal Tabs Layout

You can use the horizontal tabs component to add the horizontal tabs layout in a form. For detailed instructions on how to configure the various properties of the horizontal tabs component, refer to the horizontal tabs component article.

Accordion Layout

The accordion layout displays content in collapsible sections or panels in an Adaptive Form. When a section is expanded, it displays the content within, while other sections remain collapsed. This layout is ideal for displaying large amounts of information in a compact form.

Accordion Layout

Accordion Layout

You can use the accordion component to add the accordion layout in a form. For detailed instructions on how to configure the various properties of the accordion component, refer to the accordion component article.

To learn how to insert a layout and add form components to it, refer to the section titled How to insert a layout and add form components to it?

How to choose the right Adaptive Form layout?

It is important to select the right Adaptive Form layout to optimize user experience and form functionality. The table helps you to understand the different layout options available and guides you in selecting the most suitable layout based on your specific needs and use cases:

Feature
Panel Layout
Wizard Layout
Tabs on the Top/Vertical Tabs Layout
Tabs on the Left/Horizontal Tabs Layout
Accordion Layout
Purpose
Groups related content into distinct sections
Guides users through a multi-step process or form
Allows switching between sections/views on the same page
Similar to top tabs but arranged vertically on the left
Organizes content into collapsible sections
Structure
Distinct sections
Sequential steps/pages
Horizontal tabs at the top
Vertical tabs on the left
Collapsible panels/sections
Navigation
Click on the panel headers to navigate
- Forward: “Next” button
- Backward: “Back” button
- Optional skipping steps
Click on tabs to switch sections
Click on tabs to switch sections
Click headers to expand/collapse sections
User Experience
Organizes large amounts of content in a manageable way
Step-by-step guidance, reducing overwhelm
Clear, accessible switching between views
Efficient use of vertical space, always visible tabs
Compact view with expanded/collapsed sections
Use Case
Complex forms with categorized sections
Setup processes, complex forms
Organizing settings or content categories
Dashboards, complex data views
FAQs, settings menus, detailed content sections

How to insert a layout and add form components to it?

The below diagram displays the steps to insert a layout to a form and add form components to it:

Workflow to add a layout and form components

Consider the IT Request Form shown in the Adaptive Forms Layout Types section. The form gathers information from employees experiencing technical issues related to their network or laptop. It includes three panels:

  • Employee Details: The panel collects information about the employee and contains three textboxes labeled Name, Email ID, and Department.

  • Problem Details: The panel captures details about the issue. It includes a checkbox for the problem category with three options: Network, Computer, or Other. It also features two textboxes labeled Please Specify and Comments.

  • Attachments: The panel allows users to upload supporting documents related to the problem.

Let’s explore the step-by-step process for inserting a layout and adding components to it. In this example, a horizontal tabs layout is inserted to a form.

1. Insert a layout component to a form

  1. Log in to your Experience Manager Forms instance.

  2. In the upper-left corner, select Adobe Experience Manager > Forms > Forms & Documents.

  3. Open an existing Adaptive Form in an edit mode if it has already been created.

    Open an Adaptive Form

    Alternatively, you can also create new Adaptive Form.

  4. Locate the section within the form editor that allows you to add a layout.

    Form editor

  5. Click the Add icon. The icon is a plus sign (+) that signifies the option to add new components.

    Insert layout

    Clicking the Add icon displays an Insert New Component dialog box that displays various components for insertion.

    NOTE
    Alternatively, you can also drag and drop the layout component.

  6. Browse the available components in the dialog box and select the desrired layout from the list. In our case, we select the Horizontal Tabs component to insert the horizontal tabs layout.

    Select horizontal tabs

    When you add the horizontal tabs component to your form, it initially consists of two empty panels, named Item1 and Item2, by default. You need to manually add form components to these panels.

    Horizontal tabs

  7. Open the properties of the horizontal tabs component and specify the name for the component.
    For example, in this case, we add the name of the horizontal tabs component as IT Request Form.

    Add name for Horizontal tabs

  8. Click Done.

    Horizontal tabs

Once the layout component is added in the form, modify the number of panels according to the requirements.

2. Add panels to the layout

Add new panel to the horizontal tabs component:

  1. Open the horizontal tabs component properties and click the Items tab.

    Item tab for Horizontal tabs

  2. Click the Add icon to add new panel.

    Add new panel

    When you click the Add icon, the Insert New Component dialog box appears.

  3. Select the panel component.

    Add new panel

    When you select the panel component, the new panel is added in the horizontal layout.

    Add new panel

    Provide a name for the new panel; otherwise, you cannot save the properties of the horizontal tabs component.

  4. Specify the names of the panels as shown in the figure below:

    Panel names

  5. Click Done.

    Once you click Done, the three panels appear side-by-side in a row. The panel names are displayed as headings for each panel, and you can add form components to each panel.

    Panel names

    You can configure the properties of panel component. For example, the IT Request Form does not include panel titles, here are the steps to configure properties of panel component.

  6. Open the properties of the first panel.

    Panel 1 Properties

  7. Select the Hide title checkbox from the Basic tab.

    Hide title

  8. Click Done.

Similarly, you can hide titles for the other two panels also. Once done, you can proceed with adding form components to each panel.

3. Add form components to the panel

  1. Locate the section within the panel that allows you to add components.

  2. Click the Add icon. The icon is a plus sign (+) that signifies the option to add new components.
    Insert layout

    Clicking the Add icon displays an Insert New Component dialog box that displays various components for insertion.

    Insert New Component Dialog Box

  3. Browse the available components in the dialog box that appears and select the desired component. In our case, select the Text Box component.

  4. Open the properties of the added component and specify its name. Let edit the properties of the added Text Box component and specify its name.
    Insert layout

  5. Similarly, add two more Text Box components and name added the components as Email ID and Department.
    First Panel

    Now that the components in the first panel have been added, you can proceed with adding the components to the second panel.

  6. To switch the panel, click Select Panel from the toolbar.

    Switch Panel

    When you click the Select Panel, the list of the added panels in the Horizontal Tabs component appears.

    Switch Panel

  7. Select 2 Panel from the panel list and the view changes from the first panel to the second panel.

    Second Panel

  8. Repeat the steps outlined from Step 2 to Step 4 for adding the desired components in panel 2 as shown in the below figure:

    Second Panel components

  9. Switch to the 3 Panel by following the steps outlined in Step 6 and Step 7.

  10. Repeat the steps outlined from Step 2 to Step 4 for adding the desired component in panel 3:

    Third Panel components

  11. Click Preview in the top-right corner of your authoring environment.
    Horizontal Layout

You can also drag-and-drop the components to add the form components to each panel.

You can also delete form component from the panel using the Delete icon icon.

Deleting a component

You can also add the required validations for the components as required.

How to replace an existing layout with a new layout?

You can replace a layout of a form with a new layout, which involves modifying how components are arranged and displayed within a form.

Perform the following steps to replace the existing layout of a form:

  1. Click the Replace icon from the toolbar of the layout component and the Replace Component dialog box appears.

    Replace Layout

  2. Select the desired layout from the Replace Component dialog box.

    Replace Component dialog box

    After selecting the layout, the arrangement of the components within the layout changes accordingly. For example, select the vertical tabs component from the Replace Component dialog box; the arrangement of the panel changes to tabs on left:

    Vertical Layout

Extra Bytes

To drag and drop components into the form editor, perform the following steps:

  1. Locate the section that allows you to add components.

  2. Navigate to the left panel within your authoring environment and click Components.

    Component Panel

    When you click the Components option, the list of the available components appears.

    Component Panel

  3. Browse the available components and select the desired component.

  4. Drag the component by clicking and holding the selected component, then drag it over to the panel area to place it.

  5. Drop the component into the panel by releasing the mouse.

Next Steps

Once you are familiar with the various layout capabilities for an Adaptive Form based on Core Components, you can move on to the next steps:

  • Create your first Adaptive Form based on Core Components
  • Create and use Adaptive Form themes

See Also

  • Create an AEM Adaptive Form
  • Add an AEM Adaptive Form to the AEM Sites page
  • Apply themes to an AEM Adaptive Form
  • Add components to an AEM Adaptive Form
  • Use CAPTCHA in an AEM Adaptive Form
  • Generate a PDF version (DoR) of an AEM Adaptive Form
  • Translate an AEM Adaptive Form
  • Enable Adobe Analytics for an Adaptive Form to track form usage
  • Connect Adaptive Form to Microsoft SharePoint
  • Connect Adaptive Form to Microsoft Power Automate
  • Connect Adaptive Form to Microsoft OneDrive
  • Connect Adaptive Form to Microsoft Azure Blob Storage
  • Connect Adaptive Form to Salesforce
  • Use Adobe Sign in an AEM Adaptive Form
  • Add a new locale for an Adaptive Form
  • Send Adaptive Form data to a database
  • Send Adaptive Form data to a REST endpoint
  • Send Adaptive Form data to AEM Workflow
  • Use Forms Portal to list AEM Adaptive Forms on an AEM website
  • Add versionings, comments, and annotations to an Adaptive Form
  • Compare Adaptive Forms
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab