Forms guide

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 { "definitionid" "test", // 1 "form" { // 2 "ui" { }, &#x9;"data" { }, &#x9;"schema" { } }, "head" { // 3 "banner" "absolute url to image", // 3 1 &#x9;"description" "description text", // 3 2 &#x9;"logo" "absolute url to image" // 3 3 &#x9;"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 https //app archbee io/docs/ffeactz47 cw3ctxvllbm/mpfusbyrh2vv 5tjdavie#nt schema , ui https //app archbee io/docs/ffeactz47 cw3ctxvllbm/mpfusbyrh2vv 5tjdavie#3k 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 https //app archbee io/docs/ffeactz47 cw3ctxvllbm/mpfusbyrh2vv 5tjdavie#3d localization of phrases 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 https //app archbee io/docs/ffeactz47 cw3ctxvllbm/mpfusbyrh2vv 5tjdavie#l3 form schema 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 ) { "schema" { "type" "object", "required" \[ &#x9; "validations required control" ], "properties" { &#x9; "string controls single string" { &#x9; "type" "string" }, &#x9; "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 { &#x9;"ui" { &#x9; "ui\ order" \[ &#x9; "radiobuttons", &#x9; " ", &#x9; "firstname" &#x9; ], &#x9; "radiobuttons" { &#x9; "ui\ widget" "radio", &#x9; "ui\ options" { &#x9; &#x9; } &#x9; }, &#x9; "i18n" { &#x9; "en" { &#x9; &#x9; }, &#x9; "nl" { &#x9; &#x9; }, &#x9; } &#x9;} } 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 { &#x9;"schema" { &#x9; // schema definition &#x9;}, &#x9;"ui" { &#x9; "i18n" { // 1 &#x9; "en" { // 2 &#x9; "ui\ title" "form title", // 3 &#x9; "ui\ description" "form description", // 4 &#x9; "string controls single string" { // 5 &#x9; "ui\ title" "single string field", // 6 &#x9; "ui\ description" "description of single string field", // 7 &#x9; "ui\ placeholder" "placeholder of single string field", // 8 &#x9; "ui\ help" "help of single string field" // 9 &#x9; }, &#x9; // next control &#x9; } &#x9; // next locale &#x9; } &#x9;} } 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 conditional fields this functionality allows the field(s) to be displayed only when certain custom conditions are met the condition always works using the ‘is’ logic if \[propertyid] value is \[expectedvalue] ,then the specified fields are shown { "type" "object", "properties" { "clienttype" { "enum" \[ "personal", "buisness" ] } }, "allof" \[ { "if" { "properties" { "clienttype" { "const" "personal" } } }, "then" { "properties" { "firstname" { "type" "string", "title" "first name" } }, "required" \[ "firstname" ] } }, { "if" { "properties" { "clienttype" { "const" "buisness" } } }, "then" { "properties" { "companyname" { "type" "string", "title" "company name" }, "companysize" { "type" "string", "enum" \[ "1 10", "11 50", "50+" ] } }, "required" \[ "companyname", "companysize" ] } }, { "required" \[ "clienttype" ] } ] } it specifies in the ‘allof’ section at the schema level the property from which the data for the condition will be taken must exist in the schema each element in the ‘allof’ array consists of the ‘if’ and ‘then’ objects inside the ‘if’, specify the propertyid whose value must be compared inside the ‘const’, specify the expected value for the condition to be successfully executed inside the ‘then’, specify which properties should be drawn if the condition is met, and also which of them should be required string controls { &#x9;"stringcontrol" { &#x9; "type" "string", // 1 &#x9; "default" "default value", // 2 &#x9; "format" "uri" // 3 &#x9; "examples" \[ // 4 &#x9; "example 1", &#x9; "example 2", &#x9; "example 3" &#x9; ], &#x9; "minlength" 5, // 5 &#x9; "maxlength" 5, // 6 &#x9; "readonly" true, // 7 &#x9; "const" "3 14" // 8 &#x9;} } { &#x9;"ui" { &#x9; "stringcontrol" { &#x9; "ui\ disabled" "true" // 9 &#x9; } &#x9;} } 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 uri to 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 { &#x9;"ui" { &#x9; "stringcontrolname" { &#x9; "ui\ widget" "textarea", // 1 "ui\ rows" 10 // 2 &#x9; } &#x9;} } definition of line control as textarea ; setting the minimum height of the textarea field this field is optional numeric controls { &#x9;"numbercontrolname" { &#x9; "type" "number", // 1 &#x9; "default" 15, // 2 &#x9; "minimum" 5, // 3 &#x9; "maximum" 5, // 4 &#x9; "exclusiveminimum" 5, // 5 &#x9; "exclusivemaximum" 5, // 6 &#x9; "multipleof" 0 01 // 7 &#x9;} } 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 { &#x9;"rangecontrolname" { &#x9; "type" "number", // 1 &#x9; "default" 0, // 2 &#x9; "minimum" 5, // 3 &#x9; "maximum" 5, // 4 &#x9; "multipleof" 0 01 // 5 &#x9;} } { &#x9;"ui" { &#x9; "rangecontrolname" { &#x9; "ui\ widget" "range" // 6 &#x9; } &#x9;} } 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 { &#x9;"rangecontrolname" { &#x9; "type" "number", // 1 &#x9; "default" 9, // 2 &#x9; "minimum" 1, // 3 &#x9; "maximum" 10, // 4 &#x9; "multipleof" 1 // 5 &#x9;} } { "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 { "singleselectcontrolname" { "type" "number", // 1 "default" 3, &#x9;"enum" \[ 1, 2, 3 ], // 2 &#x9;"enumnames" \[ // 3 "one (value `chair`)", &#x9; "two (value `window`)", &#x9; "three (value `table`)" &#x9;] } } { "ui" { "singleselectcontrolname" { // 4 "ui\ enumdisabled" \[ // 5 2 // 6 ] } } } { "ui" { "i18n" { "en" { "singleselectcontrolname" { // default locales (title, help, description) "enumnames" \[ // 7 "lozalized value 1", "lozalized value 1" ], &#x9; }, &#x9; // 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, 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 { "multipleselectcontrolname" { "type" "array", // 1 &#x9;"default" \[ "floor", "door" ], &#x9;"uniqueitems" true, // 2 &#x9;"minitems" 2, // 3 &#x9;"maxitems" 4, // 4 &#x9;"items" { // 5 &#x9; "type" "string", // 6 &#x9; "enum" \[ // 7 &#x9; "chair", &#x9; "window", &#x9; "table", &#x9; "floor", &#x9; "door" ], &#x9; "enumnames" \[ // 8 &#x9; "one (value `chair`)", &#x9; "two (value `window`)", &#x9; "three (value `table`)", &#x9; "four (value `floor`)", &#x9; "five (value `door`)" ] &#x9; &#x9;} } } { "ui" { "multipleselectcontrolname" { // 9 "ui\ enumdisabled" \[ // 10 "table" // 11 ] } } } { "ui" { "i18n" { "en" { "multipleselectcontrolname" { // default locales (title, help, description) "enumnames" \[ // 12 "lozalized value 1", "lozalized value 1" ], &#x9; }, &#x9; // 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, 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) dynamic data from portal { "propertyidfromdefinitionofform" { // 1 "type" "string", // 2 "enum" \[], // 3 "enumnames" \[], // 4 "default" "defaultvalueforchoosing", // 5 } } { "ui" { "propertyidfromdefinitionofform" { // 6 "ui\ enumdisabled" \[ // 7 'valuefordisablingoption' // 8 ] } } } { "ui" { "i18n" { "en" { "propertyidfromdefinitionofform" { // default locales (title, help, description) "enumnames" \[ // 8 "lozalized value 1", // 9 "lozalized value 1" ], "ui\ enumnames" \[ // 8 "lozalized value 1", // 9 "lozalized value 1" ], &#x9; }, &#x9; // next control } // next locale } } } controller name, which must match the propertyid of form definition; controller type string to pull entities from the portal; this option must be ignored, otherwise the form control management switches to manual data handling mode manual data handling mode if this parameter is specified ( array of string values ​​or empty array ), then the values ​​for the form control will be pulled from this array, ignoring the portal filters ignoring the portal filters if the form control is set to manual mode ( point 3 is enabled ), then this parameter can be used to set localization for options of select the priority of applying translations is as follows first the parameter from point 8, then the parameter from point 4 if point 3 is not enabled, then the values ​​of this point will be ignored entityid from the portal that should be set by default make sure this value is included in the filter result for this property controller name, which must match the 1 point; option to set the value as disabled (cannot be selected in the form) list of values ​​that will be disabled array of localized values you can use follow keywords enumnames or ui\ enumnames be careful, be careful, if this option has values ​​specified, dynamic titles ​​for translations from the portal will not be retrieved that is, the values ​​for the selection will be pulled , but the translations for these options will be taken from here a list of values ​​that will be specified as translation strings checkboxes and radio buttons single checkbox { &#x9;"singlecheckbox" { &#x9; "type" "boolean", // 1 "default" false // 2 &#x9;} } definition of the control type, only boolean is available; definition of the default type the field is optional multiple checkboxes { "multiplecheckboxes" { "type" "array", // 1 &#x9;"uniqueitems" true, // 2 &#x9;"minitems" 2, // 3 &#x9;"maxitems" 4, // 4 &#x9;"items" { // 5 &#x9; "type" "string", // 6 &#x9; "enum" \[ // 7 &#x9; "chair", &#x9; "window", &#x9; "table", &#x9; "floor", &#x9; "door" ], &#x9; "enumnames" \[ // 8 &#x9; "one (value `chair`)", &#x9; "two (value `window`)", &#x9; "three (value `table`)", &#x9; "four (value `floor`)", &#x9; "five (value `door`)" ] &#x9; &#x9;} } } { "ui" { "multiplecheckboxes" { // 9 &#x9; "ui\ widget" "checkboxes", // 10 &#x9; "ui\ inline" true // 11 &#x9;} } } { "ui" { "i18n" { "en" { "multiplecheckboxes" { // default locales (title, help, description) "enumnames" \[ // 12 "lozalized value 1", "lozalized value 1" ], &#x9; }, &#x9; // 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, 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! { &#x9;"agreement checkbox" { &#x9; "type" "boolean", // 1 &#x9;} } { "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 { "radiobuttons" { "type" "string", // 1 &#x9;"enum" \[ // 2 &#x9; "chair", &#x9; "window", &#x9; "table", &#x9; "floor", &#x9; "door" &#x9;], &#x9;"enumnames" \[ // 3 &#x9; "one (value `chair`)", &#x9; "two (value `window`)", &#x9; "three (value `table`)", &#x9; "four (value `floor`)", &#x9; "five (value `door`)" &#x9;] &#x9; } } { "ui" { "radiobuttons" { // 4 &#x9; "ui\ widget" "radio", // 5 &#x9; "ui\ inline" true // 6 &#x9;} } } { "ui" { "i18n" { "en" { "radiobuttons" { // default locales (title, help, description) "enumnames" \[ // 7 "lozalized value 1", "lozalized value 1" ], &#x9; }, &#x9; // 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, 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 { &#x9;"uploadfile" { &#x9; "type" "string" // 1 &#x9;} } { &#x9;"ui" { &#x9; "uploadfile" { // 2 &#x9; "ui\ widget" "file", // 3 &#x9; "ui\ accept" " pdf, jpg" // 4 } &#x9;} } 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 { "multipleuploadfiles" { "type" "array", // 1 "items" { // 2 "type" "string" // 3 } } } { &#x9;"ui" { &#x9; "multipleuploadfiles" { // 4 &#x9; "ui\ widget" "files" // 5 files or filewidgetwithpreview &#x9; "ui\ accept" " pdf, jpg" // 6 &#x9; } &#x9;} } 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 filewidgetwithpreview can be used with list or carousel parameter "images" { "ui\ widget" "filewidgetwithpreview", "ui\ options" { "accept" " jpeg, png, jpg, pdf", "imagecover" true, "displaymode" "list", "isfilefullwidth" false, "pdfsinglepagemode" false, "filemaxheight" "400" } } filewidgetwithpreview overview this widget is used to display and upload various file types in multiple modes, including list and carousel views, with scrollable and zoom enabled file previews ui configuration the ui property defines the user interface configuration for the form defines the custom widget, options for the guided files form, and the display mode for the files { "form" { "ui" { "fileproperty" { "ui\ widget" "filewidgetwithpreview", "ui\ files" \[], // must not be specified "ui\ options" { "accept" " jpeg, png, jpg, pdf", // all file types if undefined "imagecover" true, // default value if undefined "displaymode" "list", // default value if undefined "filemaxheight" "400", // 100% if undefined "isfilefullwidth" false, // default value if undefined "pdfsinglepagemode" true // default value if undefined } } } } options ui\ widget configure that use specific widget ui\ files this field is filled with the metadata of the files the widget automatically adds and filled this parameter based on the file ids specified in the form data accept list of acceptable file formats for display (if the parameter is undefined, all file types that the widget can display are allowed) imagecover true – cover makes an image fill its container completely while maintaining its aspect ratio, potentially cropping parts of the content if the container’s proportions don’t match the media false – contain makes an image fit entirely within its container while maintaining its aspect ratio, potentially leaving empty space if the container’s proportions don’t match the media displaymode list – standard mode showing file icons in a list layout carousel – slider mode displaying files in a carousel view filemaxheight maximum height restriction for each file for example, if there is a single pdf on the page, this prevents it from taking up the entire page height isfilefullwidth setting, that makes files stretch to the full width of the screen and display stacked vertically (for example, when showing a pdf file) pdfsinglepagemode setting that allows pdf files to be displayed in a multi page mode with scroll enabled schema multiple mode (example schema configuration) this mode supports adding multiple files important for the ui configuration, there is no need to additionally add items in the settings { "form" { "schema" { "properties" { "fileproperty" { "type" "array", "items" { "type" "string" }, "readonly" false // default value if undefined } } } } } displaying a single file the plugin allows you to display more files that are specified in the date, but does not allow to add { "form" { "schema" { "properties" { "fileproperty" { "type" "string", "readonly" false // default value if undefined } } } } } parameters readonly if true , adding and deleting files is disabled data this section specifies the ids of files stored in the image service the plugin automatically retrieves the file metadata and adds it to the widget’s ui configuration ( ui files ) multiple mode schema { "form" { "data" { "fileproperty" \[ "bhrlnamndzrhnuq khjlq", "wibmwqpavmuifbneepphp", "sklydlzsjrotvdjjychub" ] }, } } single mode schema { "form" { "data" { "fileproperty" "sklydlzsjrotvdjjychub" }, } } 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 { "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 { "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 { &#x9;"datetimecalendar" { &#x9; "type" "string", // 1 "format" "date time", // 2 &#x9; "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 } &#x9;} } 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 { &#x9;"datecalendar" { &#x9; "type" "string", // 1 "format" "date", // 2 &#x9; "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 { &#x9;"altdatetimecalendar" { &#x9; "type" "string", // 1 "format" "date time" // 2 &#x9;} } { &#x9;"ui" { &#x9; "altdatetimecalendar" { // 3 &#x9; "ui\ widget" "alt datetime", // 4 &#x9; "ui\ yearsrange" \[ // 5 &#x9; 1980, &#x9; 2030 &#x9; ], &#x9; "ui\ hidenowbutton" false, // 6 &#x9; "ui\ hideclearbutton" false // 7 &#x9; } &#x9;} } 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 { &#x9;"altdatecalendar" { &#x9; "type" "string", // 1 "format" "date" // 2 &#x9;} } { &#x9;"ui" { &#x9; "altdatecalendar" { // 3 &#x9; "ui\ widget" "alt date", // 4 &#x9; "ui\ yearsrange" \[ // 5 &#x9; 1980, &#x9; 2030 &#x9; ], &#x9; "ui\ hidenowbutton" false, // 6 &#x9; "ui\ hideclearbutton" false // 7 &#x9; } &#x9;} } 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 { &#x9;"nullable" { &#x9; "type" "null" // 1 &#x9;} } indication of the type only null is available