Forms guide

58min
This documentation page will be in demand until a form builder is added to HyperPortal.
﻿
Branding settings
We can add some custom CSS styles and fonts to brand the appearance of the form. For customization, contact consultants.
Form Object
The form is formed from the object, which is located in the Portal header — "Templates -> Forms".
This object contains:
JSON
{
  "definitionId": "test", // 1
  "form": { // 2
    "ui": { ... },
	"data": { ... },
	"schema": { ... }
  },
  "head": { // 3
    "banner": "Absolute URL to image", // 3.1
	"description": "Description text", // 3.2
	"logo": "Absolute URL to image" // 3.3
	"formMaxWidth": 700, // 3.4
  },
  "i18n": { // 4
    "en": {...} // 4.1
  },
  "id": "test_id", // 5
  "lang": "en", // 6
  "title": "Test form title", // 7
  "tokenRequired": true // 8
}
{
  "definitionId": "test", // 1
  "form": { // 2
    "ui": { ... },
	"data": { ... },
	"schema": { ... }
  },
  "head": { // 3
    "banner": "Absolute URL to image", // 3.1
	"description": "Description text", // 3.2
	"logo": "Absolute URL to image" // 3.3
	"formMaxWidth": 700, // 3.4
  },
  "i18n": { // 4
    "en": {...} // 4.1
  },
  "id": "test_id", // 5
  "lang": "en", // 6
  "title": "Test form title", // 7
  "tokenRequired": true // 8
}
﻿
An ID for the form template. The key is required. Installed by the system;
An object containing the schema, UI and default data for the form. Read more below;
An object containing data about the form (description and logo). Optional. A logo can exist without a description, as well as a description without a logo.
Absolute link to the image with the banner;
Description text. No has limitation on the amount of text. It should be borne in mind that a large volume may look strange (the block will fill the top part of the page and the user will not see the form);
Absolute link to the image with the logo.
Max width for form is an optional parameter. 
﻿Localization object. NOT TO BE CONFUSED WITH FORM LOCALIZATION. Read more below;
Specifying the language code.
Form ID. This field is required, set by the system;
The key is responsible for the default form language. Read more below (ADD LINK);
Form title (name). Used only for display in the Portal;
The key is responsible for the use of the token in the url of the form to identify the user. The key is optional. Its absence is equal to tokenRequired === false.
By structure, the form object has three keys schema , ui and data. We only care about the first two (schema and ui).
﻿
Localization of phrases
There are two localization objects. Form localization (dynamic object, keys based on form schema) and phrase localization (this object).
These phrases are common to all future forms. The list of available phrases will be updated in this documentation (if the developers are not too lazy 😁 )
Key name
Key description
successMessage
Message for successful form submission.
submitButtonText
Submit button text
﻿
Form language
The lang key allows you to specify the default form language. Default language must refer to the already existing i18n translations. The following text only applies to the form application, in custom projects such as a dealer, the localization logic may differ.


The key is optional.

To the form library has been added the logjc to automatically detect the language for the correct display of form data.
First of all, the presence of data about the form is checked, and if there is no such data, the fallback language is used, this is either the language that will be passed by the developer into the library component (props - language), or the default language, hardcoded into the application (English). Then, if data for the form is available. the form language is checked (property in the form object - lang) and the list of available localizations into the ui object (ui -> i18n). If this data is not available, the fallback language will also be used (according to the logic described above in this paragraph).﻿
And finally, if all the data is available, and they are correct (and also at each step it is checked that the language is in the list of available languages ui -> i18n), the required language is determined in the following order:
the interface language passed by the developer into the form component (props - language);
language specified as form language (form object, key - lang);
language of the user's browser;
and in the case of a fallback language, the default application language (English).
﻿
Schema
Schema is a structured document. It describes the type of form (controls, types, nesting, etc.)
JSON
{
  "schema": {
    "type": "object",
    "required": [
	  "validations__required_control"
    ],
    "properties": {
	  "string_controls__single_string": {
	    "type": "string"
      },
	  "number_controls__integer_range_steps": {
        "type": "integer",
        "minimum": 0,
        "maximum": 100,
        "multipleOf": 10,
        "default": 0
      }
    }
  }
}
{
  "schema": {
    "type": "object",
    "required": [
	  "validations__required_control"
    ],
    "properties": {
	  "string_controls__single_string": {
	    "type": "string"
      },
	  "number_controls__integer_range_steps": {
        "type": "integer",
        "minimum": 0,
        "maximum": 100,
        "multipleOf": 10,
        "default": 0
      }
    }
  }
}
﻿
According to the example above:

type - group declaration (type object);

required- the names of the required fields are listed here;

properties- declaration of controls nested in the group.

names of controls - the name of controls in the structure of the form;

﻿
UI
UI is a document for the appearance and behavior of controls.
JSON
{
	"ui": {
		"ui:order": [
			"radioButtons",
			"*",
			"firstName"
		],
		"radioButtons": {
			"ui:widget": "radio",
			"ui:options": {
				...
			}
		},
		"i18n": {
			"en": {
				...
			},
			"nl": {
				...
			},
		}
	}
}

{
	"ui": {
		"ui:order": [
			"radioButtons",
			"*",
			"firstName"
		],
		"radioButtons": {
			"ui:widget": "radio",
			"ui:options": {
				...
			}
		},
		"i18n": {
			"en": {
				...
			},
			"nl": {
				...
			},
		}
	}
}
﻿
ui:order - array of fields, which sets the display order of controls. The object is NOT required, but not creating it can lead to strange displaying of the order of controls. Fields not listed will appear in random order after those listed. You can also use asterix(*) to specify where to render fields that are not specified.

i18n is the localization object. It is REQUIRED to add (with at least one locale). The structure of the object will be described below.


