Form

A form allows the grouping of properties to be displayed in a specific part of the UI page. The form component is capable of displaying a large list of properties that can be allied together and also offers a wide range of options to organize the information on the page.

The form component has the following structure:

"form": {
	"collapsible": false,
	"sections": [
		{
			"title": "boilerplatekey",
			"sub-section": [
				{
					"region": {
						"sets": []
					}
				},
				{
					"title": "boilerplatekey",
					"region": {
						"sets": []
					}
				}
			]
		},
		{
			"title": "boilerplatekey",
			"sub-section": [
				{
					"title": "boilerplatekey",
					"subSectionResource": {
						"listResource": "<resource>",
						"parentResource": "<parentResource>"
					},
					"sort": {},
					"table": {
						"download": true, //set to true to enable download feature for the table.
						"actions": [],
						"row": {}
					}
				}
			]
		}
	]
}

UI Specifications

Section

The form allows different presentation styles to display data on the UI page in an efficient manner.

The form data is categorized into multiple sections. Each section can be made collapsible by setting the property collapsible to true for the section.

In addition to that an anchor menu is also provided for the form component (drop-down) which users can use to swiftly switch between multiple sections.

Sub-section

Each section is further divided into multiple sub-sections. Each sub-section can be configured to display the information either in a tabular format or as a region based on the nature of the data i.e. by defining a 'region' or 'table' component within each sub-section.

For tabular representation, it is recommended for the users to configure only the list properties having a maximum of 10 rows as a table within the form. Any list attribute having more than 10 rows should be configured as Tab.

The sub-section is an independent unit and can display the data from:

• A top-level object

• Any list property linked to the top-level object

This is controlled by defining the subSectionResource property within the sub-section.

Top-level

When subSectionResource is not specified, all the properties within the region or table are considered relative to the top level i.e. direct properties of the resource.

List Property Linked to the Top-level

The subSectionResource setting is used to specify the listResource that must be shown in the sub-section.

When specified, the list resource becomes the anchor point for all the properties within the region or the table component are defined within the sub-section.

The listResource setting must specify the name of the list property which is either directly accessible from the top-level resource, or a child list resource (only if sub-section is configured to use a table) in case its parent entity has one-to-one-child relation with the top-level resource.

Additionaly it is also possible to hide a sub-section referring to a listResource based on a condition. Example:

{
	"name": "<condition name>",
	"type": "standard",
	"evaluateConditions": [
		{
			"condition": "<condition>",
			"actions": [
				{
					"result": true,
					"sub-section": [
						{
							"name": "<listResource>",
							"display": "never"
						}
					]
				},
				{
					"result": false,
					"sub-section": [
						{
							"name": "listResource",
							"display": "always"
						}
					]
				}
			]
		}
	]
}