为自适应表单设计 JSON 架构 creating-adaptive-forms-using-json-schema
Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。
前提条件 prerequisites
使用JSON架构作为自适应表单的表单模型创作时,需要基本了解JSON架构。 建议在阅读本文之前通读以下内容。
使用JSON架构作为表单模型 using-a-json-schema-as-form-model
Adobe Experience Manager表单支持使用现有JSON架构作为表单模型来创建自适应表单。 此JSON架构表示组织中的后端系统生成或使用数据的结构。 您使用的JSON架构应符合 v4规范.
使用JSON架构的主要功能包括:
- 在自适应表单的创作模式下,JSON的结构在内容查找器选项卡中显示为树。 您可以将元素从JSON层次结构拖放到自适应表单中。
- 您可以使用与关联架构兼容的JSON预填充表单。
- 在提交时,用户输入的数据将作为JSON提交,该JSON与关联的架构保持一致。
JSON架构包含简单和复杂的元素类型。 元素具有向元素添加规则的属性。 将这些元素和属性拖动到自适应表单上时,会自动映射到相应的自适应表单组件。
JSON元素与自适应表单组件的映射如下所示:
"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
自适应表单使用JSON架构中可用的信息来映射每个生成的字段。 特别是:
- 此
title
属性用作自适应表单组件的标签。 - 此
description
属性设置为对自适应表单组件的详细说明。 - 此
default
属性用作自适应表单字段的初始值。 - 此
maxLength
属性设置为maxlength
文本字段组件的属性。 - 此
minimum
,maximum
,exclusiveMinimum
、和exclusiveMaximum
属性用于数值框组件。 - 要支持的范围,请执行以下操作
DatePicker component
其他JSON架构属性minDate
和maxDate
提供…… - 此
minItems
和maxItems
属性用于限制可从面板组件添加或删除的项目/字段数。 - 此
readOnly
属性设置readonly
自适应表单组件的属性。 - 此
required
属性将自适应表单字段标记为必填字段,而在面板(其中类型为对象)中,最终提交的JSON数据具有的字段具有对应于该对象的空值。 - 此
pattern
属性在自适应表单中设置为验证模式(正则表达式)。 - JSON架构文件的扩展名必须保留为.schema.json。 例如, <filename>.schema.json。
示例JSON架构 sample-json-schema
以下是JSON架构的示例。
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"employee": {
"type": "object",
"properties": {
"userName": {
"type": "string"
},
"dateOfBirth": {
"type": "string",
"format": "date"
},
"email": {
"type": "string",
"format": "email"
},
"language": {
"type": "string"
},
"personalDetails": {
"$ref": "#/definitions/personalDetails"
},
"projectDetails": {
"$ref": "#/definitions/projectDetails"
}
},
"required": [
"userName",
"dateOfBirth",
"language"
]
},
"personalDetails": {
"type": "object",
"properties": {
"GeneralDetails": {
"$ref": "#/definitions/GeneralDetails"
},
"Family": {
"$ref": "#/definitions/Family"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"projectDetails": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projects": {
"$ref": "#/definitions/projects"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projects": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projectsAdditional": {
"$ref": "#/definitions/projectsAdditional"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projectsAdditional": {
"type": "array",
"items": {
"properties": {
"Additional_name": {
"type": "string"
},
"Additional_areacode": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
},
"GeneralDetails": {
"type": "object",
"properties": {
"age": {
"type": "number"
},
"married": {
"type": "boolean"
},
"phone": {
"type": "number",
"aem:afProperties": {
"sling:resourceType": "/libs/fd/af/components/guidetelephone",
"guideNodeClass": "guideTelephone"
}
},
"address": {
"type": "string"
}
}
},
"Family": {
"type": "object",
"properties": {
"spouse": {
"$ref": "#/definitions/spouse"
},
"kids": {
"$ref": "#/definitions/kids"
}
}
},
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number"
},
"yearly": {
"type": "number"
}
}
},
"spouse": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"kids": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
}
},
"type": "object",
"properties": {
"employee": {
"$ref": "#/definitions/employee"
}
}
}
可重用架构定义 reusable-schema-definitions
定义键用于标识可重用架构。 可重用架构定义用于创建片段。 下面给出了具有定义的示例JSON架构:
{
"$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" }
}
}
上例定义了一个客户记录,其中每个客户都有一个送货地址和账单地址。 两个地址的结构相同(地址具有街道地址、城市和州/省),因此最好不要重复这些地址。 它还使得添加和删除字段对于任何未来的更改都非常容易。
在JSON架构定义中预配置字段 pre-configuring-fields-in-json-schema-definition
您可以使用 aem:afProperties 属性,用于预配置要映射到自定义自适应表单组件的JSON架构字段。 下面列出了一个示例:
{
"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
您可以向JSON架构元素添加以下限制,以限制自适应表单组件可以接受的值:
启用符合架构的数据 enablig-schema-compliant-data
要启用所有基于JSON架构的自适应Forms在提交表单时生成与架构兼容的数据,请执行以下步骤:
- 转到Experience ManagerWeb控制台,网址为
https://server:host/system/console/configMgr
. - 定位 自适应表单和互动通信Web渠道配置.
- 选择以在编辑模式下打开配置。
- 选择 生成符合架构的数据 复选框。
- 保存设置。
不受支持的结构 non-supported-constructs
自适应Forms不支持以下JSON架构结构:
- 空类型
- 合并类型,例如any和
- OneOf、AnyOf、All和NOT
- 仅支持同质数组。 因此,项约束必须是对象,而不是数组。
常见问题 frequently-asked-questions
为什么我无法为可重复的子表单(minOccours或maxOccurs值大于1)拖动子表单的单个元素(从任何复杂类型生成的结构)?
在可重复的子表单中,必须使用完整的子表单。 如果只需要选择字段,请使用整个结构并删除不需要的字段。
我在内容查找器中有一个长且复杂的结构。 如何查找特定元素?
您有两个选项:
- 滚动浏览树结构
- 使用搜索框查找元素
JSON架构文件的扩展名应该是什么?
JSON架构文件的扩展名必须是.schema.json。 例如, <filename>.schema.json。
另请参阅 see-also
- 创建 AEM 自适应表单
- 将 AEM 自适应表单添加到 AEM Sites 页面
- 将主题应用于 AEM 自适应表单
- 将组件添加到 AEM 自适应表单
- 在 AEM 自适应表单中使用 CAPTCHA
- 生成 AEM 自适应表单的 PDF 版本 (DoR)
- 翻译 AEM 自适应表单
- 为自适应表单启用 Adobe Analytics 以跟踪表单使用情况
- 将自适应表单连接到 Microsoft SharePoint
- 将自适应表单连接到 Microsoft Power Automate
- 将自适应表单连接到 Microsoft OneDrive
- 将自适应表单连接到 Microsoft Azure Blob 存储
- 将自适应表单连接到 Salesforce
- 在 AEM 自适应表单中使用 Adobe Sign
- 为自适应表单添加新区域设置
- 将自适应表单数据发送到数据库
- 将自适应表单数据发送到 REST 端点
- 将自适应表单数据发送到 AEM 工作流
- 使用 Forms Portal 在 AEM 网站上列出 AEM 自适应表单