name of control - the list (the order is not important) indicates the fields to which you need to add properties (not all fields require additional customization).
﻿
Form schema localization
To localize the form, use the object ui → i18n.
ATTENTION
The object is desirable. but optional.
If no translations are specified, the forms will accept the default values (from schema), if they are also absent, then the names of the controls will be added to the titles.
It is also worth considering that if the localization object has translations for a control that is not in the form, then blocks will be displayed during rendering, indicating that the controls were not found.
JSON
{
	"schema": {
		// ... schema definition
	},
	"ui": {
		"i18n": { // 1
			"en": { // 2
				"ui:title": "Form title", // 3
				"ui:description": "Form description", // 4
				"string_controls__single_string": { // 5
					"ui:title": "Single string field", // 6
					"ui:description": "Description of single string field", // 7
					"ui:placeholder": "Placeholder of single string field", // 8
					"ui:help": "Help of single string field" // 9
				},
				// ... next control
			}
			// ... next locale
		}
	}
}
{
	"schema": {
		// ... schema definition
	},
	"ui": {
		"i18n": { // 1
			"en": { // 2
				"ui:title": "Form title", // 3
				"ui:description": "Form description", // 4
				"string_controls__single_string": { // 5
					"ui:title": "Single string field", // 6
					"ui:description": "Description of single string field", // 7
					"ui:placeholder": "Placeholder of single string field", // 8
					"ui:help": "Help of single string field" // 9
				},
				// ... next control
			}
			// ... next locale
		}
	}
}
﻿
Defining a localization object;
Locale declaration;
The first ui:title after the locale declaration is the title of the form (it will be rendered at the very top of the form);
The first ui:description after the locale declaration is the form description (will be rendered below the title);
Name of the control. The name must exactly match the name of the control in the schema.
ui:title is title for the control.
Some controls do not display titles (see below);
ui:description key to describe the control;
ui:placeholder key for a hint in the input field. Some controls do not display titles (see below);
ui:help is the key for the help text.
﻿
Controls
String controls
JSON
{
	"stringControl": {
		"type": "string", // 1
		"default": "default value", // 2
		"format": "uri" // 3
		"examples": [ // 4
			"Example 1",
			"Example 2",
			"Example 3"
		],
		"minLength": 5, // 5
		"maxLength": 5, // 6
		"readOnly": true, // 7
		"const": "3.14" // 8
	}
}
{
	"stringControl": {
		"type": "string", // 1
		"default": "default value", // 2
		"format": "uri" // 3
		"examples": [ // 4
			"Example 1",
			"Example 2",
			"Example 3"
		],
		"minLength": 5, // 5
		"maxLength": 5, // 6
		"readOnly": true, // 7
		"const": "3.14" // 8
	}
}
﻿
JSON
{
	"ui": {
		"stringControl": {
			"ui:disabled": "true" // 9
		}
	}
}
{
	"ui": {
		"stringControl": {
			"ui:disabled": "true" // 9
		}
	}
}
﻿
Declaration of the type of control;
Default value. The value must be of the correct type (for a string - a string, for a boolean - a boolean);
Optional field for custom field validation.
The following fields are available:
email - will add the type email to the field. Will validate the entered value.
password- will add the type password to the field, thereby hiding the entered value from prying eyes;
uri- will add the type urito the field, will validate the field for the correctness of the url;
color - change the type of control to color picker;
hidden - hide the control from displaying, but leave it in HTML. Doesn't display a title and a placeholder for input. You can set a default value for forwarding information when submitting a form;
regex - adds validation of the entered value according to the regular expression. For validation to work, you need to add the pattern property. Example - HyperCharge-\\d.
date - will change the type of control to the calendar;
date-time - will change the type of control to a calendar with a time;
Property will create a field with text input and an additional selector with examples of values;
Validation of the entered value for the minimum string length (applicable only to the string type);
Validation of the entered value for the maximum string length (applicable only to the string type);
The property will add the readonly attribute (the field cannot be changed, but can still be selected and on focus outline border will appear);
The property will add validation for the value as constants (only one value);
The property will add the disabled attribute (the field cannot be changed, selected and focused);
Textarea
JSON
{
	"ui": {
		"stringControlName": {
			"ui:widget": "textarea", // 1
      		"ui:rows": 10 // 2
		}
	}
}
{
	"ui": {
		"stringControlName": {
			"ui:widget": "textarea", // 1
      		"ui:rows": 10 // 2
		}
	}
}
﻿
Definition of line control as textarea;
Setting the minimum height of the textarea field. This field is optional.
﻿
Numeric controls
JSON
{
	"numberControlName": {
		"type": "number", // 1
		"default": 15, // 2
		"minimum": 5, // 3
		"maximum": 5, // 4
		"exclusiveMinimum": 5, // 5
		"exclusiveMaximum": 5, // 6
		"multipleOf": 0.01 // 7
	}
}
{
	"numberControlName": {
		"type": "number", // 1
		"default": 15, // 2
		"minimum": 5, // 3
		"maximum": 5, // 4
		"exclusiveMinimum": 5, // 5
		"exclusiveMaximum": 5, // 6
		"multipleOf": 0.01 // 7
	}
}
﻿
Declaration of the type of control.
Two values are allowed - number and  integer.
number - all numbers are allowed;
integer - only integers are allowed.

