How Headless adaptive form works?
A Headless adaptive form is essentially a JSON structure (schema) consisting of form fields (Text box, choices, and many more fields) and corresponding rules (conditional logic) to add interactive behavior to the form. You can use REST APIs in your application or website to request the hosted JSON structure and natively render the JSON structure as a form in your app or website. A single Headless adaptive form can serve multiple webpages and applications without making any app or website-specific changes to it.
Architecture architecture
A typical Headless adaptive forms architecture centers on an Adobe Experience Manager Forms Server that hosts Headless adaptive forms. Front-end apps—web, mobile, JavaScript, chatbots, and more—render the forms for each channel.
The typical architecture of a Headless adaptive forms deployment looks like the following:
Component of a Headless adaptive forms implementation
Adobe Experience Manager Server: Along with serving as host for Headless adaptive forms, Adobe Experience Manager provides the following backend capabilities:
- RESTful APIs to list, fetch, pre-fill, validate, submit, and track submission status of headless forms.
- Visual editor to develop a Headless adaptive form easily.
- Forms Data Model to receive or send data to disparate data sources.
- A workflow engine to automate complex tasks.
Headless adaptive forms: A Headless adaptive form is represented as a .json file. The JSON structure defines components, constraints, and structure of a form.
Front-end Apps: Front-end apps like, SPA (Single Page Applications), Mobile Apps, JavaScript Apps, consume Headless adaptive forms (the JSON Form Representation) and render the form on a client. You can use the React renderer component shipped with Headless adaptive forms to render an adaptive form or build your own custom component to render Headless adaptive forms natively.
Developer tools
In a typical development cycle, you start with creating and hosting Headless adaptive forms on Adobe Experience Manager Forms Server. In the second step, you map your UI components or use a public UI components library, such as Google Material UI or Chakra UI to style your forms. In the last step, you fetch and display Headless adaptive forms in your application (Website, mobile application, JavaScript apps, chat applications, or many other surfaces).
The following tools help you create and integrate Headless adaptive forms to your applications:
Forms Web SDK (Client-Side Runtime): Forms Web SDK is a client-side JavaScript library. It allows you to apply client-side validations on form fields, maintain the state of the form, and provides hooks to connect form with UI layer or adaptive forms rendered component. It allows customers to validate constrains applied to various fields of a form and hooks to connect the JSON structure of the form to the UI framework. The Forms Web SDK has the following components:
- Business rule processor: The business rule processor accepts the forms JSON structure as input, manages the state of the form fields, executes rules, and event handlers present in the JSON.
- React binder: Provides hooks over controller to add state to Form Components. It is also helpful in pre-filling a form.
- Components library: It provides React Spectrum Components and uses hooks in the React Binder module to add state to those components.
Along with providing the APIs to validate constraints applied to various fields of a form, Forms Web SDK provides hooks to connect Headless adaptive forms to the UI framework. It also provides a React renderer for Headless adaptive forms to help integrate a Headless adaptive form to your application. The following components of the Web SDK are available:
All of these components are included in AEM Archetype. When you create an AEM Archetype 37 or later project for Headless adaptive forms, the latest version of the above listed libraries is included in the project.
- Code playground: Code playground is an interactive environment designed for developers to experiment with, learn about, and test the capabilities of Headless adaptive Forms.
Started Application: Adobe has also released a started application to help you start quickly with Headless adaptive forms.
Storybook: Storybook provides an overview of different components of Headless adaptive forms. It also provides a list of all the supported components, their corresponding properties, and constraints.
Visual Studio Code Extension: Visual Studio Code extension to help create a valid JSON structure. It provides IntelliSense support and validation for JSON structure of forms along with common functions like add, delete, or rename components of a JSON structure.
HTTP and JavaScript APIs: HTTP APIs let you list, fetch, validate, submit, and track submission status of headless forms.
JSON Formula: It is an implementation of forms expression grammar to help you query JSON structure and create rules for Headless adaptive forms. The grammar is a mashup of spreadsheet-like functions and operators and JMESPath a JSON query language. You can use the playground to explore JSON formula syntax and capabilities.
Adaptive Forms version 2.0 specifications: Adaptive Forms version 2.0 specification provides detailed information on all the components, constraints, and methods available to define Headless adaptive forms. The specification is available in PDF format.