No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Headless Adaptive Forms
Headless Adaptive Forms (HAF) present an innovative approach for crafting Form or Data Capture Experiences through a JSON representation. This versatile format enables seamless rendering across various channels. For example, Web Applications, Mobile Applications, Internet of Things (IoT), API-Driven Applications, Digital Signage, Kiosks and Self-Service Machines, Augmented Reality (AR) and Virtual Reality (VR). 
These forms can be used in applications where the user interface is decoupled from the back end. This separation allows flexibility and enables developers to use different technologies on the front end.
Modules
The Headless Adaptive Forms (HAF) framework comprises three key components that enable its functionality:
  • Specification: The comprehensive Headless Adaptive Forms specification outlines the representation of a form, including its dynamic behavior, in JSON format.
  • Core Library (@aemforms/af-core): The Core Library plays a central role in the HAF by understanding the dynamic behavior of forms. Importantly, it can manipulate the form's state without requiring a traditional User Interface (UI). 
  • Adaptive Form Super Component: The Adaptive Form Super Component is a crucial element that takes the JSON representation of a form and seamlessly renders it. This rendering is achieved through the utilization of React Spectrum components, showcasing the framework's adaptability and integration with contemporary technologies.
Getting Started
Prerequisites
Before diving into the setup, ensure that your machine meets the following prerequisites:
  • Node.js: Install Node.js version 16 or higher.
  • npm: Install npm (Node Package Manager) version 8 or higher.
  • React Project: Set up a React project, preferably using React version ^16.14.0. Various methods, such as create-react-app or webpack, can be employed to create your project.
Once your React project is in place, use the following command to install Headless Adaptive Forms dependencies:
npm i --save @aemforms/af-react-renderer @aemforms/af-react-components @adobe/react-spectrum
Headless Form JSON
You can use Adaptive Forms editor for a visual form creation experience, allowing you to effortlessly generate Headless Form JSON in accordance with the specifications. You can also follow the Headless Forms specification to define a Headless Form.
Mappings Object
The Mappings Object is a JavaScript map designed to map the field types outlined in the Headless Forms specification with their corresponding React components. This map is employed by the Adaptive Form Super Component to dynamically render the various components specified in the Form JSON.
The default mappings can be found in Headless Adaptive Forms Github repository. You can also use the Headless Adaptive Forms starter kit to create a React application with all the Headless Adaptive Forms related dependencies including a mapping file (mappings.ts) with all the default mappings.    
To use Mappings Object in your own project or application, import the @aemforms/af-react-components library: 
import {mappings} from '@aemforms/af-react-components'
Once you have defined the JSON for the form, the looks like the following: 
import {mappings} from '@aemforms/af-react-components'

<SpectrumProvider theme={defaultTheme}>
<AdaptiveForm mappings={mappings} formJson={json} />
</SpectrumProvider>

Examples
You can easily add features like submission and multiple fields directly in the JSON structure. When you submit the form, the Adaptive Form Super Component's callbacks help extract the data effortlessly.
The Headless Adaptive Forms also has the capability to generate hierarchical data.
See more