Default value. The value must be the same as the type;
Introduces a restriction on the minimum number (≥);
Introduces a limit on the maximum number (≤);
Introduces a restriction on the minimum number, excluding the specified (>);
Introduces a limit on the maximum number, excluding the specified (<);
Sets the step size when changing the value with the up/down arrows.
Range
For the slider to work correctly, the scheme needs to be supplemented with a parameter in the ui object.
JSON
{
	"rangeControlName": {
		"type": "number", // 1
		"default": 0, // 2
		"minimum": 5, // 3
		"maximum": 5, // 4
		"multipleOf": 0.01 // 5
	}
}
{
	"rangeControlName": {
		"type": "number", // 1
		"default": 0, // 2
		"minimum": 5, // 3
		"maximum": 5, // 4
		"multipleOf": 0.01 // 5
	}
}
﻿
JSON
{
	"ui": {
		"rangeControlName": {
			"ui:widget": "range" // 6
		}
	}
}
{
	"ui": {
		"rangeControlName": {
			"ui:widget": "range" // 6
		}
	}
}
﻿
1. Definition of the type of control;
2. Default value. The value must be the same as the type;
3. Indication of the minimum value of the slider;
4. Indication of the maximum value of the slider;
5. Sets the step size;
6. Specifying the slider widget.
﻿
RangeButton
For the slider to work correctly, the scheme needs to be supplemented with a parameter in the ui object.
JSON
{
	"rangeControlName": {
		"type": "number", // 1
		"default": 9, // 2
		"minimum": 1, // 3
		"maximum": 10, // 4
		"multipleOf": 1 // 5
	}
}
{
	"rangeControlName": {
		"type": "number", // 1
		"default": 9, // 2
		"minimum": 1, // 3
		"maximum": 10, // 4
		"multipleOf": 1 // 5
	}
}
﻿
JS
{
    "ui": {
        "i18n": {
            "en": {
                "rangeControlName": {
                    "ui:start_range": "start_range",
                    "ui:end_range": "end_range"
                }
            }
        },
        "rangeControlName": {
            "ui:widget": "RangeButtonWidget"
        }
    }
}
{
    "ui": {
        "i18n": {
            "en": {
                "rangeControlName": {
                    "ui:start_range": "start_range",
                    "ui:end_range": "end_range"
                }
            }
        },
        "rangeControlName": {
            "ui:widget": "RangeButtonWidget"
        }
    }
}
﻿
1. Definition of the type of control;
2. Default value. The value must be the same as the type and in interval from minimum to maximum;
3. Indication of the minimum value of the buttons;
4. Indication of the maximum value of the buttons;
5. Sets the step size is optional parametr, default - 1; 
6. Specifying the Range Button widget.
﻿
Select controls
Single select
JSON
{
  "singleSelectControlName": {
    "type": "number", // 1
  	"default": 3,
	"enum": [ 1, 2, 3 ], // 2
	"enumNames": [ // 3
      "One (value - `chair`)",
	  "Two (value - `window`)",
	  "Three (value - `table`)"
	]
  }
}
{
  "singleSelectControlName": {
    "type": "number", // 1
  	"default": 3,
	"enum": [ 1, 2, 3 ], // 2
	"enumNames": [ // 3
      "One (value - `chair`)",
	  "Two (value - `window`)",
	  "Three (value - `table`)"
	]
  }
}
﻿
JSON
{
  "ui": {
    "singleSelectControlName": { // 4
      "ui:enumDisabled": [ // 5
        2 // 6
      ]
    }
  }
}
{
  "ui": {
    "singleSelectControlName": { // 4
      "ui:enumDisabled": [ // 5
        2 // 6
      ]
    }
  }
}
﻿
JSON
{
  "ui": {
    "i18n": {
      "en": {
        "singleSelectControlName": {
          // ... default locales (title, help, description)
          "enumNames": [ // 7
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
{
  "ui": {
    "i18n": {
      "en": {
        "singleSelectControlName": {
          // ... default locales (title, help, description)
          "enumNames": [ // 7
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
﻿
Definition of the type of control.
Strings, numbers and boolean are available (for boolean only Yes/No and these values are set by default);
Array of available values. Required field for string and number.
An array of displayed names, the number of elements must match the number of elements in the enum field. This field is optional.
The name of the control must match the name in the schema;
Property name to disable specific selector options;
Array of values to disable. Variants must match the enum key in the control in the schema.
Array of localized values. You can use follow keywords - enumNames or ui:enumNames.  Be careful, the number of values for localization should be the same as specified in the field scheme (point 2). If there are no values for localization or they are less than the values specified in the field scheme (point 2), then the missing values will be taken from the field "enumNames" of the field scheme (point 3), and if they are missing, then from the field "enum" (point 2).
Multiple select
JSON
{
  "multipleSelectControlName": {
    "type": "array", // 1
	"default": [ "floor", "door" ],
	"uniqueItems": true, // 2
	"minItems": 2, // 3
	"maxItems": 4, // 4
	"items": { // 5
	  "type": "string", // 6
	  "enum": [ // 7
	    "chair",
		"window",
		"table",
		"floor",
		"door"
      ],
	  "enumNames": [ // 8
	    "One (value - `chair`)",
		"Two (value - `window`)",
		"Three (value - `table`)",
		"Four (value - `floor`)",
		"Five (value - `door`)"
      ]		
	}
  }
}
{
  "multipleSelectControlName": {
    "type": "array", // 1
	"default": [ "floor", "door" ],
	"uniqueItems": true, // 2
	"minItems": 2, // 3
	"maxItems": 4, // 4
	"items": { // 5
	  "type": "string", // 6
	  "enum": [ // 7
	    "chair",
		"window",
		"table",
		"floor",
		"door"
      ],
	  "enumNames": [ // 8
	    "One (value - `chair`)",
		"Two (value - `window`)",
		"Three (value - `table`)",
		"Four (value - `floor`)",
		"Five (value - `door`)"
      ]		
	}
  }
}
﻿
JSON
{
  "ui": {
    "multipleSelectControlName": { // 9
      "ui:enumDisabled": [ // 10
        "table" // 11
      ]
    }
  }
}
{
  "ui": {
    "multipleSelectControlName": { // 9
      "ui:enumDisabled": [ // 10
        "table" // 11
      ]
    }
  }
}
﻿
JSON
{
  "ui": {
    "i18n": {
      "en": {
        "multipleSelectControlName": {
          // ... default locales (title, help, description)
          "enumNames": [ // 12
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
{
  "ui": {
    "i18n": {
      "en": {
        "multipleSelectControlName": {
          // ... default locales (title, help, description)
          "enumNames": [ // 12
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
﻿
Definiton of the type of control.
Only array is available.
Required key to enable multiple selector. Works only with the array type;
Restriction on the minimum number of elements to choose from;
Restriction on the maximum number of elements to choose from;
Required key to define a multiple selector;
Definition of the type of values. Strings and numbers are allowed;
Array of values ​​must be of the same type from 6 points;
Array of displayed names, the number of elements must match the number of elements in the enum field. This field is optional;
The name of the control must match the name in the schema;
Property name to disable specific selector options;
Array of values ​​to disable. Variants must match the enum key in the control in the schema.
Array of localized values. You can use follow keywords - enumNames or ui:enumNames.  Be careful, the number of values for localization should be the same as specified in the field scheme (point 7). If there are no values for localization or they are less than the values specified in the field scheme (point 7), then the missing values will be taken from the field "enumNames" of the field scheme (point 8), and if they are missing, then from the field "enum" (point 7).
﻿
Checkboxes and radio buttons
Single checkbox
JSON
{
	"singleCheckbox": {
		"type": "boolean", // 1
    	"default": false // 2
	}
}
{
	"singleCheckbox": {
		"type": "boolean", // 1
    	"default": false // 2
	}
}
﻿
Definition of the control type, only boolean is available;
Definition of the default type. The field is optional.
Multiple checkboxes
JSON
{
  "multipleCheckboxes": {
    "type": "array", // 1
	"uniqueItems": true, // 2
	"minItems": 2, // 3
	"maxItems": 4, // 4
	"items": { // 5
	  "type": "string", // 6
	  "enum": [ // 7
	    "chair",
		"window",
		"table",
		"floor",
		"door"
      ],
	  "enumNames": [ // 8
	    "One (value - `chair`)",
		"Two (value - `window`)",
		"Three (value - `table`)",
		"Four (value - `floor`)",
		"Five (value - `door`)"
      ]		
	}
  }
}
{
  "multipleCheckboxes": {
    "type": "array", // 1
	"uniqueItems": true, // 2
	"minItems": 2, // 3
	"maxItems": 4, // 4
	"items": { // 5
	  "type": "string", // 6
	  "enum": [ // 7
	    "chair",
		"window",
		"table",
		"floor",
		"door"
      ],
	  "enumNames": [ // 8
	    "One (value - `chair`)",
		"Two (value - `window`)",
		"Three (value - `table`)",
		"Four (value - `floor`)",
		"Five (value - `door`)"
      ]		
	}
  }
}
﻿
JSON
{
  "ui": {
    "multipleCheckboxes": { // 9
	  "ui:widget": "checkboxes", // 10
	  "ui:inline": true // 11
	}
  }
}
{
  "ui": {
    "multipleCheckboxes": { // 9
	  "ui:widget": "checkboxes", // 10
	  "ui:inline": true // 11
	}
  }
}
﻿
JSON
{
  "ui": {
    "i18n": {
      "en": {
        "multipleCheckboxes": {
          // ... default locales (title, help, description)
          "enumNames": [ // 12
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
{
  "ui": {
    "i18n": {
      "en": {
        "multipleCheckboxes": {
          // ... default locales (title, help, description)
          "enumNames": [ // 12
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
﻿
Definition of the type of control.
Only array is available.
Required key to enable multiple checkboxes. Works only with the array type;
Restriction on the minimum number of elements to choose from;
Restriction on the maximum number of elements to choose from;
Required key to define multiple checkboxes;
Definition of the type of values. Strings and numbers are allowed;
Array of values ​​must be of the same type from 6 points;
Array of displayed names, the number of elements must match the number of elements in the enum field. This field is optional;
The name of the control must match the name in the schema;
Application of the widget multiple checkboxes;
The key that determines the display of checkbox items.
ui:inline=true - inline;
ui:inline=false - columns;
Array of localized values. You can use follow keywords - enumNames or ui:enumNames.  Be careful, the number of values for localization should be the same as specified in the field scheme (point 7). If there are no values for localization or they are less than the values specified in the field scheme (point 7), then the missing values will be taken from the field "enumNames" of the field scheme (point 8), and if they are missing, then from the field "enum" (point 7).
﻿
Agreements checkbox
Attention!
This custom widget requires required options (links and templateString), and links must be of a specific format. If some options are missed, or the text is not specified for the links, or the value for a link, the widget will throw an exception and the form will crash.

The following describes how to customize this widget. 

Be attentive and careful!
JSON
{
	"agreement_checkbox": {
		"type": "boolean", // 1
	}
}
{
	"agreement_checkbox": {
		"type": "boolean", // 1
	}
}
﻿
JSON
{
  "ui": {
    "agreement_checkbox": {
      "ui:widget": "AgreementsCheckboxWidget", // 2
      "ui:field": "custom" // 3
    },
    "i18n": {
      "en": {
        "agreement_checkbox": {
          // ... // 4
          "ui:options": { // 5
            "links": { // 6
              "legal": { // 7
                "link": "https://google.com/2", // 8
                "text": "the Terms of Service" // 9
              },
              "privacy": { // 7
                "link": "https://google.com/1", // 8
                "text": "Privacy Policy" // 9
              }
            },
            "templateString": "I accept %%privacy%% and %%legal%%." // 10
          }
        }
      }
    }
  }
}
{
  "ui": {
    "agreement_checkbox": {
      "ui:widget": "AgreementsCheckboxWidget", // 2
      "ui:field": "custom" // 3
    },
    "i18n": {
      "en": {
        "agreement_checkbox": {
          // ... // 4
          "ui:options": { // 5
            "links": { // 6
              "legal": { // 7
                "link": "https://google.com/2", // 8
                "text": "the Terms of Service" // 9
              },
              "privacy": { // 7
                "link": "https://google.com/1", // 8
                "text": "Privacy Policy" // 9
              }
            },
            "templateString": "I accept %%privacy%% and %%legal%%." // 10
          }
        }
      }
    }
  }
}
﻿
Determining the type of controller. Only boolean values are available;
Defining a custom widget for the Agreements checkbox;
Optional parameter to show/hide the title of the custom widget (Agreements checkbox);
Here you can define default field translations (title, help, description);
Special options for custom Agreement checkbox widget;
Required option, where you can define links for the checkbox;
Link key name. The key value must match the key in the template string (at point 10);
This key is required, means the value for the link (where the user will be sent);
This key is required, meaning the value for the link text;
Template string where links from point 6 will be inserted. Places to insert should be circled with a double percent sign (%%).
Radio buttons
JSON
{
  "radioButtons": {
    "type": "string", // 1
	"enum": [ // 2
	  "chair",
	  "window",
	  "table",
	  "floor",
	  "door"
	],
	"enumNames": [ // 3
	  "One (value - `chair`)",
	  "Two (value - `window`)",
	  "Three (value - `table`)",
	  "Four (value - `floor`)",
	  "Five (value - `door`)"
	]		
  }
}
{
  "radioButtons": {
    "type": "string", // 1
	"enum": [ // 2
	  "chair",
	  "window",
	  "table",
	  "floor",
	  "door"
	],
	"enumNames": [ // 3
	  "One (value - `chair`)",
	  "Two (value - `window`)",
	  "Three (value - `table`)",
	  "Four (value - `floor`)",
	  "Five (value - `door`)"
	]		
  }
}
﻿
JSON
{
  "ui": {
    "radioButtons": { // 4
	  "ui:widget": "radio", // 5
	  "ui:inline": true // 6
	}
  }
}
{
  "ui": {
    "radioButtons": { // 4
	  "ui:widget": "radio", // 5
	  "ui:inline": true // 6
	}
  }
}
﻿
JSON
{
  "ui": {
    "i18n": {
      "en": {
        "radioButtons": {
          // ... default locales (title, help, description)
          "enumNames": [ // 7
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
{
  "ui": {
    "i18n": {
      "en": {
        "radioButtons": {
          // ... default locales (title, help, description)
          "enumNames": [ // 7
            "Lozalized value 1",
            "Lozalized value 1"
           ],
		},
		// ... next control
      }
      // ... next locale
    }
  }
}
﻿
Definitionof the type of values. Strings and numbers are allowed;
Array of values must be of the same type from 2 points;
An array of displayed names, the number of elements must match the number of elements in the enum field. This field is optional;
The name of the control must match the name in the schema;
Application of the radio button widget;
The key that determines the display of checkbox items.
ui:inline=true - inline;
ui:inline=false - columns;
Array of localized values. You can use follow keywords - enumNames or ui:enumNames.  Be careful, the number of values for localization should be the same as specified in the field scheme (point 2). If there are no values for localization or they are less than the values specified in the field scheme (point 2), then the missing values will be taken from the field "enumNames" of the field scheme (point 3), and if they are missing, then from the field "enum" (point 2).
﻿
Upload file(s)
Avaible file widget: 
file
files
FileWidgetWithPreview
Single file
JSON
{
	"uploadFile": {
		"type": "string" // 1
	}
}
{
	"uploadFile": {
		"type": "string" // 1
	}
}
﻿
JSON
{
	"ui": {
		"uploadFile": { // 2
		   "ui:widget": "file", // 3
	 	   "ui:accept": ".pdf,.jpg" // 4
   		 }
	}
}
{
	"ui": {
		"uploadFile": { // 2
		   "ui:widget": "file", // 3
	 	   "ui:accept": ".pdf,.jpg" // 4
   		 }
	}
}
﻿
Definition of the type of control. Only the string is available;
The name of the control must match the name in the schema;
Specifying field type "file" or "FileWidgetWithPreview";
Indication of the list of files available for upload. This field is optional.
Multiple files
JSON
{
  "multipleUploadFiles": {
    "type": "array", // 1
    "items": { // 2
      "type": "string" // 3
    }
  }
}
{
  "multipleUploadFiles": {
    "type": "array", // 1
    "items": { // 2
      "type": "string" // 3
    }
  }
}
﻿
JSON
{
	"ui": {
		"multipleUploadFiles": { // 4
			"ui:widget": "files" // 5 files or FileWidgetWithPreview
			"ui:accept": ".pdf,.jpg" // 6
		}
	}
}

{
	"ui": {
		"multipleUploadFiles": { // 4
			"ui:widget": "files" // 5 files or FileWidgetWithPreview
			"ui:accept": ".pdf,.jpg" // 6
		}
	}
}
﻿
Specifying the type of waiting for multiple downloads of files. Only array is available;
Required field for specifying multiple downloads of files;
Definition of the type of control. Only the string is available;
The name of the control must match the name in the schema;
Specifying field type "files" or "FileWidgetWithPreview";
Indication of the list of files available for upload. This field is optional.
Guide images
Overview
This is used to guide users in providing specific images with associated metadata, including positions, labels, and additional options.
UI Configuration
The ui property defines the user interface configuration for the form. Defines the custom widget and options for the guided images form.
JSON
{
  "form": {
    "ui": {
      "guidedImagesForm": { // 1
        "ui:widget": "GuideFileWithPreviewWidget", // 2
        "ui:options": {
          "position": [
            {
              "key": "frontLeft", // 3
              "labels": { // 4
                "de": "Vorne links",
                "en": "Front left",
                "fr": "Avant gauche",
                "it": "Anteriore sinistro",
                "nl": "Vooraan links",
                "pl": "Przedni lewy"
              },
              "overlayImage": "YwmFfNaqyiv_coXCxg_Oz", // 5
              "placeholderImage": "ZeHCknOGusCllwlBg_oNc", // 6
              "positionEntityId": "cVnvDBbfrEZfQDIXqKZmU" // 7
            },
            {
              "key": "frontRight",
              "labels": {
                "de": "Vorne rechts",
                "en": "Front right",
                "fr": "Avant droit",
                "it": "Anteriore destro",
                "nl": "Rechtsvoor",
                "pl": "Przednie prawe"
              },
              "overlayImage": "FDanKpMBLrjkAYJDEXnVa",
              "placeholderImage": "acjDWVrmQtMMADFywMkWo",
              "positionEntityId": "wxGiQWuEIlAbkWcTKDfPl"
            },
            {
              "key": "rearLeft",
              "labels": {
                "de": "Hinten links",
                "en": "Rear left",
                "fr": "Arrière gauche",
                "it": "Posteriore sinistro",
                "nl": "Links achter",
                "pl": "Tył lewy"
              },
              "overlayImage": "GvrdyqCnoUIfacvfDlPCi",
              "placeholderImage": "rGlRzroTYDhwMkfkjzBKP",
              "positionEntityId": "wwGijsNYFkBGNSlVYUcH_"
            },
            {
              "key": "rearRight",
              "labels": {
                "de": "Hinten rechts",
                "en": "Rear right",
                "fr": "Arrière droit",
                "it": "Posteriore destro",
                "nl": "Rechts achter",
                "pl": "Tylny prawy"
              },
              "overlayImage": "pFlflLvhHaVCkWhKmnJfX",
              "placeholderImage": "JjjFgMUOmbhnlGQXszwPn",
              "positionEntityId": "UuQixAqjNjMbYaogagehV"
            },
            {
              "key": "steerHigh",
              "labels": {
                "de": "Hoch steuern",
                "en": "Steer high",
                "fr": "Dirigez-vous vers le haut",
                "it": "Guida in alto",
                "nl": "Stuur hoog",
                "pl": "Kieruj się wysoko"
              },
              "positionEntityId": "ZKxdvLW_HtVWaWSjjwmtq"
            },
            {
              "key": "coPilotHigh",
              "labels": {
                "de": "Co-Pilot hoch",
                "en": "Co-pilot high",
                "fr": "Copilote haut",
                "it": "Copilota alto",
                "nl": "Co-piloot hoog",
                "pl": "Drugi pilot wysoki"
              },
              "positionEntityId": "UeIveLagHcSrzKfNoQOIk"
            },
            {
              "key": "sleepCabin",
              "labels": {
                "de": "Schlafkabine",
                "en": "Sleep cabin",
                "fr": "Cabine de couchage",
                "it": "Cabina letto",
                "nl": "Slaapcabine",
                "pl": "Kabina sypialna"
              },
              "positionEntityId": "IjQLDxOjD_ZMFNPbFYRqS"
            },
            {
              "key": "interiorLight",
              "labels": {
                "de": "Innenbeleuchtung",
                "en": "Interior light",
                "fr": "Lumière intérieure",
                "it": "Luce interiore",
                "nl": "Binnenverlichting",
                "pl": "Wewnętrzne światło"
              },
              "positionEntityId": "FCJhigLNTd_MQUMgVJlZl"
            },
            {
              "key": "frigOpen",
              "labels": {
                "de": "Kühlschrank offen",
                "en": "Frig open",
                "fr": "Frigo ouvert",
                "it": "Frigo aperto",
                "nl": "Frigo open",
                "pl": "Lodówka otwarta"
              },
              "positionEntityId": "Y_tInkPeCE_FNaJ_aDSuk"
            },
            {
              "key": "centralHeat",
              "labels": {
                "de": "Zentralheizung",
                "en": "Central heat",
                "fr": "Chauffage central",
                "it": "Calore centrale",
                "nl": "Centrale verwarming",
                "pl": "Centralne ogrzewanie"
              },
              "positionEntityId": "bmyoUDWmVRrP_UYToheRm"
            },
            {
              "key": "rightSteer",
              "labels": {
                "de": "Richtig lenken",
                "en": "Right steer",
                "fr": "Direction à droite",
                "it": "Sterzo destro",
                "nl": "Rechts sturen",
                "pl": "Kieruj w prawo"
              },
              "positionEntityId": "xhPjNxVnMVPaqyVAUfBmX"
            },
            {
              "key": "dashboard",
              "labels": {
                "de": "Armaturenbrett",
                "en": "Dashboard",
                "fr": "Tableau de bord",
                "it": "Pannello di controllo",
                "nl": "Dashboard",
                "pl": "Panel"
              },
              "positionEntityId": "LqMssIgZggkyLHJUZGRhN"
            }
          ],
          "guidedImagesDefinitionId": "inspectionGuideImage" // 8
        }
      }
    }
  }
}
{
  "form": {
    "ui": {
      "guidedImagesForm": { // 1
        "ui:widget": "GuideFileWithPreviewWidget", // 2
        "ui:options": {
          "position": [
            {
              "key": "frontLeft", // 3
              "labels": { // 4
                "de": "Vorne links",
                "en": "Front left",
                "fr": "Avant gauche",
                "it": "Anteriore sinistro",
                "nl": "Vooraan links",
                "pl": "Przedni lewy"
              },
              "overlayImage": "YwmFfNaqyiv_coXCxg_Oz", // 5
              "placeholderImage": "ZeHCknOGusCllwlBg_oNc", // 6
              "positionEntityId": "cVnvDBbfrEZfQDIXqKZmU" // 7
            },
            {
              "key": "frontRight",
              "labels": {
                "de": "Vorne rechts",
                "en": "Front right",
                "fr": "Avant droit",
                "it": "Anteriore destro",
                "nl": "Rechtsvoor",
                "pl": "Przednie prawe"
              },
              "overlayImage": "FDanKpMBLrjkAYJDEXnVa",
              "placeholderImage": "acjDWVrmQtMMADFywMkWo",
              "positionEntityId": "wxGiQWuEIlAbkWcTKDfPl"
            },
            {
              "key": "rearLeft",
              "labels": {
                "de": "Hinten links",
                "en": "Rear left",
                "fr": "Arrière gauche",
                "it": "Posteriore sinistro",
                "nl": "Links achter",
                "pl": "Tył lewy"
              },
              "overlayImage": "GvrdyqCnoUIfacvfDlPCi",
              "placeholderImage": "rGlRzroTYDhwMkfkjzBKP",
              "positionEntityId": "wwGijsNYFkBGNSlVYUcH_"
            },
            {
              "key": "rearRight",
              "labels": {
                "de": "Hinten rechts",
                "en": "Rear right",
                "fr": "Arrière droit",
                "it": "Posteriore destro",
                "nl": "Rechts achter",
                "pl": "Tylny prawy"
              },
              "overlayImage": "pFlflLvhHaVCkWhKmnJfX",
              "placeholderImage": "JjjFgMUOmbhnlGQXszwPn",
              "positionEntityId": "UuQixAqjNjMbYaogagehV"
            },
            {
              "key": "steerHigh",
              "labels": {
                "de": "Hoch steuern",
                "en": "Steer high",
                "fr": "Dirigez-vous vers le haut",
                "it": "Guida in alto",
                "nl": "Stuur hoog",
                "pl": "Kieruj się wysoko"
              },
              "positionEntityId": "ZKxdvLW_HtVWaWSjjwmtq"
            },
            {
              "key": "coPilotHigh",
              "labels": {
                "de": "Co-Pilot hoch",
                "en": "Co-pilot high",
                "fr": "Copilote haut",
                "it": "Copilota alto",
                "nl": "Co-piloot hoog",
                "pl": "Drugi pilot wysoki"
              },
              "positionEntityId": "UeIveLagHcSrzKfNoQOIk"
            },
            {
              "key": "sleepCabin",
              "labels": {
                "de": "Schlafkabine",
                "en": "Sleep cabin",
                "fr": "Cabine de couchage",
                "it": "Cabina letto",
                "nl": "Slaapcabine",
                "pl": "Kabina sypialna"
              },
              "positionEntityId": "IjQLDxOjD_ZMFNPbFYRqS"
            },
            {
              "key": "interiorLight",
              "labels": {
                "de": "Innenbeleuchtung",
                "en": "Interior light",
                "fr": "Lumière intérieure",
                "it": "Luce interiore",
                "nl": "Binnenverlichting",
                "pl": "Wewnętrzne światło"
              },
              "positionEntityId": "FCJhigLNTd_MQUMgVJlZl"
            },
            {
              "key": "frigOpen",
              "labels": {
                "de": "Kühlschrank offen",
                "en": "Frig open",
                "fr": "Frigo ouvert",
                "it": "Frigo aperto",
                "nl": "Frigo open",
                "pl": "Lodówka otwarta"
              },
              "positionEntityId": "Y_tInkPeCE_FNaJ_aDSuk"
            },
            {
              "key": "centralHeat",
              "labels": {
                "de": "Zentralheizung",
                "en": "Central heat",
                "fr": "Chauffage central",
                "it": "Calore centrale",
                "nl": "Centrale verwarming",
                "pl": "Centralne ogrzewanie"
              },
              "positionEntityId": "bmyoUDWmVRrP_UYToheRm"
            },
            {
              "key": "rightSteer",
              "labels": {
                "de": "Richtig lenken",
                "en": "Right steer",
                "fr": "Direction à droite",
                "it": "Sterzo destro",
                "nl": "Rechts sturen",
                "pl": "Kieruj w prawo"
              },
              "positionEntityId": "xhPjNxVnMVPaqyVAUfBmX"
            },
            {
              "key": "dashboard",
              "labels": {
                "de": "Armaturenbrett",
                "en": "Dashboard",
                "fr": "Tableau de bord",
                "it": "Pannello di controllo",
                "nl": "Dashboard",
                "pl": "Panel"
              },
              "positionEntityId": "LqMssIgZggkyLHJUZGRhN"
            }
          ],
          "guidedImagesDefinitionId": "inspectionGuideImage" // 8
        }
      }
    }
  }
}
﻿
Options:
widget - Configure that use specific widget
position - An array of objects defining specific positions and their associated labels, overlay images, placeholder images, and position entity IDs.
guidedImagesDefinitionId - This is a reference to the entityId where images are stored, which is created during the setup of hyper-inspection.
Properties
JSON
{
  "properties": {
    "guidedImagesForm": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "image": {
            "type": [
              "string",
              "null"
            ]
          },
          "title": {
            "type": "string"
          },
          "entityId": {
            "type": "string"
          },
          "position": {
            "type": "string"
          },
          "isApproved": {
            "type": [
              "boolean",
              "null"
            ]
          },
          "definitionId": {
            "type": "string"
          }
        }
      },
      "title": "Guide images",
      "default": "{{#toJson}}{{#fn.pick}}{{#fn.stringify}}formItem.guidedImages{{/fn.stringify}}|title,definitionId,entityId,position,image,isApproved{{/fn.pick}}{{/toJson}}"
    }
  }
}
{
  "properties": {
    "guidedImagesForm": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "image": {
            "type": [
              "string",
              "null"
            ]
          },
          "title": {
            "type": "string"
          },
          "entityId": {
            "type": "string"
          },
          "position": {
            "type": "string"
          },
          "isApproved": {
            "type": [
              "boolean",
              "null"
            ]
          },
          "definitionId": {
            "type": "string"
          }
        }
      },
      "title": "Guide images",
      "default": "{{#toJson}}{{#fn.pick}}{{#fn.stringify}}formItem.guidedImages{{/fn.stringify}}|title,definitionId,entityId,position,image,isApproved{{/fn.pick}}{{/toJson}}"
    }
  }
}
﻿
guidedImages: An array of objects, each representing an image with associated metadata.
Type  - array
Default: A default value generated using a JSON template string.
toJson:  Represents a custom lambda that converts its argument to a JSON string. 
pick: Custom lambda that selects specific properties from the object passed
stringify: A custom lambda that converts an object or data structure to a string representation. It is used as an additional for obtaining arrays or objects
Items: Defines the structure of each item in the array.
Type - object
Properties:
image: The image id or null.
title: The title of the image.
entityId: The ID of the entity associated with the image.
position: The position identifier id.
isApproved: Approval status of the image.(for new every is null, after change image is also true)
definitionId: The ID of the definition associated with the image.
﻿
Calendars
Native calendar with date and time
JSON
{
	"dateTimeCalendar": {
		"type": "string", // 1
    	"format": "date-time", // 2
	    "disabledInput": true, // 3
        "relativeMaximum": { // 4
          "day": 4, // 4.1
          "year": 4, // 4.2
          "month": 4 // 4.3
        },
        "relativeMinimum": { // 5
          "day": 4, // 5.1
          "year": 4, // 5.2
          "month": 4 // 5.3
        }
	}
}
{
	"dateTimeCalendar": {
		"type": "string", // 1
    	"format": "date-time", // 2
	    "disabledInput": true, // 3
        "relativeMaximum": { // 4
          "day": 4, // 4.1
          "year": 4, // 4.2
          "month": 4 // 4.3
        },
        "relativeMinimum": { // 5
          "day": 4, // 5.1
          "year": 4, // 5.2
          "month": 4 // 5.3
        }
	}
}
﻿
Definition of the type of control. Only the string is available;
Specifying the control format for the native calendar with time data;
Ability to disable keyboard input (only clicking on the icon works);
Possibility to limit the maximum date
Limit day
Limit year
Limit month
Possibility to limit the minimum date
Limit day
Limit year
Limit month
Native calendar with date
JS
{
	"dateCalendar": {
		"type": "string", // 1
    	"format": "date", // 2
	    "disabledInput": true, // 3
        "relativeMaximum": { // 4
          "day": 4, // 4.1
          "year": 4, // 4.2
          "month": 4 // 4.3
        },
        "relativeMinimum": { // 5
          "day": 4, // 5.1
          "year": 4, // 5.2
          "month": 4 // 5.3
        }
    }
}

{
	"dateCalendar": {
		"type": "string", // 1
    	"format": "date", // 2
	    "disabledInput": true, // 3
        "relativeMaximum": { // 4
          "day": 4, // 4.1
          "year": 4, // 4.2
          "month": 4 // 4.3
        },
        "relativeMinimum": { // 5
          "day": 4, // 5.1
          "year": 4, // 5.2
          "month": 4 // 5.3
        }
    }
}
﻿
Definition of the type of control. Only the string is available;
Specifying the control format for the native calendar without time data.
Ability to disable keyboard input (only clicking on the icon works);
Possibility to limit the maximum date
Limit day
Limit year
Limit month
Possibility to limit the minimum date
Limit day
Limit year
Limit month
Alternative calendar with date and time
JSON
{
	"altDateTimeCalendar": {
		"type": "string", // 1
    	"format": "date-time" // 2
	}
}
{
	"altDateTimeCalendar": {
		"type": "string", // 1
    	"format": "date-time" // 2
	}
}
﻿
JSON
{
	"ui": {
		"altDateTimeCalendar": { // 3
			"ui:widget": "alt-datetime", // 4
			"ui:yearsRange": [ // 5
				1980,
				2030
			],
			"ui:hideNowButton": false, // 6
			"ui:hideClearButton": false // 7
		}
	}
}
{
	"ui": {
		"altDateTimeCalendar": { // 3
			"ui:widget": "alt-datetime", // 4
			"ui:yearsRange": [ // 5
				1980,
				2030
			],
			"ui:hideNowButton": false, // 6
			"ui:hideClearButton": false // 7
		}
	}
}
﻿
Definition of the type of control. Only the string is available;
Specifying the control format for the alternative calendar with time data;
The name of the control must match the name of the control in the schema;
Definition of the alternative calendar widget with date and time;
Specifying the limit of the displayed years (from and to);
Property for hiding the "Today" date setting button;
Property for hiding the reset button of the selected date.
Alternative calendar with date
JS
{
	"altDateCalendar": {
		"type": "string", // 1
    	"format": "date" // 2
	}
}
{
	"altDateCalendar": {
		"type": "string", // 1
    	"format": "date" // 2
	}
}
﻿
JS
{
	"ui": {
		"altDateCalendar": { // 3
			"ui:widget": "alt-date", // 4
			"ui:yearsRange": [ // 5
				1980,
				2030
			],
			"ui:hideNowButton": false, // 6
			"ui:hideClearButton": false // 7
		}
	}
}
{
	"ui": {
		"altDateCalendar": { // 3
			"ui:widget": "alt-date", // 4
			"ui:yearsRange": [ // 5
				1980,
				2030
			],
			"ui:hideNowButton": false, // 6
			"ui:hideClearButton": false // 7
		}
	}
}
﻿
Definition of the type of control. Only the string is available;
Specifying the control format for the alternative calendar;
The name of the control must match the name of the control in the schema;
Definition of the alternative calendar widget with date;
Specifying the limit of the displayed years (from and to);
Property for hiding the "Today" date setting button;
Property for hiding the reset button of the selected date.
﻿
Nullable control
This field displays only a title, a description and a help (the control itself will not be added to the HTML). Convenient use for inserting bulky text.
JSON
{
	"nullable": {
		"type": "null" // 1
	}
}
{
	"nullable": {
		"type": "null" // 1
	}
}
﻿
Indication of the type. Only null is available.
﻿
Key name	Key description
successMessage	Message for successful form submission.
submitButtonText	Submit button text
Updated 03 Jul 2024
Did this page help you?
Fоrms
Documents