The code is not maintained anymore

Please use the block present in the repository https://github.com/adobe-rnd/aem-boilerplate-forms

Adpative Form Block

Adaptive Form Block for Franklin

AEM Form, Headless Adaptive Forms (HAF) specifies a mechanism to create a Form or Data Capture Experience using a JSON representation, which allows rendering that experience across multiple channels.

Adaptive Form Block is Form rendition block which renders the form based on Adaptive Forms Specification (JSON) for Franklin.

Playground

Live Playground

Local Playground

• Open the project in VSC
• Install the LiveServer VSC Extension
• Open docs/index.html with LiveServer
• On selecting template
  • Left side view will open the JSON View and
  • On Right side form will be rendered using Adaptive Form Block

Getting Started -- Franklin

Adaptive Form authoring is similar to Franklin Form authoring but it expected Excel headers according to Adaptive Form Specification

Authoring

• Project Creation -- Follow the Getting started with Franklin - Developer Tutorial
• Create an Excel workbook or Google sheet anywhere under your Franklin project directory.
• For this tutorial we will create a sheet in the root of our Franklin project in OneDrive called registration.
• Share the sheet or a parent directory containing the sheet with helixfrm@adobe.com for OneDrive or helix@adobe.com for GDrive.
• Open the workbook and create sheet with name helix-default
• Created header using Adaptive Form specification terminology.
• You can copy past the table data from registration template.

See below an example of what the spreadsheet for the form definition could look like.

Form Reference

Usually, there is a Adaptive Form block that takes a reference to the spreadsheet and renders the form and handles the user flow through submission.

More details in Adaptive Form Block documentation.

Libraries

AFB include following libraries which are used in building component DOM structure, interaction with DOM & Form Model, etc.

• afb-builder -- Include reusabled function for generating component mark like createLabel, defaultInputRender, renderField, createWidgetWrapper, etc.
• afb-interaction -- Reusable methods for interaction between components (UI Widget) and AF Core Models
• afb-transform -- Transform the excel based from to headless Adaptive Form Specification.

Customization

afb-builder which include reusabled function for generating component mark like createLabel, defaultInputRender, renderField, createWidgetWrapper, etc. which can be override for customization of component.

Below are customization supported in AFB

• Components Customization
  • Component Design (DOM Manipulation)
    • Include asterisk (*) symbol in label if field is marked as required.
    • Show allow characters (minimum & maximum characters allowed) in field description or any other place in field.
    • Inline button like reset, validate, etc. in input fields.
    • Icons -- Showing error or success icon inside input fields based on validation result.
  • Component Interaction
    • Update model on key press instead of blur
• Custom component -- Create a different component which is not supported in OOTB block.
• Custom Functions -- Registering custom functions.

Include asterisk (*) symbol in label

1. Goto custom-builder.js available under ./customization/
2. Import default builder i.e. import {createLabel as cl} from '../libs/default-builder.js'
3. Create createLabel function which append the asterisk (*) to label if field is marked as required

import {createLabel as cl} from '../libs/default-builder.js'

export const createLabel = (state, bemBlock) => {
    const label = cl(state, bemBlock)
    if(label) {
        label.textContent = state?.required ? label?.textContent + " *" : label?.textContent;
        return label;
    }
}

Custom Functions

In Rules, Author can either use JMESPath or JSON Formula functions or they can include there own functions which are reusable across forms.

1. Goto custom-functions.js available under ./customization/
2. Create JS function and export it

Example

/**
 *
 * @param str {string} json string to convert custom function to object
 * @return {object} JSON Object after parsing the string as json. In case of
 * exceptions empty object is returned
 */
 function toObject(str) {
    try {
        return JSON.parse(str);
    }
    catch (e) {
        return {}
    }
}

export const customFunctions = {
    toObject
}

Links

• Adaptive Form Block Documentation.
• Supported Features

Templates

• Registration Template
• Personal Loan Calculator

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.