{"display":"form","type":"form","components":[{"id":"e0reoqs","key":"simplecontent1","html":"

Showing simple examples of calculated fields

This example is to support the tutorial here

","type":"simplecontent","input":false,"label":"Text/Images","hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"eccjy3","key":"radioButtonExample","tree":false,"type":"simplepanel","input":false,"label":"","theme":"default","title":"Radio Button Example","hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"collapsed":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[{"id":"el5j3s","key":"simplecontent","html":"

The text box below will take the value you set for each radio button (the value can be separate from the text) and display that value multiplied by 10

","type":"simplecontent","input":false,"label":"Text/Images","hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"e4rmeej","key":"myTestRadio","type":"simpleradios","input":true,"label":"Radio Button Value","hidden":false,"inline":false,"prefix":"","suffix":"","unique":false,"values":[{"label":"I have a value of 1","value":"1","shortcut":""},{"label":"I have a value of 2","value":"2","shortcut":""},{"label":"I have a value of 10","value":"10","shortcut":""}],"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"fieldSet":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputType":"radio","modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"Each of these radio buttons has a VALUE set that is different from their display text","placeholder":"","defaultValue":"","dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","optionsLabelPosition":"right","allowCalculateOverride":false},{"id":"eem20j9","key":"textField","case":"","mask":false,"tags":[],"type":"textfield","input":true,"label":"Value of radio button selected, times 10","logic":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":true,"multiple":false,"redrawOn":"","tabindex":"","validate":{"json":"","custom":"","unique":false,"pattern":"","multiple":false,"required":false,"maxLength":"","minLength":"","customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputMask":"","inputType":"text","modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"spellcheck":true,"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"value = data.myTestRadio * 10;","inputFormat":"plain","placeholder":"","autocomplete":"","defaultValue":"","dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"value = data.myTestRadio * 10;","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"errorLabel":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"ep3eh3b","key":"dropdownExample","tree":false,"type":"simplepanel","input":false,"label":"","theme":"default","title":"Dropdown Example","hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"collapsed":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[{"id":"eozwvm8","key":"simplecontent2","html":"

The text box below will take the value from the dropdown items selected and add them to a sentence. On this one, the user is allowed to override the calculated value.

","type":"simplecontent","input":false,"label":"Text/Images","hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"eziqb3b","key":"carColor","data":{"url":"","json":"","custom":"","values":[{"label":"BLUE","value":"blue"},{"label":"RED","value":"red"},{"label":"BLACK","value":"black"}],"resource":""},"type":"simpleselect","input":true,"label":"Car color","limit":100,"filter":"","hidden":false,"idPath":"id","prefix":"","suffix":"","unique":false,"widget":"choicesjs","dataSrc":"values","dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","dataType":"auto","disabled":false,"lazyLoad":true,"multiple":false,"redrawOn":"","tabindex":"","template":"{{ item.label }}","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"minSearch":0,"modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"The text for each item is captialized, while the value is lowercase","fuseOptions":{"include":"score","threshold":0.3},"ignoreCache":false,"placeholder":"","searchField":"","authenticate":false,"defaultValue":"blue","selectFields":"","customOptions":{},"dataGridLabel":false,"labelPosition":"top","readOnlyValue":false,"searchEnabled":true,"showCharCount":false,"showWordCount":false,"uniqueOptions":false,"valueProperty":"","calculateValue":"","clearOnRefresh":false,"useExactSearch":false,"calculateServer":false,"searchThreshold":0.3,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"eb6tl4j","key":"topSpeed","data":{"url":"","json":"","custom":"","values":[{"label":"50 km/h","value":"50"},{"label":"100 km/h","value":"100"},{"label":"200 km/h","value":"200"}],"resource":""},"type":"simpleselect","input":true,"label":"Top Speed","limit":100,"filter":"","hidden":false,"idPath":"id","prefix":"","suffix":"","unique":false,"widget":"choicesjs","dataSrc":"values","dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","dataType":"auto","disabled":false,"lazyLoad":true,"multiple":false,"redrawOn":"","tabindex":"","template":"{{ item.label }}","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"minSearch":0,"modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","fuseOptions":{"include":"score","threshold":0.3},"ignoreCache":false,"placeholder":"","searchField":"","authenticate":false,"defaultValue":50,"selectFields":"","customOptions":{},"dataGridLabel":false,"labelPosition":"top","readOnlyValue":false,"searchEnabled":true,"showCharCount":false,"showWordCount":false,"uniqueOptions":false,"valueProperty":"","calculateValue":"","clearOnRefresh":false,"useExactSearch":false,"calculateServer":false,"searchThreshold":0.3,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"eiteu","key":"carDescription","case":"","mask":false,"tags":[],"type":"textfield","input":true,"label":"Car description","logic":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"json":"","custom":"","unique":false,"pattern":"","multiple":false,"required":false,"maxLength":"","minLength":"","customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputMask":"","inputType":"text","modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"spellcheck":true,"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"value = `The ${data.carColor} car has a top speed of ${data.topSpeed}`;","inputFormat":"plain","placeholder":"","autocomplete":"","defaultValue":"","dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"value = `The ${data.carColor} car has a top speed of ${data.topSpeed}`;","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":true}],"errorLabel":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]}