Design JSON Schema for an Adaptive Form creating-adaptive-forms-using-json-schema
Prerequisites prerequisites
Authoring an Adaptive Form using a JSON Schema as its form model requires basic understanding of JSON Schema. It is recommended to read through the following content before this article.
Using a JSON Schema as form model using-a-json-schema-as-form-model
Adobe Experience Manager Formssupports creation of an Adaptive Form by using an existing JSON Schema as the form model. This JSON Schema represents the structure in which data is produced or consumed by the back-end system in your organization. The JSON Schema you use should be compliant with v4 specifications.
The key features of using a JSON Schema are:
- The structure of the JSON is displayed as a tree in the Content Finder tab in the authoring mode for an Adaptive Form. You can drag and add element from the JSON hierarchy to the Adaptive Form.
- You can pre-populate the form using JSON that is compliant with the associated schema.
- On submission, the data entered by the user is submitted as JSON that aligns with the associated schema.
- You can also create the form based on the JSON schema according to the specifications of the 2012-20 version.
A JSON Schema consists of simple and complex element types. The elements have attributes that add rules to the element. When these elements and attributes are dragged onto an Adaptive Form, they are automatically mapped to the corresponding Adaptive Form component.
This mapping of JSON elements with Adaptive Form components is as follows:
"birthDate": {
"type": "string",
"format": "date",
"pattern": "date{DD MMMM, YYYY}",
"aem:affKeyword": [
"DOB",
"Date of Birth"
],
"description": "Date of birth in DD MMMM, YYYY",
"aem:afProperties": {
"displayPictureClause": "date{DD MMMM, YYYY}",
"displayPatternType": "date{DD MMMM, YYYY}",
"validationPatternType": "date{DD MMMM, YYYY}",
"validatePictureClause": "date{DD MMMM, YYYY}",
"validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
}
}
Common schema properties common-schema-properties
Adaptive Form uses information available in JSON Schema to map each generated field. In particular:
- The
title
property serves as label for the Adaptive Form components. - The
description
property is set as long description for an Adaptive Form component. - The
default
property serves as initial value of an Adaptive Form field. - The
maxLength
property is set asmaxlength
attribute of the text field component. - The
minimum
,maximum
,exclusiveMinimum
, andexclusiveMaximum
properties are used for Numeric box component. - To support range for
DatePicker component
additional JSON Schema propertiesminDate
andmaxDate
are provided… - The
minItems
andmaxItems
properties are used to restrict the number of items/fields that may be added or removed from a panel component. - The
readOnly
property sets thereadonly
attribute of an Adaptive Form component. - The
required
property marks the Adaptive Form field as mandatory whereas in panel(where type is object), the final submitted JSON data has fields with empty value corresponding to that object. - The
pattern
property is set as the validation pattern (regular expression) in Adaptive Form. - The extension of JSON Schema file must be kept .schema.json. For example, <filename>.schema.json.
Sample JSON Schema sample-json-schema
code language-json |
---|
|
code language-json |
---|
|
The key changes from JSON Schema V4 to version 2020-12 specifications are:
- Id is declared as
$id
- definitions is declared as
$defs
Reusable schema definitions reusable-schema-definitions
Definition keys are used to identify reusable schemas. The reusable schema definitions are used to create fragments. A sample JSON Schema with definitions is given below:
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": { "type": "string" },
"city": { "type": "string" },
"state": { "type": "string" }
},
"required": ["street_address", "city", "state"]
}
},
"type": "object",
"properties": {
"billing_address": { "$ref": "#/definitions/address" },
"shipping_address": { "$ref": "#/definitions/address" }
}
}
The above example defines a customer record, where each customer has both a shipping and a billing address. Structure of both the addresses is same—addresses have a street address, city and state— so it is a good idea to not duplicate the addresses. It also makes addition and deletion of fields easy for any future changes.
Pre-Configuring fields in JSON Schema Definition pre-configuring-fields-in-json-schema-definition
You can use the aem:afProperties property to preconfigure JSON Schema field to map to a custom Adaptive Form component. An example is listed below:
{
"properties": {
"sizeInMB": {
"type": "integer",
"minimum": 16,
"maximum": 512,
"aem:afProperties" : {
"sling:resourceType" : "/apps/fd/af/components/guideTextBox",
"guideNodeClass" : "guideTextBox"
}
}
},
"required": [ "sizeInMB" ],
"additionalProperties": false
}
Limit acceptable values for an Adaptive Form component limit-acceptable-values-for-an-adaptive-form-component
You can add the following restrictions to JSON Schema elements to limit the values acceptable to an Adaptive Form component:
Enable schema compliant data enablig-schema-compliant-data
To enable all JSON schema-based Adaptive Forms to generate schema-compliant data upon form submission, follow these steps:
- Go to Experience Manager web console at
https://server:host/system/console/configMgr
. - Locate Adaptive Form and Interactice Communication Web Channel Configuration.
- Select to open the configuration in edit mode.
- Select the Generate Schema Compliant Data checkbox.
- Save the settings.
Non-supported constructs non-supported-constructs
Adaptive Forms do not support the following JSON Schema constructs:
- Null type
- Union types such as any, and
- OneOf, AnyOf, AllOf, and NOT
- Only Homogenous arrays are supported. So, the items constraint must be an object and not be an array.
- URI references in $ref
Frequently asked questions frequently-asked-questions
Why I am not able to drag individual elements of a subform (structure generated from any complex type) for repeatable subforms (minOccours or maxOccurs values are greater than 1)?
In a repeatable subform, you must use the complete subform. If you want only selective fields, use the entire structure and delete the unwanted ones.
I have a long complex structure in Content Finder. How can I find a specific element?
You have two options:
- Scroll through the tree structure
- Use the Search box to find an element
What should be the extension of the JSON schema file?
The extension of JSON Schema file must be .schema.json. For example, <filename>.schema.json.
See Also 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