Tables in adaptive forms tables-in-adaptive-forms

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Using tables is an effective, simplified, and organized way of presenting complex data. It helps users in identifying information easily and providing inputs in an ordered arrangement of rows and columns. Most forms from financial services and government organizations require large data tables to put numbers and perform calculations.

AEM Forms provides a Table component in the components browser in sidebar that lets you create tables in adaptive forms. Some of the key capabilities it provides are:

Create a table create-a-table

To create a table, drag-and-drop the Table component from the components browser in the sidekick on the adaptive form. By default, the table contains two columns and three rows, including the header row.

About header and body cells about-header-and-body-cells

The header cells are text fields. To change the label for a header, right-click the header cell and click Edit. In the Edit dialog, update the label in the Value field and click OK.

The body cells are text boxes, by default. You can replace a body cell with any other adaptive forms component available in the sidekick, such as a numeric box, date picker, or drop-down list.

For example, the first body row in the following table includes text box, date picker, and drop-down list components as cells.

You can merge two or more body cells by selecting the cells you want to merge, right-click, and select Merge. Also, you can split a merged cell by right-clicking it and selecting Split Cells.

Add, delete, move rows and columns add-delete-move-rows-and-columns

You can add and delete a row or column, and move a row up and down in a table.

To add or delete a row or column or move a row, click any cell in the row or column. A drop-down menu appears at the top of the column and on the left of the row. The menu at the top provides options to add or delete the column, whereas the menu on the left lets you add, delete, or move the row.

The drop-down menu for the row also provides the Edit operation to edit row properties, settings, and styling options.

Add table description add-table-description

You can add a description of the table to explain how the information is organized that screen readers can interpret and read out. To add the description:

Sort columns in a table sortcolumnstable

You can sort data based on any column in a table in the adaptive form. The values in the column can be sorted in an ascending or descending order.

Sorting can be applied to table columns containing:

To apply sorting on table columns, the table column cells must contain any of the following components: Numeric Box, Numeric Stepper, Date Input Field, Date Picker, Text, or Text Box.

To enable sorting:

Set column width for a table set-column-width

Execute the following steps to set column width for a table:

Configure table style configure

You can define the style for a table by using the Style mode in the page toolbar. Perform the following steps to switch to style mode and edit the table styling

Add or delete a row dynamically add-or-delete-a-row-dynamically

Tables provide out-of-the box support for dynamically adding or deleting rows at runtime.

At runtime, you will see + and - buttons to add or delete a row.

Expressions in a table expressions-in-a-table

Tables in adaptive forms let you write expressions in JavaScript to induce behaviors, such as show or hide a table or a row, add up all the numbers and show the total in a cell, enable or disable a cell, validate user input, and so on. These expressions use adaptive forms scripting model APIs.

While tables and rows support only visibility expressions to control their visibility based on the value returned by an expression, cells support the following expressions:

The visibility expression for a table or a row can be defined in the Panel properties tab of their corresponding Edit component dialog. The expressions for a cell can be defined in the Script tab of its Edit component dialog.

For the complete list of adaptive forms classes, events, objects, and public APIs, see JavaScript Library API reference for adaptive forms.

Mobile layouts mobile-layouts

Tables in adaptive forms provide unmatched experience mobile devices because of its fluid and responsive layouts. AEM Forms offers two types of mobile layouts for tables - Headers on left and Collapsible columns.

You can configure a mobile layout for a table from the Styling tab of the Edit component dialog for a table.

Headers on left headers-on-left

In the Headers on left layout, the header in the table are transposed on the left with only one cell appearing against a header. Each row in this layout appears as a distinct section. The following images compare a table on a desktop with that on a mobile device.

Desktop view of a table with Header on left layout

Mobile view of a table with Header on left layout

Collapsible columns layout collapsible-columns-layout

In the Collapsible column layout, the columns in the table collapse to show one or two columns, depending on the device size, while other columns are collapsed. You can click the collapse/expand icon to view other columns in the table.

The following images compare how a table looks on a device with collapsed and expanded columns.

Collapsed columns of a table with only two columns showing up on a mobile device

Expanded column of a table on a mobile device

Merge data in a table merge-data-in-a-table

Tables in adaptive forms let you populate the table at runtime using data from an XML file. The data XML file can reside in the local file system of the machine where AEM Forms server is running or in the CRX repository.

Let’s take example of the following bank transaction summary table that we want to populate with data from an XML file.

In this example, the Element name property for:

The XML file that contains data in the following format:

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
 <typeSelect>0</typeSelect>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 </data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

In the sample XML, the data for a row is defined by the <Row1> tags, which is the element name for the row in the table. Within the <Row1> tag, the data for each cell is defined within the tag for its element name, such as <tableItem1>, <tableItem2>, <tableItem3>, and <type>.

To merge this data with the table at runtime, we need to point the adaptive form containing the table to the absolute XML location with wcmmode disabled. For example, if the adaptive form is at https://localhost:4502/myForms/bankTransaction.html and the data XML file is saved at C:/myTransactions/bankSummary.xml, you can view the table with data at the following URL:

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

Use XDP components and XSD complex types use-xdp-components-and-xsd-complex-types

If you created an adaptive form based on an XFA form template, the XFA elements are available in the Data Model tab of AEM Content Finder. You can drag and drop these XFA elements, including tables, in the adaptive form.

The XFA table element is mapped to the Table component and works out-of-the-box in adaptive forms. All properties and functionalities of XDP table are preserved when moved into adaptive form, and you can perform any operation on it just as you do with native adaptive form table. For example, if a row in an XDP table is marked repeatable, it will be repeated when dropped in adaptive forms as well.

In addition, you can drag-drop XDP subform to add a new row in the table. However, note that dropping a nested subform does not work.

In addition, you can drag-drop a group of XSD complex type elements to create a table row. A new row gets created just below the row on which you dropped the elements. The cells created using the XSD complex type elements maintain a binding reference to the XSD. You can also replace a body cell with an XSD complex type element by dropping the element onto the cell.

Key considerations key-considerations