From 12df751bf2359f445120b61991d09f27e7feb060 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Fri, 15 Oct 2021 18:27:51 -0400 Subject: [PATCH 01/11] Fix invalid getter --- src/ValidationsFactory.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js index f88d645c5..8386efba1 100644 --- a/src/ValidationsFactory.js +++ b/src/ValidationsFactory.js @@ -87,8 +87,8 @@ class FormLoopValidations extends Validations { async addValidations(validations) { set(validations, this.element.config.name, {}); const loopField = get(validations, this.element.config.name); - loopField['$each'] = []; - const firstRow = this.data[0] || {}; + loopField['$each'] = {}; + const firstRow = get(this.data, this.element.config.name, [{}])[0]; await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']); } } From cf6ed0f3900829584af81c6d2fd8af73825e66c3 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Fri, 15 Oct 2021 18:28:16 -0400 Subject: [PATCH 02/11] Use data instead of this.vdata to get the rigth data context --- src/mixins/ValidationRules.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/mixins/ValidationRules.js b/src/mixins/ValidationRules.js index 0dccc4a7a..5afbf6b5d 100644 --- a/src/mixins/ValidationRules.js +++ b/src/mixins/ValidationRules.js @@ -67,9 +67,9 @@ export const custom_date = (date) => { return checkDate.isValid(); }; -export const after = (after) => helpers.withParams({after}, function(date) { +export const after = (after) => helpers.withParams({after}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; const checkDate = moment(get(dataWithParent, after, after)); if (!checkDate.isValid()) { return false; @@ -81,9 +81,9 @@ export const after = (after) => helpers.withParams({after}, function(date) { return inputDate > afterDate; }); -export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date) { +export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; const checkDate = moment(get(dataWithParent, after_or_equal, after_or_equal)); if (!checkDate.isValid()) { return false; @@ -94,9 +94,9 @@ export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_e return inputDate >= equalOrAfterDate; }); -export const before = (before) => helpers.withParams({before}, function(date) { +export const before = (before) => helpers.withParams({before}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; const checkDate = moment(get(dataWithParent, before, before)); if (!checkDate.isValid()) { return false; @@ -107,9 +107,9 @@ export const before = (before) => helpers.withParams({before}, function(date) { return inputDate < beforeDate; }); -export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date) { +export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; const checkDate = moment(get(dataWithParent, before_or_equal, before_or_equal)); if (!checkDate.isValid()) { return false; @@ -174,8 +174,8 @@ export const requiredUnless = (variable, expected) => helpers.withParams({variab return value instanceof Array ? value.length > 0 : !!value; }); -export const sameAs = (field) => helpers.withParams({field}, function(value) { - const dataWithParent = {_parent: this._parent, ...this.vdata}; +export const sameAs = (field) => helpers.withParams({field}, function(value, data) { + const dataWithParent = {_parent: this._parent, ...data}; const valueSameAs = get(dataWithParent, field); return value == valueSameAs; }); From ce0c885d0b116d9ea4d55c03fa0e2ea9155f0bd7 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 12:42:50 -0400 Subject: [PATCH 03/11] Test validation nested in loops and usign _parent --- .../loops_validations_with_parent_rules.json | 2921 +++++++++++++++++ tests/e2e/specs/NestedValidationRules.spec.js | 40 +- 2 files changed, 2958 insertions(+), 3 deletions(-) create mode 100644 tests/e2e/fixtures/loops_validations_with_parent_rules.json diff --git a/tests/e2e/fixtures/loops_validations_with_parent_rules.json b/tests/e2e/fixtures/loops_validations_with_parent_rules.json new file mode 100644 index 000000000..0dc054ed0 --- /dev/null +++ b/tests/e2e/fixtures/loops_validations_with_parent_rules.json @@ -0,0 +1,2921 @@ +{ + "type": "screen_package", + "version": "2", + "screens": [ + { + "id": 10, + "screen_category_id": "1", + "title": "Parent Validations", + "description": "Parent Validations", + "type": "FORM", + "config": [ + { + "name": "Default", + "items": [ + { + "config": { + "icon": "far fa-square", + "label": "New Input 1", + "name": "form_input_1", + "placeholder": "", + "validation": [], + "helper": null, + "type": "text", + "dataFormat": "string", + "readonly": false + }, + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "label": "Data Type", + "name": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "validation": "required", + "options": [ + { + "value": "string", + "content": "Text" + }, + { + "value": "int", + "content": "Integer" + }, + { + "value": "currency", + "content": "Currency" + }, + { + "value": "percentage", + "content": "Percentage" + }, + { + "value": "float", + "content": "Decimal" + }, + { + "value": "datetime", + "content": "Datetime" + }, + { + "value": "date", + "content": "Date" + }, + { + "value": "password", + "content": "Password" + } + ] + } + }, + { + "type": { + "extends": { + "inheritAttrs": false, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "mixins": [ + { + "props": { + "internalSearch": { + "default": true + }, + "options": { + "required": true + }, + "multiple": { + "default": false + }, + "value": { + "type": null + }, + "trackBy": {}, + "label": {}, + "searchable": { + "default": true + }, + "clearOnSelect": { + "default": true + }, + "hideSelected": { + "default": false + }, + "placeholder": { + "default": "Select option" + }, + "allowEmpty": { + "default": true + }, + "resetAfter": { + "default": false + }, + "closeOnSelect": { + "default": true + }, + "customLabel": {}, + "taggable": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + }, + "tagPosition": { + "default": "top" + }, + "max": { + "type": [null, null], + "default": false + }, + "id": { + "default": null + }, + "optionsLimit": { + "default": 1000 + }, + "groupValues": {}, + "groupLabel": {}, + "groupSelect": { + "default": false + }, + "blockKeys": {}, + "preserveSearch": { + "default": false + }, + "preselectFirst": { + "default": false + } + }, + "computed": {}, + "watch": {}, + "methods": {} + }, + { + "props": { + "showPointer": { + "default": true + }, + "optionHeight": { + "default": 40 + } + }, + "computed": {}, + "watch": {}, + "methods": {} + } + ], + "props": { + "name": { + "default": "" + }, + "selectLabel": { + "default": "Press enter to select" + }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "selectedLabel": { + "default": "Selected" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + }, + "showLabels": { + "default": true + }, + "limit": { + "default": 99999 + }, + "maxHeight": { + "default": 300 + }, + "limitText": {}, + "loading": { + "default": false + }, + "disabled": { + "default": false + }, + "openDirection": { + "default": "" + }, + "showNoOptions": { + "default": true + }, + "showNoResults": { + "default": true + }, + "tabindex": { + "default": 0 + } + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null] + } + }, + "mixins": [ + { + "props": { + "validationMessages": { + "type": null + }, + "validationField": { + "type": null + }, + "validationData": { + "type": null + }, + "validation": { + "type": null + } + }, + "computed": {}, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": {} + } + ], + "props": [ + "label", + "error", + "options", + "helper", + "name", + "value", + "selectedControl" + ], + "computed": {}, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/form-multiselect.vue" + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/select-data-type-mask.vue" + }, + "field": "dataMask", + "config": { + "label": "Data Format", + "name": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { + "label": "Read Only", + "helper": "" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": ["value", "helper"], + "components": { + "MonacoEditor": { + "name": "MonacoEditor", + "props": { + "value": {}, + "theme": { + "default": "vs" + }, + "language": {}, + "options": {}, + "amdRequire": {} + }, + "model": { + "event": "change" + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": {}, + "_Ctor": {} + } + }, + "watch": { + "value": { + "immediate": true + } + }, + "computed": { + "effectiveValue": {} + }, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "_scopeId": "data-v-4f1374fd", + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/default-value-editor.vue" + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormInput", + "editor-component": "FormInput", + "editor-control": "FormInput", + "label": "Line Input" + }, + { + "config": { + "name": "loop_1", + "icon": "fas fa-redo", + "settings": { + "type": "new", + "varname": "loop_1", + "times": "1", + "add": true + }, + "label": "" + }, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { + "label": "", + "helper": "" + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormLoop", + "editor-component": "Loop", + "editor-control": "Loop", + "label": "Loop", + "items": [ + { + "config": { + "icon": "far fa-square", + "label": "New Input 1", + "name": "form_input_1", + "placeholder": "", + "validation": [], + "helper": null, + "type": "text", + "dataFormat": "string", + "readonly": false + }, + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "label": "Data Type", + "name": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "validation": "required", + "options": [ + { + "value": "string", + "content": "Text" + }, + { + "value": "int", + "content": "Integer" + }, + { + "value": "currency", + "content": "Currency" + }, + { + "value": "percentage", + "content": "Percentage" + }, + { + "value": "float", + "content": "Decimal" + }, + { + "value": "datetime", + "content": "Datetime" + }, + { + "value": "date", + "content": "Date" + }, + { + "value": "password", + "content": "Password" + } + ] + } + }, + { + "type": { + "extends": { + "inheritAttrs": false, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "mixins": [ + { + "props": { + "internalSearch": { + "default": true + }, + "options": { + "required": true + }, + "multiple": { + "default": false + }, + "value": { + "type": null + }, + "trackBy": {}, + "label": {}, + "searchable": { + "default": true + }, + "clearOnSelect": { + "default": true + }, + "hideSelected": { + "default": false + }, + "placeholder": { + "default": "Select option" + }, + "allowEmpty": { + "default": true + }, + "resetAfter": { + "default": false + }, + "closeOnSelect": { + "default": true + }, + "customLabel": {}, + "taggable": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + }, + "tagPosition": { + "default": "top" + }, + "max": { + "type": [null, null], + "default": false + }, + "id": { + "default": null + }, + "optionsLimit": { + "default": 1000 + }, + "groupValues": {}, + "groupLabel": {}, + "groupSelect": { + "default": false + }, + "blockKeys": {}, + "preserveSearch": { + "default": false + }, + "preselectFirst": { + "default": false + } + }, + "computed": {}, + "watch": {}, + "methods": {} + }, + { + "props": { + "showPointer": { + "default": true + }, + "optionHeight": { + "default": 40 + } + }, + "computed": {}, + "watch": {}, + "methods": {} + } + ], + "props": { + "name": { + "default": "" + }, + "selectLabel": { + "default": "Press enter to select" + }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "selectedLabel": { + "default": "Selected" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + }, + "showLabels": { + "default": true + }, + "limit": { + "default": 99999 + }, + "maxHeight": { + "default": 300 + }, + "limitText": {}, + "loading": { + "default": false + }, + "disabled": { + "default": false + }, + "openDirection": { + "default": "" + }, + "showNoOptions": { + "default": true + }, + "showNoResults": { + "default": true + }, + "tabindex": { + "default": 0 + } + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "_Ctor": {} + } + }, + "mixins": [ + { + "props": { + "validationMessages": { + "type": null + }, + "validationField": { + "type": null + }, + "validationData": { + "type": null + }, + "validation": { + "type": null + } + }, + "computed": {}, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": {} + } + ], + "props": { + "selectedControl": { + "type": null + }, + "value": { + "type": null + }, + "name": { + "type": null + }, + "helper": { + "type": null + }, + "options": { + "type": null + }, + "error": { + "type": null + }, + "label": { + "type": null + } + }, + "computed": {}, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/form-multiselect.vue", + "_Ctor": {} + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/select-data-type-mask.vue", + "_Ctor": {} + }, + "field": "dataMask", + "config": { + "label": "Data Format", + "name": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { + "label": "Read Only", + "helper": "" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": { + "helper": { + "type": null + }, + "value": { + "type": null + } + }, + "components": { + "MonacoEditor": { + "name": "MonacoEditor", + "props": { + "value": {}, + "theme": { + "default": "vs" + }, + "language": {}, + "options": {}, + "amdRequire": {} + }, + "model": { + "event": "change" + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": {}, + "_Ctor": {} + } + }, + "watch": { + "value": { + "immediate": true, + "user": true + } + }, + "computed": { + "effectiveValue": {} + }, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "_scopeId": "data-v-4f1374fd", + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/default-value-editor.vue", + "_Ctor": {} + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormInput", + "editor-component": "FormInput", + "editor-control": "FormInput", + "label": "Line Input" + }, + { + "config": { + "icon": "far fa-square", + "label": "New Input 2", + "name": "form_input_2", + "placeholder": "", + "validation": [ + { + "value": "required_if:form_input_1,12", + "field": "required_if:", + "content": "Required If", + "helper": "The field under validation must be present and not empty if the Variable Name field is equal to any value.", + "visible": false, + "configs": [ + { + "type": "InputVariable", + "name": "variable-name", + "label": "Variable Name", + "helper": "", + "validation": "required", + "value": "form_input_1" + }, + { + "type": "FormInput", + "name": "variable-value", + "label": "Variable Value", + "helper": "", + "validation": "", + "value": "12" + } + ] + } + ], + "helper": null, + "type": "text", + "dataFormat": "string", + "readonly": false + }, + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "label": "Data Type", + "name": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "validation": "required", + "options": [ + { + "value": "string", + "content": "Text" + }, + { + "value": "int", + "content": "Integer" + }, + { + "value": "currency", + "content": "Currency" + }, + { + "value": "percentage", + "content": "Percentage" + }, + { + "value": "float", + "content": "Decimal" + }, + { + "value": "datetime", + "content": "Datetime" + }, + { + "value": "date", + "content": "Date" + }, + { + "value": "password", + "content": "Password" + } + ] + } + }, + { + "type": { + "extends": { + "inheritAttrs": false, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "mixins": [ + { + "props": { + "internalSearch": { + "default": true + }, + "options": { + "required": true + }, + "multiple": { + "default": false + }, + "value": { + "type": null + }, + "trackBy": {}, + "label": {}, + "searchable": { + "default": true + }, + "clearOnSelect": { + "default": true + }, + "hideSelected": { + "default": false + }, + "placeholder": { + "default": "Select option" + }, + "allowEmpty": { + "default": true + }, + "resetAfter": { + "default": false + }, + "closeOnSelect": { + "default": true + }, + "customLabel": {}, + "taggable": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + }, + "tagPosition": { + "default": "top" + }, + "max": { + "type": [null, null], + "default": false + }, + "id": { + "default": null + }, + "optionsLimit": { + "default": 1000 + }, + "groupValues": {}, + "groupLabel": {}, + "groupSelect": { + "default": false + }, + "blockKeys": {}, + "preserveSearch": { + "default": false + }, + "preselectFirst": { + "default": false + } + }, + "computed": {}, + "watch": {}, + "methods": {} + }, + { + "props": { + "showPointer": { + "default": true + }, + "optionHeight": { + "default": 40 + } + }, + "computed": {}, + "watch": {}, + "methods": {} + } + ], + "props": { + "name": { + "default": "" + }, + "selectLabel": { + "default": "Press enter to select" + }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "selectedLabel": { + "default": "Selected" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + }, + "showLabels": { + "default": true + }, + "limit": { + "default": 99999 + }, + "maxHeight": { + "default": 300 + }, + "limitText": {}, + "loading": { + "default": false + }, + "disabled": { + "default": false + }, + "openDirection": { + "default": "" + }, + "showNoOptions": { + "default": true + }, + "showNoResults": { + "default": true + }, + "tabindex": { + "default": 0 + } + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "_Ctor": {} + } + }, + "mixins": [ + { + "props": { + "validationMessages": { + "type": null + }, + "validationField": { + "type": null + }, + "validationData": { + "type": null + }, + "validation": { + "type": null + } + }, + "computed": {}, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": {} + } + ], + "props": { + "selectedControl": { + "type": null + }, + "value": { + "type": null + }, + "name": { + "type": null + }, + "helper": { + "type": null + }, + "options": { + "type": null + }, + "error": { + "type": null + }, + "label": { + "type": null + } + }, + "computed": {}, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/form-multiselect.vue", + "_Ctor": {} + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/select-data-type-mask.vue", + "_Ctor": {} + }, + "field": "dataMask", + "config": { + "label": "Data Format", + "name": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { + "label": "Read Only", + "helper": "" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": { + "helper": { + "type": null + }, + "value": { + "type": null + } + }, + "components": { + "MonacoEditor": { + "name": "MonacoEditor", + "props": { + "value": {}, + "theme": { + "default": "vs" + }, + "language": {}, + "options": {}, + "amdRequire": {} + }, + "model": { + "event": "change" + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": {}, + "_Ctor": {} + } + }, + "watch": { + "value": { + "immediate": true, + "user": true + } + }, + "computed": { + "effectiveValue": {} + }, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "_scopeId": "data-v-4f1374fd", + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/default-value-editor.vue", + "_Ctor": {} + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormInput", + "editor-component": "FormInput", + "editor-control": "FormInput", + "label": "Line Input" + }, + { + "config": { + "icon": "far fa-square", + "label": "New Input 4 (with visibility rule)", + "name": "form_input_4", + "placeholder": "", + "validation": [ + { + "value": "required_if:_parent.form_input_1,13", + "field": "required_if:", + "content": "Required If", + "helper": "The field under validation must be present and not empty if the Variable Name field is equal to any value.", + "visible": false, + "configs": [ + { + "type": "InputVariable", + "name": "variable-name", + "label": "Variable Name", + "helper": "", + "validation": "required", + "value": "_parent.form_input_1" + }, + { + "type": "FormInput", + "name": "variable-value", + "label": "Variable Value", + "helper": "", + "validation": "", + "value": "13" + } + ] + } + ], + "helper": null, + "type": "text", + "dataFormat": "string", + "readonly": false, + "conditionalHide": "form_input_2==\"10\"" + }, + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "label": "Data Type", + "name": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "validation": "required", + "options": [ + { + "value": "string", + "content": "Text" + }, + { + "value": "int", + "content": "Integer" + }, + { + "value": "currency", + "content": "Currency" + }, + { + "value": "percentage", + "content": "Percentage" + }, + { + "value": "float", + "content": "Decimal" + }, + { + "value": "datetime", + "content": "Datetime" + }, + { + "value": "date", + "content": "Date" + }, + { + "value": "password", + "content": "Password" + } + ] + } + }, + { + "type": { + "extends": { + "inheritAttrs": false, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "mixins": [ + { + "props": { + "internalSearch": { + "default": true + }, + "options": { + "required": true + }, + "multiple": { + "default": false + }, + "value": { + "type": null + }, + "trackBy": {}, + "label": {}, + "searchable": { + "default": true + }, + "clearOnSelect": { + "default": true + }, + "hideSelected": { + "default": false + }, + "placeholder": { + "default": "Select option" + }, + "allowEmpty": { + "default": true + }, + "resetAfter": { + "default": false + }, + "closeOnSelect": { + "default": true + }, + "customLabel": {}, + "taggable": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + }, + "tagPosition": { + "default": "top" + }, + "max": { + "type": [null, null], + "default": false + }, + "id": { + "default": null + }, + "optionsLimit": { + "default": 1000 + }, + "groupValues": {}, + "groupLabel": {}, + "groupSelect": { + "default": false + }, + "blockKeys": {}, + "preserveSearch": { + "default": false + }, + "preselectFirst": { + "default": false + } + }, + "computed": {}, + "watch": {}, + "methods": {} + }, + { + "props": { + "showPointer": { + "default": true + }, + "optionHeight": { + "default": 40 + } + }, + "computed": {}, + "watch": {}, + "methods": {} + } + ], + "props": { + "name": { + "default": "" + }, + "selectLabel": { + "default": "Press enter to select" + }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "selectedLabel": { + "default": "Selected" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + }, + "showLabels": { + "default": true + }, + "limit": { + "default": 99999 + }, + "maxHeight": { + "default": 300 + }, + "limitText": {}, + "loading": { + "default": false + }, + "disabled": { + "default": false + }, + "openDirection": { + "default": "" + }, + "showNoOptions": { + "default": true + }, + "showNoResults": { + "default": true + }, + "tabindex": { + "default": 0 + } + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null] + } + }, + "mixins": [ + { + "props": { + "validationMessages": { + "type": null + }, + "validationField": { + "type": null + }, + "validationData": { + "type": null + }, + "validation": { + "type": null + } + }, + "computed": {}, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": {} + } + ], + "props": [ + "label", + "error", + "options", + "helper", + "name", + "value", + "selectedControl" + ], + "computed": {}, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/form-multiselect.vue" + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/select-data-type-mask.vue" + }, + "field": "dataMask", + "config": { + "label": "Data Format", + "name": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { + "label": "Read Only", + "helper": "" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": ["value", "helper"], + "components": { + "MonacoEditor": { + "name": "MonacoEditor", + "props": { + "value": {}, + "theme": { + "default": "vs" + }, + "language": {}, + "options": {}, + "amdRequire": {} + }, + "model": { + "event": "change" + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": {}, + "_Ctor": {} + } + }, + "watch": { + "value": { + "immediate": true + } + }, + "computed": { + "effectiveValue": {} + }, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "_scopeId": "data-v-4f1374fd", + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/default-value-editor.vue" + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormInput", + "editor-component": "FormInput", + "editor-control": "FormInput", + "label": "Line Input" + }, + { + "config": { + "name": "loop_2", + "icon": "fas fa-redo", + "settings": { + "type": "new", + "varname": "loop_2", + "times": "3", + "add": false + }, + "label": "" + }, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": {} + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormLoop", + "editor-component": "Loop", + "editor-control": "Loop", + "label": "Loop", + "items": [ + { + "config": { + "icon": "far fa-square", + "label": "Nested inside Nested", + "name": "form_input_3", + "placeholder": "", + "validation": [ + { + "value": "required_if:_parent._parent.form_input_1,13", + "field": "required_if:", + "content": "Required If", + "helper": "The field under validation must be present and not empty if the Variable Name field is equal to any value.", + "visible": false, + "configs": [ + { + "type": "InputVariable", + "name": "variable-name", + "label": "Variable Name", + "helper": "", + "validation": "required", + "value": "_parent._parent.form_input_1" + }, + { + "type": "FormInput", + "name": "variable-value", + "label": "Variable Value", + "helper": "", + "validation": "", + "value": "13" + } + ] + } + ], + "helper": null, + "type": "text", + "dataFormat": "string", + "readonly": false, + "conditionalHide": "" + }, + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "label": "Data Type", + "name": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "validation": "required", + "options": [ + { + "value": "string", + "content": "Text" + }, + { + "value": "int", + "content": "Integer" + }, + { + "value": "currency", + "content": "Currency" + }, + { + "value": "percentage", + "content": "Percentage" + }, + { + "value": "float", + "content": "Decimal" + }, + { + "value": "datetime", + "content": "Datetime" + }, + { + "value": "date", + "content": "Date" + }, + { + "value": "password", + "content": "Password" + } + ] + } + }, + { + "type": { + "extends": { + "inheritAttrs": false, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "mixins": [ + { + "props": { + "internalSearch": { + "default": true + }, + "options": { + "required": true + }, + "multiple": { + "default": false + }, + "value": { + "type": null + }, + "trackBy": {}, + "label": {}, + "searchable": { + "default": true + }, + "clearOnSelect": { + "default": true + }, + "hideSelected": { + "default": false + }, + "placeholder": { + "default": "Select option" + }, + "allowEmpty": { + "default": true + }, + "resetAfter": { + "default": false + }, + "closeOnSelect": { + "default": true + }, + "customLabel": {}, + "taggable": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + }, + "tagPosition": { + "default": "top" + }, + "max": { + "type": [null, null], + "default": false + }, + "id": { + "default": null + }, + "optionsLimit": { + "default": 1000 + }, + "groupValues": {}, + "groupLabel": {}, + "groupSelect": { + "default": false + }, + "blockKeys": {}, + "preserveSearch": { + "default": false + }, + "preselectFirst": { + "default": false + } + }, + "computed": {}, + "watch": {}, + "methods": {} + }, + { + "props": { + "showPointer": { + "default": true + }, + "optionHeight": { + "default": 40 + } + }, + "computed": {}, + "watch": {}, + "methods": {} + } + ], + "props": { + "name": { + "default": "" + }, + "selectLabel": { + "default": "Press enter to select" + }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "selectedLabel": { + "default": "Selected" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + }, + "showLabels": { + "default": true + }, + "limit": { + "default": 99999 + }, + "maxHeight": { + "default": 300 + }, + "limitText": {}, + "loading": { + "default": false + }, + "disabled": { + "default": false + }, + "openDirection": { + "default": "" + }, + "showNoOptions": { + "default": true + }, + "showNoResults": { + "default": true + }, + "tabindex": { + "default": 0 + } + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null] + } + }, + "mixins": [ + { + "props": { + "validationMessages": { + "type": null + }, + "validationField": { + "type": null + }, + "validationData": { + "type": null + }, + "validation": { + "type": null + } + }, + "computed": {}, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": {} + } + ], + "props": [ + "label", + "error", + "options", + "helper", + "name", + "value", + "selectedControl" + ], + "computed": {}, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/form-multiselect.vue" + }, + "computed": {}, + "staticRenderFns": [], + "_compiled": true, + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/select-data-type-mask.vue" + }, + "field": "dataMask", + "config": { + "label": "Data Format", + "name": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { + "label": "Read Only", + "helper": "" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": ["value", "helper"], + "components": { + "MonacoEditor": { + "name": "MonacoEditor", + "props": { + "value": {}, + "theme": { + "default": "vs" + }, + "language": {}, + "options": {}, + "amdRequire": {} + }, + "model": { + "event": "change" + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": {}, + "_Ctor": {} + } + }, + "watch": { + "value": { + "immediate": true + } + }, + "computed": { + "effectiveValue": {} + }, + "methods": {}, + "staticRenderFns": [], + "_compiled": true, + "_scopeId": "data-v-4f1374fd", + "beforeCreate": [null], + "beforeDestroy": [null], + "__file": "src/components/inspector/default-value-editor.vue" + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormInput", + "editor-component": "FormInput", + "editor-control": "FormInput", + "label": "Line Input" + } + ], + "container": true + } + ], + "container": true + }, + { + "config": { + "icon": "fas fa-share-square", + "label": "New Submit", + "variant": "primary", + "event": "submit", + "defaultSubmit": true, + "name": "submit", + "fieldValue": null + }, + "inspector": [ + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the button's text" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "label": "Variable Name", + "name": "Variable Name", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormMultiselect", + "field": "event", + "config": { + "label": "Type", + "helper": "Choose whether the button should submit the form", + "options": [ + { + "value": "submit", + "content": "Submit Button" + }, + { + "value": "script", + "content": "Regular Button" + } + ] + } + }, + { + "type": "FormInput", + "field": "fieldValue", + "config": { + "label": "Value", + "helper": "The value being submitted" + } + }, + { + "type": "FormMultiselect", + "field": "variant", + "config": { + "label": "Button Variant Style", + "helper": "The variant determines the appearance of the button", + "options": [ + { + "value": "primary", + "content": "Primary" + }, + { + "value": "secondary", + "content": "Secondary" + }, + { + "value": "success", + "content": "Success" + }, + { + "value": "danger", + "content": "Danger" + }, + { + "value": "warning", + "content": "Warning" + }, + { + "value": "info", + "content": "Info" + }, + { + "value": "light", + "content": "Light" + }, + { + "value": "dark", + "content": "Dark" + }, + { + "value": "link", + "content": "Link" + } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": "" + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "component": "FormButton", + "editor-component": "FormButton", + "editor-control": "FormSubmit", + "label": "Submit Button" + } + ] + } + ], + "computed": [], + "custom_css": null, + "created_at": "2021-10-06T06:49:48-07:00", + "updated_at": "2021-10-06T07:45:07-07:00", + "status": "ACTIVE", + "key": null, + "watchers": [], + "categories": [ + { + "id": 1, + "name": "Uncategorized", + "status": "ACTIVE", + "is_system": 0, + "created_at": "2021-10-04T02:21:29-07:00", + "updated_at": "2021-10-04T02:21:29-07:00", + "pivot": { + "assignable_id": 10, + "category_id": 1, + "category_type": "ProcessMaker\\Models\\ScreenCategory" + } + } + ] + } + ], + "screen_categories": [], + "scripts": [] +} diff --git a/tests/e2e/specs/NestedValidationRules.spec.js b/tests/e2e/specs/NestedValidationRules.spec.js index 643de0ebb..6ad2ecfe1 100644 --- a/tests/e2e/specs/NestedValidationRules.spec.js +++ b/tests/e2e/specs/NestedValidationRules.spec.js @@ -80,18 +80,46 @@ describe('Validation Rules (Hidden fields and Nested Screens)', () => { submitForm(); }); + + it('Verify validation rules with hidden fields in nested screen before submit', () => { + cy.loadFromJson('loops_validations_with_parent_rules.json', 0); + cy.get('[data-cy=mode-preview]').click(); + + fillInputText('screen-field-form_input_1', 0, '13'); + shouldHaveValidationErrors(); + + fillInputText('screen-field-form_input_3', 0, 'ok'); + shouldHaveValidationErrors(); + fillInputText('screen-field-form_input_3', 1, 'ok'); + shouldHaveValidationErrors(); + fillInputText('screen-field-form_input_3', 2, 'ok'); + shouldNotHaveValidationErrors(); + + fillInputText('screen-field-form_input_1', 1, '12'); + shouldHaveValidationErrors(); + fillInputText('screen-field-form_input_2', 0, 'ok'); + shouldNotHaveValidationErrors(); + + fillInputText('screen-field-form_input_2', 0, '10'); + shouldHaveValidationErrors(); + + fillInputText('screen-field-form_input_4', 0, 'ok'); + shouldNotHaveValidationErrors(); + + submitForm(); + }); }); -function fillInputText(dataCy, index = null) +function fillInputText(dataCy, index = null, value = 'test') { if (index === null) { cy.get(`[data-cy=preview-content] [data-cy="${dataCy}"]`) .clear() - .type('test'); + .type(value); } else { cy.get(`[data-cy=preview-content] [data-cy="${dataCy}"]`).eq(index) .clear() - .type('test'); + .type(value); } } @@ -101,6 +129,12 @@ function shouldHaveValidationErrors() .should('contain.html', 'alert alert-danger'); } +function shouldNotHaveValidationErrors() +{ + cy.get('#preview .form-group.form-group--error:visible') + .should('have.length', 0); +} + function submitForm() { cy.get('[data-cy=preview-content] [data-cy="screen-field-submit"]') From 83c9e2f4a54880b7698763704042ebcb107d563b Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 12:46:45 -0400 Subject: [PATCH 04/11] Get _parent reference for validation rules --- src/ValidationsFactory.js | 2 +- src/mixins/ScreenBase.js | 38 +++++++++++++++++++++++++++++++++++ src/mixins/ValidationRules.js | 18 ++++++++++------- 3 files changed, 50 insertions(+), 8 deletions(-) diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js index 8386efba1..63d49da3b 100644 --- a/src/ValidationsFactory.js +++ b/src/ValidationsFactory.js @@ -88,7 +88,7 @@ class FormLoopValidations extends Validations { set(validations, this.element.config.name, {}); const loopField = get(validations, this.element.config.name); loopField['$each'] = {}; - const firstRow = get(this.data, this.element.config.name, [{}])[0]; + const firstRow = (get(this.data, this.element.config.name) || [{}])[0]; await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']); } } diff --git a/src/mixins/ScreenBase.js b/src/mixins/ScreenBase.js index c0afa8857..843ed03a7 100644 --- a/src/mixins/ScreenBase.js +++ b/src/mixins/ScreenBase.js @@ -27,6 +27,44 @@ export default { }, }, methods: { + addReferenceToParents(data) { + if (!data) { + return; + } + const parent = this.addReferenceToParents(this.findParent(data)); + return { + _parent: parent, + ...data, + }; + }, + findParent(child, data = this.vdata, parent = this._parent) { + if (child === data) { + return parent; + } + for (const key in data) { + if (data[key] instanceof Array) { + for (const item of data[key]) { + const result = this.findParent(child, item, data); + if (result) { + return result; + } + } + } else if (data[key] instanceof Object) { + const found = this.findParent(child, data[key], key); + if (found) { + return found; + } + } else { + if (child === data[key]) { + return parent; + } + } + } + }, + getRootScreen(screen = this) { + const parentScreen = screen.$parent.$parent; + return parentScreen && parentScreen.getRootScreen instanceof Function ? parentScreen.getRootScreen(parentScreen) : screen; + }, tryFormField(variableName, callback, defaultValue = null) { try { return callback(); diff --git a/src/mixins/ValidationRules.js b/src/mixins/ValidationRules.js index 5afbf6b5d..037071970 100644 --- a/src/mixins/ValidationRules.js +++ b/src/mixins/ValidationRules.js @@ -69,7 +69,8 @@ export const custom_date = (date) => { export const after = (after) => helpers.withParams({after}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; + const dataWithParent = this.getRootScreen().addReferenceToParents(data); + dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, after, after)); if (!checkDate.isValid()) { return false; @@ -83,7 +84,8 @@ export const after = (after) => helpers.withParams({after}, function(date, data) export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; + const dataWithParent = this.getRootScreen().addReferenceToParents(data); + dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, after_or_equal, after_or_equal)); if (!checkDate.isValid()) { return false; @@ -96,7 +98,8 @@ export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_e export const before = (before) => helpers.withParams({before}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; + const dataWithParent = this.getRootScreen().addReferenceToParents(data); + dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, before, before)); if (!checkDate.isValid()) { return false; @@ -109,7 +112,8 @@ export const before = (before) => helpers.withParams({before}, function(date, da export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data}; + const dataWithParent = this.getRootScreen().addReferenceToParents(data); + dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, before_or_equal, before_or_equal)); if (!checkDate.isValid()) { return false; @@ -151,7 +155,7 @@ export const required = (value) => { }; export const requiredIf = (variable, expected) => helpers.withParams({variable, expected}, function(value) { - const dataWithParent = {_parent: this._parent, ...this.vdata}; + const dataWithParent = this.getRootScreen().addReferenceToParents(this.vdata); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -163,7 +167,7 @@ export const requiredIf = (variable, expected) => helpers.withParams({variable, }); export const requiredUnless = (variable, expected) => helpers.withParams({variable, expected}, function(value) { - const dataWithParent = {_parent: this._parent, ...this.vdata}; + const dataWithParent = this.getRootScreen().addReferenceToParents(this.vdata); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -175,7 +179,7 @@ export const requiredUnless = (variable, expected) => helpers.withParams({variab }); export const sameAs = (field) => helpers.withParams({field}, function(value, data) { - const dataWithParent = {_parent: this._parent, ...data}; + const dataWithParent = this.getRootScreen().addReferenceToParents(data); const valueSameAs = get(dataWithParent, field); return value == valueSameAs; }); From 2dc9eb38725c79c3c07ef6457a195d3bada2d1d2 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 15:19:34 -0400 Subject: [PATCH 05/11] Fix test name --- tests/e2e/specs/NestedValidationRules.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/NestedValidationRules.spec.js b/tests/e2e/specs/NestedValidationRules.spec.js index 6ad2ecfe1..de8180f9e 100644 --- a/tests/e2e/specs/NestedValidationRules.spec.js +++ b/tests/e2e/specs/NestedValidationRules.spec.js @@ -81,7 +81,7 @@ describe('Validation Rules (Hidden fields and Nested Screens)', () => { submitForm(); }); - it('Verify validation rules with hidden fields in nested screen before submit', () => { + it('Verify validation rules with hidden fields and use of _parent in the conditional validation rules', () => { cy.loadFromJson('loops_validations_with_parent_rules.json', 0); cy.get('[data-cy=mode-preview]').click(); From bf52661f510547eaab5b726104aeadc022a9ff81 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 18:25:02 -0400 Subject: [PATCH 06/11] Add loop validation tests --- tests/e2e/fixtures/validation rules loop.json | 11987 ++++++++++++++++ .../e2e/specs/ValidationRulesAdvanced.spec.js | 92 + tests/e2e/support/commands.js | 10 + 3 files changed, 12089 insertions(+) create mode 100644 tests/e2e/fixtures/validation rules loop.json create mode 100644 tests/e2e/specs/ValidationRulesAdvanced.spec.js diff --git a/tests/e2e/fixtures/validation rules loop.json b/tests/e2e/fixtures/validation rules loop.json new file mode 100644 index 000000000..4005311c8 --- /dev/null +++ b/tests/e2e/fixtures/validation rules loop.json @@ -0,0 +1,11987 @@ +{ + "type": "screen_package", + "version": "2", + "screens": [ + { + "id": 345, + "screen_category_id": "10", + "title": "validation rules loop Copy", + "description": "validation rules loop", + "type": "FORM", + "config": [ + { + "name": "dates and loops", + "items": [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Validations Rules  - Loops

", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "inspector": [ + { + "type": "FormTextArea", + "field": "content", + "config": { + "rows": 5, + "label": "Content", + "value": null, + "helper": "The HTML text to display" + } + }, + { + "type": "FormCheckbox", + "field": "renderVarHtml", + "config": { + "label": "Render HTML from a Variable", + "value": null, + "helper": null + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_1", + "type": "text", + "label": "Accepted - Loop", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "accepted", + "helper": "The field under validation must be yes, on, 1 or true.", + "content": "Accepted" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "extends": { + "props": [ + "label", + "error", + "options", + "helper", + "name", + "value", + "selectedControl" + ], + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { "deep": true } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_3", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_3" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_2", + "type": "text", + "label": "Alpha", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "alpha", + "helper": "The field under validation must be entirely alphabetic characters.", + "content": "Alpha" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_4", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_4" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_3", + "type": "text", + "label": "Alpha-Numeric", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "alpha_num", + "helper": "The field under validation must be entirely alpha-numeric characters.", + "content": "Alpha-Numeric" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_5", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_5" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_4", + "type": "text", + "label": "Between Min 3 & Max 12", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "between:", + "value": "between:3,12", + "helper": "The field under validation must have a size between the given min and max.", + "configs": [ + { + "type": "FormInput", + "label": "Min", + "value": "3", + "helper": null, + "validation": "required|integer" + }, + { + "type": "FormInput", + "label": "Max", + "value": "12", + "helper": null, + "validation": "required|integer" + } + ], + "content": "Between Min & Max", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_6", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_6" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-warning", + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "Email", + "type": "text", + "label": "Email", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "email", + "helper": "The field under validation must be formatted as an e-mail address.", + "content": "Email" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_7", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_7" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_6", + "type": "text", + "label": "Date", + "helper": null, + "readonly": false, + "dataFormat": "date", + "validation": [ + { + "value": "custom_date", + "helper": "The field under validation must be a valid date format which is acceptable by Javascript's Date object.", + "content": "Date" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_8", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_8" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_7", + "type": "text", + "label": "In", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "in:", + "value": "in:7,8,9", + "helper": "The field under validation must be included in the given list of values. The field can be an array or string.", + "configs": [ + { + "type": "FormInput", + "label": "Values", + "value": "7,8,9", + "helper": null, + "validation": "required" + } + ], + "content": "In", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_9", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_9" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_8", + "type": "text", + "label": "Max Length 5", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "max:", + "value": "max:5", + "helper": null, + "configs": [ + { + "type": "FormInput", + "label": "Max Input", + "value": "5", + "helper": "Validate that an attribute is no greater than a given length.", + "validation": "required|integer" + } + ], + "content": "Max Length", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_10", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_10" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-warning", + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_15", + "type": "text", + "label": "New Input", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_16", + "type": "text", + "label": "Same = email2", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "same:", + "value": "same:form_input_15", + "helper": "The given field must match the field under validation.", + "configs": [ + { + "name": "variable-name", + "type": "InputVariable", + "label": "Variable Name", + "value": "form_input_15", + "helper": null, + "validation": "required" + } + ], + "content": "Same", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_18", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_18" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_5", + "type": "text", + "label": "URL", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "url", + "helper": "Validate that an attribute has a valid URL format.", + "content": "URL" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_19", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_19" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [], + [] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_9", + "type": "text", + "label": "Min Length 3", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "min:", + "value": "min:3", + "helper": null, + "configs": [ + { + "type": "FormInput", + "label": "Min Input", + "value": "3", + "helper": "Validate that an attribute is at least a given length.", + "validation": "required|integer" + } + ], + "content": "Min Length", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_11", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_11" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_10", + "type": "text", + "label": "Not In 9", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "not_in:", + "value": "not_in:9", + "helper": "The field under validation must not be included in the given list of values.", + "configs": [ + { + "type": "FormInput", + "label": "Values", + "value": "9", + "helper": null, + "validation": "required" + } + ], + "content": "Not In", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_12", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_12" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_11", + "type": "text", + "label": "Regex [xyz]", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "regex:", + "value": "regex:[xyz]", + "helper": "The field under validation must match the given regular expression.", + "configs": [ + { + "type": "FormInput", + "label": "Regex Pattern", + "value": "[xyz]", + "helper": null, + "validation": "required" + } + ], + "content": "Regex", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_13", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_13" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "Required", + "type": "text", + "label": "Required", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "value": "required", + "helper": "Checks if the length of the String representation of the value is >", + "content": "Required" + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_14", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_14" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-info", + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "items": [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_14", + "type": "text", + "label": "New Input", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_13", + "type": "text", + "label": "Required If form_input_14 = paola", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "required_if:", + "value": "required_if:form_input_14,paola", + "helper": "The field under validation must be present and not empty if the Variable Name field is equal to any value.", + "configs": [ + { + "name": "variable-name", + "type": "InputVariable", + "label": "Variable Name", + "value": "form_input_14", + "helper": null, + "validation": "required" + }, + { + "name": "variable-value", + "type": "FormInput", + "label": "Variable Value", + "value": "paola", + "helper": null, + "validation": null + } + ], + "content": "Required If", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_15", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_15" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "items": [ + { + "label": "Select List", + "config": { + "icon": "fas fa-angle-double-down", + "name": "form_select_list_2", + "label": "New Select List", + "helper": null, + "options": { + "key": "value", + "value": "content", + "dataName": "response", + "jsonData": "[{\"value\":\"one\",\"content\":\"one\"},{\"value\":\"two\",\"content\":\"two\"}]", + "renderAs": "dropdown", + "editIndex": null, + "pmqlQuery": null, + "dataSource": "provideData", + "optionsList": [ + { "value": "one", "content": "one" }, + { "value": "two", "content": "two" } + ], + "removeIndex": null, + "showRenderAs": true, + "showJsonEditor": false, + "showOptionCard": false, + "selectedOptions": [], + "allowMultiSelect": false, + "showRemoveWarning": false, + "valueTypeReturned": "single" + }, + "validation": [], + "placeholder": null, + "rootElement": "response", + "dataSourceUrl": null, + "dataSourceEndpoint": null + }, + "component": "FormSelectList", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "OptionsList", + "field": "options", + "config": { "label": null, "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormSelectList", + "editor-component": "FormSelectList" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "form_input_12", + "type": "text", + "label": "Required Unless form_select_list_2 = one", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [ + { + "field": "required_unless:", + "value": "required_unless:form_select_list_2,one", + "helper": "The field under validation must be present and not empty unless the Variable Name field is equal to any value.", + "configs": [ + { + "name": "variable-name", + "type": "InputVariable", + "label": "Variable Name", + "value": "form_select_list_2", + "helper": null, + "validation": "required" + }, + { + "name": "variable-value", + "type": "FormInput", + "label": "Variable Value", + "value": "one", + "helper": null + } + ], + "content": "Required Unless", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormInput", + "inspector": [ + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "string", "content": "Text" }, + { "value": "int", "content": "Integer" }, + { "value": "currency", "content": "Currency" }, + { + "value": "percentage", + "content": "Percentage" + }, + { "value": "float", "content": "Decimal" }, + { "value": "datetime", "content": "Datetime" }, + { "value": "date", "content": "Date" }, + { "value": "password", "content": "Password" } + ], + "validation": "required" + } + }, + { + "type": { + "_Ctor": [], + "extends": { + "_Ctor": [], + "props": { + "name": { "type": null }, + "error": { "type": null }, + "label": { "type": null }, + "value": { "type": null }, + "helper": { "type": null }, + "options": { "type": null }, + "selectedControl": { "type": null } + }, + "mixins": [ + { + "props": { + "validation": { "type": null }, + "validationData": { "type": null }, + "validationField": { "type": null }, + "validationMessages": { "type": null } + }, + "watch": { + "validationData": { + "deep": true, + "user": true + } + }, + "methods": [], + "computed": [] + } + ], + "methods": [], + "computed": [], + "_compiled": true, + "components": { + "Multiselect": { + "name": "vue-multiselect", + "_Ctor": [], + "props": { + "name": { "default": null }, + "limit": { "default": 99999 }, + "loading": { "default": false }, + "disabled": { "default": false }, + "tabindex": { "default": 0 }, + "limitText": [], + "maxHeight": { "default": 300 }, + "showLabels": { "default": true }, + "selectLabel": { + "default": "Press enter to select" + }, + "deselectLabel": { + "default": "Press enter to remove" + }, + "openDirection": { "default": null }, + "selectedLabel": { + "default": "Selected" + }, + "showNoOptions": { "default": true }, + "showNoResults": { "default": true }, + "selectGroupLabel": { + "default": "Press enter to select group" + }, + "deselectGroupLabel": { + "default": "Press enter to deselect group" + } + }, + "mixins": [ + { + "props": { + "id": { "default": null }, + "max": { + "type": [null, null], + "default": false + }, + "label": [], + "value": { "type": null }, + "options": { "required": true }, + "trackBy": [], + "multiple": { "default": false }, + "taggable": { "default": false }, + "blockKeys": [], + "allowEmpty": { "default": true }, + "groupLabel": [], + "resetAfter": { "default": false }, + "searchable": { "default": true }, + "customLabel": [], + "groupSelect": { "default": false }, + "groupValues": [], + "placeholder": { + "default": "Select option" + }, + "tagPosition": { "default": "top" }, + "hideSelected": { "default": false }, + "optionsLimit": { "default": 1000 }, + "clearOnSelect": { "default": true }, + "closeOnSelect": { "default": true }, + "internalSearch": { "default": true }, + "preselectFirst": { + "default": false + }, + "preserveSearch": { + "default": false + }, + "tagPlaceholder": { + "default": "Press enter to create a tag" + } + }, + "watch": [], + "methods": [], + "computed": [] + }, + { + "props": { + "showPointer": { "default": true }, + "optionHeight": { "default": 40 } + }, + "watch": [], + "methods": [], + "computed": [] + } + ], + "computed": [], + "_compiled": true, + "beforeCreate": [null], + "staticRenderFns": [] + } + }, + "inheritAttrs": false, + "staticRenderFns": [] + }, + "computed": [], + "_compiled": true, + "staticRenderFns": [] + }, + "field": "dataMask", + "config": { + "name": "Data Format", + "label": "Data Format", + "helper": "The data format for the selected type." + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "FormCheckbox", + "field": "readonly", + "config": { "label": "Read Only", "helper": null } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": { + "_Ctor": [], + "props": { + "value": { "type": null }, + "helper": { "type": null } + }, + "watch": { + "value": { "user": true, "immediate": true } + }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { "deep": true, "user": true } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_16", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_16" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [], + [] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-info", + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

After date

", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "inspector": [ + { + "type": "FormTextArea", + "field": "content", + "config": { + "rows": 5, + "label": "Content", + "value": null, + "helper": "The HTML text to display" + } + }, + { + "type": "FormCheckbox", + "field": "renderVarHtml", + "config": { + "label": "Render HTML from a Variable", + "value": null, + "helper": null + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + { + "items": [ + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_1", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ], + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_2", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [ + { + "field": "after:", + "value": "after:form_date_picker_1", + "helper": "The field under validation must be after the given date.", + "configs": [ + { + "type": "FormInput", + "label": "Date", + "value": "form_date_picker_1", + "helper": null, + "validation": "required" + } + ], + "content": "After Date", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": "1", "content": "6" }, + { "value": "2", "content": "6" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_1", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_1" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Before date

", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "inspector": [ + { + "type": "FormTextArea", + "field": "content", + "config": { + "rows": 5, + "label": "Content", + "value": null, + "helper": "The HTML text to display" + } + }, + { + "type": "FormCheckbox", + "field": "renderVarHtml", + "config": { + "label": "Render HTML from a Variable", + "value": null, + "helper": null + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + { + "items": [ + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_3", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ], + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_4", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [ + { + "field": "before:", + "value": "before:form_date_picker_3", + "helper": "The field unter validation must be before the given date.", + "configs": [ + { + "type": "FormInput", + "label": "Date", + "value": "form_date_picker_3", + "helper": null, + "validation": "required" + } + ], + "content": "Before Date", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": "1", "content": "6" }, + { "value": "2", "content": "6" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_1", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_1" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

After o equal date

", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "inspector": [ + { + "type": "FormTextArea", + "field": "content", + "config": { + "rows": 5, + "label": "Content", + "value": null, + "helper": "The HTML text to display" + } + }, + { + "type": "FormCheckbox", + "field": "renderVarHtml", + "config": { + "label": "Render HTML from a Variable", + "value": null, + "helper": null + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + { + "items": [ + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_5", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ], + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_6", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [ + { + "field": "after_or_equal:", + "value": "after_or_equal:form_date_picker_5", + "helper": "The field unter validation must be after or equal to the given field.", + "configs": [ + { + "type": "FormInput", + "label": "Date", + "value": "form_date_picker_5", + "helper": null, + "validation": "required" + } + ], + "content": "After or Equal to Date", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": "1", "content": "6" }, + { "value": "2", "content": "6" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_1", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_1" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Before o equal date

", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "inspector": [ + { + "type": "FormTextArea", + "field": "content", + "config": { + "rows": 5, + "label": "Content", + "value": null, + "helper": "The HTML text to display" + } + }, + { + "type": "FormCheckbox", + "field": "renderVarHtml", + "config": { + "label": "Render HTML from a Variable", + "value": null, + "helper": null + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + { + "items": [ + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_7", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ], + [ + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "form_date_picker_8", + "type": "datetime", + "label": "New Date Picker", + "maxDate": null, + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [ + { + "field": "before_or_equal:", + "value": "before_or_equal:form_date_picker_7", + "helper": "The field unter validation must be before or equal to the given field.", + "configs": [ + { + "type": "FormInput", + "label": "Date", + "value": "form_date_picker_7", + "helper": null, + "validation": "required" + } + ], + "content": "Before or Equal to Date", + "visible": false + } + ], + "placeholder": null + }, + "component": "FormDatePicker", + "inspector": [ + { + "type": "FormInput", + "field": "minDate", + "config": { + "label": "Minimum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "maxDate", + "config": { + "label": "Maximum Date", + "helper": null, + "validation": "date_or_mustache" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information.", + "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super" + } + }, + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the field's name" + } + }, + { + "type": "FormMultiselect", + "field": "dataFormat", + "config": { + "name": "Data Type", + "label": "Data Type", + "helper": "The data type specifies what kind of data is stored in the variable.", + "options": [ + { "value": "date", "content": "Date" }, + { + "value": "datetime", + "content": "Datetime" + } + ], + "validation": "required" + } + }, + { + "type": "ValidationSelect", + "field": "validation", + "config": { + "label": "Validation Rules", + "helper": "The validation rules needed for this field" + } + }, + { + "type": "FormInput", + "field": "placeholder", + "config": { + "label": "Placeholder Text", + "helper": "The placeholder is what is shown in the field when no value is provided yet" + } + }, + { + "type": "FormInput", + "field": "helper", + "config": { + "label": "Helper Text", + "helper": "Help text is meant to provide additional guidance on the field's value" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { + "value": "text-danger", + "content": "danger" + }, + { + "value": "text-warning", + "content": "warning" + }, + { + "value": "text-info", + "content": "info" + }, + { + "value": "text-light", + "content": "light" + }, + { + "value": "text-dark", + "content": "dark" + } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormCheckbox", + "field": "disabled", + "config": { + "label": "Read Only", + "helper": null + } + }, + { + "type": { + "props": ["value", "helper"], + "watch": { "value": { "immediate": true } }, + "methods": [], + "_scopeId": "data-v-7c18055b", + "computed": { "effectiveValue": [] }, + "_compiled": true, + "components": { + "MonacoEditor": { + "name": "monaco-editor", + "_Ctor": [], + "props": { "amdRequire": [] }, + "extends": { + "name": "MonacoEditor", + "model": { "event": "change" }, + "props": { + "theme": { "default": "vs" }, + "value": { "required": true }, + "options": [], + "language": [], + "original": [], + "amdRequire": [], + "diffEditor": { "default": false } + }, + "watch": { + "options": { + "deep": true, + "user": true + } + }, + "methods": [] + }, + "methods": [] + } + }, + "staticRenderFns": [] + }, + "field": "defaultValue", + "config": { + "label": "Default Value", + "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed." + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": "1", "content": "6" }, + { "value": "2", "content": "6" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { + "value": "text-primary", + "content": "primary" + }, + { + "value": "text-secondary", + "content": "secondary" + }, + { + "value": "text-success", + "content": "success" + }, + { "value": "text-danger", "content": "danger" }, + { + "value": "text-warning", + "content": "warning" + }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { + "value": "alert alert-primary", + "content": "primary" + }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { + "value": "alert alert-success", + "content": "success" + }, + { + "value": "alert alert-danger", + "content": "danger" + }, + { + "value": "alert alert-warning", + "content": "warning" + }, + { + "value": "alert alert-info", + "content": "info" + }, + { + "value": "alert alert-light", + "content": "light" + }, + { + "value": "alert alert-dark", + "content": "dark" + } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "loop_2", + "label": null, + "settings": { + "add": true, + "type": "new", + "times": "1", + "varname": "loop_2" + } + }, + "component": "FormLoop", + "container": true, + "inspector": [ + { + "type": "LoopInspector", + "field": "settings", + "config": { "label": null, "helper": null } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "Loop", + "editor-component": "Loop" + } + ] + ], + "label": "Multicolumn / Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { "value": 1, "content": "3" }, + { "value": 2, "content": "3" }, + { "value": 3, "content": "3" }, + { "value": 4, "content": "3" } + ] + }, + "component": "FormMultiColumn", + "container": true, + "inspector": [ + { + "type": "ContainerColumns", + "field": "options", + "config": { + "label": "Column Width", + "helper": null, + "validation": "columns-adds-to-12" + } + }, + { + "type": "ColorSelect", + "field": "color", + "config": { + "label": "Text Color", + "helper": "Set the element's text color", + "options": [ + { "value": "text-primary", "content": "primary" }, + { "value": "text-secondary", "content": "secondary" }, + { "value": "text-success", "content": "success" }, + { "value": "text-danger", "content": "danger" }, + { "value": "text-warning", "content": "warning" }, + { "value": "text-info", "content": "info" }, + { "value": "text-light", "content": "light" }, + { "value": "text-dark", "content": "dark" } + ] + } + }, + { + "type": "ColorSelect", + "field": "bgcolor", + "config": { + "label": "Background Color", + "helper": "Set the element's background color", + "options": [ + { "value": "alert alert-primary", "content": "primary" }, + { + "value": "alert alert-secondary", + "content": "secondary" + }, + { "value": "alert alert-success", "content": "success" }, + { "value": "alert alert-danger", "content": "danger" }, + { "value": "alert alert-warning", "content": "warning" }, + { "value": "alert alert-info", "content": "info" }, + { "value": "alert alert-light", "content": "light" }, + { "value": "alert alert-dark", "content": "dark" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "submit", + "event": "submit", + "label": "New Submit", + "variant": "primary", + "fieldValue": null, + "defaultSubmit": true + }, + "component": "FormButton", + "inspector": [ + { + "type": "FormInput", + "field": "label", + "config": { + "label": "Label", + "helper": "The label describes the button's text" + } + }, + { + "type": "FormInput", + "field": "name", + "config": { + "name": "Variable Name", + "label": "Variable Name", + "helper": "A variable name is a symbolic name to reference information." + } + }, + { + "type": "FormMultiselect", + "field": "event", + "config": { + "label": "Type", + "helper": "Choose whether the button should submit the form", + "options": [ + { "value": "submit", "content": "Submit Button" }, + { "value": "script", "content": "Regular Button" } + ] + } + }, + { + "type": "FormInput", + "field": "fieldValue", + "config": { + "label": "Value", + "helper": "The value being submitted" + } + }, + { + "type": "FormMultiselect", + "field": "variant", + "config": { + "label": "Button Variant Style", + "helper": "The variant determines the appearance of the button", + "options": [ + { "value": "primary", "content": "Primary" }, + { "value": "secondary", "content": "Secondary" }, + { "value": "success", "content": "Success" }, + { "value": "danger", "content": "Danger" }, + { "value": "warning", "content": "Warning" }, + { "value": "info", "content": "Info" }, + { "value": "light", "content": "Light" }, + { "value": "dark", "content": "Dark" }, + { "value": "link", "content": "Link" } + ] + } + }, + { + "type": "FormInput", + "field": "conditionalHide", + "config": { + "label": "Visibility Rule", + "helper": "This control is hidden until this expression is true" + } + }, + { + "type": "FormInput", + "field": "customFormatter", + "config": { + "label": "Custom Format String", + "helper": "Use the Mask Pattern format
Date ##/##/####
SSN ###-##-####
Phone (###) ###-####", + "validation": null + } + }, + { + "type": "FormInput", + "field": "customCssSelector", + "config": { + "label": "CSS Selector Name", + "helper": "Use this in your custom css rules", + "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]" + } + } + ], + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ] + } + ], + "computed": [], + "custom_css": null, + "created_at": "2021-10-04T18:48:19+00:00", + "updated_at": "2021-10-04T18:48:19+00:00", + "status": "ACTIVE", + "key": null, + "watchers": [], + "categories": [ + { + "id": 10, + "name": "catScreenPao", + "status": "ACTIVE", + "is_system": 0, + "created_at": "2021-02-02T16:09:50+00:00", + "updated_at": "2021-09-14T16:58:01+00:00", + "pivot": { + "assignable_id": 345, + "category_id": 10, + "category_type": "ProcessMaker\\Models\\ScreenCategory" + } + } + ] + } + ], + "screen_categories": [], + "scripts": [] +} diff --git a/tests/e2e/specs/ValidationRulesAdvanced.spec.js b/tests/e2e/specs/ValidationRulesAdvanced.spec.js new file mode 100644 index 000000000..c44f9d4ec --- /dev/null +++ b/tests/e2e/specs/ValidationRulesAdvanced.spec.js @@ -0,0 +1,92 @@ + +describe('Validation Rules (Advanced test)', () => { + beforeEach(() => { + cy.server(); + cy.visit('/'); + }); + + it('Verify all validation rules within loops', () => { + cy.loadFromJson('validation rules loop.json', 0); + cy.get('[data-cy=mode-preview]').click(); + + fillInputText('screen-field-form_input_1', 0, '1'); + + fillInputText('screen-field-form_input_2', 0, 'abc'); + + fillInputText('screen-field-form_input_3', 0, '123'); + + fillInputText('screen-field-form_input_4', 0, '10'); + + fillInputText('screen-field-Email', 0, 'john.doe@example.com'); + + fillInputText('screen-field-form_input_6', 0, '2020-10-10'); + + fillInputText('screen-field-form_input_7', 0, '8'); + + fillInputText('screen-field-form_input_8', 0, '12345'); + + fillInputText('screen-field-form_input_15', 0, 'john.doe@example.com'); + fillInputText('screen-field-form_input_16', 0, 'john.doe@example.com'); + + fillInputText('screen-field-form_input_5', 0, 'https://www.example.com'); + + fillInputText('screen-field-form_input_9', 0, '123'); + + fillInputText('screen-field-form_input_10', 0, '8'); + + fillInputText('screen-field-form_input_11', 0, 'x'); + + fillInputText('screen-field-Required', 0, 'ok'); + + fillInputText('screen-field-form_input_14', 0, 'paola'); + fillInputText('screen-field-form_input_13', 0, 'paola'); + + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_select_list_2"]').selectOption('one'); + + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_1"]').pickToday(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_2"]').pickTomorrow(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_3"]').pickToday(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_4"]').pickYesterday(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_5"]').pickToday(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_6"]').pickTomorrow(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_7"]').pickToday(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_date_picker_8"]').pickYesterday(); + + shouldNotHaveValidationErrors(); + + submitForm(); + }); +}); + +function fillInputText(dataCy, index = null, value = 'test') +{ + if (index === null) { + cy.get(`[data-cy=preview-content] [data-cy="${dataCy}"]`) + .clear() + .type(value); + } else { + cy.get(`[data-cy=preview-content] [data-cy="${dataCy}"]`).eq(index) + .clear() + .type(value); + } +} + +function shouldHaveValidationErrors() +{ + cy.get('#preview .form-group.form-group--error:visible') + .should('have.length.greaterThan', 0); +} + +function shouldNotHaveValidationErrors() +{ + cy.get('#preview .form-group.form-group--error:visible') + .should('have.length', 0); +} + +function submitForm() +{ + cy.get('#preview .form-group.form-group--error:visible') + .should('have.length', 0); + cy.get('[data-cy=preview-content] [data-cy="screen-field-submit"] button') + .click(); +} diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js index 1ded90592..b1511ba20 100644 --- a/tests/e2e/support/commands.js +++ b/tests/e2e/support/commands.js @@ -142,6 +142,16 @@ Cypress.Commands.add('pickToday', { prevSubject: true }, (subject) => { cy.get(subject).find('.day.today').click(); }); +Cypress.Commands.add('pickYesterday', { prevSubject: true }, (subject) => { + cy.get(subject).find('input').click(); + cy.get(subject).find('.day.today').prev().click(); +}); + +Cypress.Commands.add('pickTomorrow', { prevSubject: true }, (subject) => { + cy.get(subject).find('input').click(); + cy.get(subject).find('.day.today').next().click(); +}); + Cypress.Commands.add('pickTodayWithTime', { prevSubject: true }, (subject, hour, minute, period='AM') => { cy.get(subject).find('input').click(); cy.get(subject).find('.day.today').click(); From 9b6c9be3e40e44e7daf756727e6b7b59ac309637 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 18:53:53 -0400 Subject: [PATCH 07/11] Fix data according to field level --- src/ValidationsFactory.js | 1 + src/mixins/ScreenBase.js | 8 +++++++- src/mixins/ValidationRules.js | 35 +++++++++++++++++++++-------------- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js index 63d49da3b..175cd18e5 100644 --- a/src/ValidationsFactory.js +++ b/src/ValidationsFactory.js @@ -168,6 +168,7 @@ class FormElementValidations extends Validations { validation.configs.forEach((cnf) => { params.push(cnf.value); }); + params.push(fieldName); validationFn = validationFn(...params); } fieldValidation[rule] = validationFn; diff --git a/src/mixins/ScreenBase.js b/src/mixins/ScreenBase.js index 843ed03a7..07e64ece8 100644 --- a/src/mixins/ScreenBase.js +++ b/src/mixins/ScreenBase.js @@ -27,6 +27,12 @@ export default { }, }, methods: { + getDataAccordingToFieldLevel(dataWithParent, level) { + if (level === 0 || !dataWithParent) { + return dataWithParent; + } + return this.getDataAccordingToFieldLevel(dataWithParent._parent, level - 1); + }, addReferenceToParents(data) { if (!data) { return; @@ -50,7 +56,7 @@ export default { } } } else if (data[key] instanceof Object) { - const found = this.findParent(child, data[key], key); + const found = this.findParent(child, data[key], data); if (found) { return found; } diff --git a/src/mixins/ValidationRules.js b/src/mixins/ValidationRules.js index 037071970..149bd3507 100644 --- a/src/mixins/ValidationRules.js +++ b/src/mixins/ValidationRules.js @@ -67,9 +67,10 @@ export const custom_date = (date) => { return checkDate.isValid(); }; -export const after = (after) => helpers.withParams({after}, function(date, data) { +export const after = (after, fieldName) => helpers.withParams({after}, function(date, data) { // Get check date - const dataWithParent = this.getRootScreen().addReferenceToParents(data); + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, after, after)); if (!checkDate.isValid()) { @@ -82,9 +83,10 @@ export const after = (after) => helpers.withParams({after}, function(date, data) return inputDate > afterDate; }); -export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date, data) { +export const after_or_equal = (after_or_equal, fieldName) => helpers.withParams({after_or_equal}, function(date, data) { // Get check date - const dataWithParent = this.getRootScreen().addReferenceToParents(data); + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, after_or_equal, after_or_equal)); if (!checkDate.isValid()) { @@ -96,9 +98,10 @@ export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_e return inputDate >= equalOrAfterDate; }); -export const before = (before) => helpers.withParams({before}, function(date, data) { +export const before = (before, fieldName) => helpers.withParams({before}, function(date, data) { // Get check date - const dataWithParent = this.getRootScreen().addReferenceToParents(data); + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, before, before)); if (!checkDate.isValid()) { @@ -110,9 +113,10 @@ export const before = (before) => helpers.withParams({before}, function(date, da return inputDate < beforeDate; }); -export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date, data) { +export const before_or_equal = (before_or_equal, fieldName) => helpers.withParams({before_or_equal}, function(date, data) { // Get check date - const dataWithParent = this.getRootScreen().addReferenceToParents(data); + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); dataWithParent.today = moment().format('YYYY-MM-DD'); const checkDate = moment(get(dataWithParent, before_or_equal, before_or_equal)); if (!checkDate.isValid()) { @@ -154,8 +158,9 @@ export const required = (value) => { return value instanceof Array ? value.length > 0 : !!value; }; -export const requiredIf = (variable, expected) => helpers.withParams({variable, expected}, function(value) { - const dataWithParent = this.getRootScreen().addReferenceToParents(this.vdata); +export const requiredIf = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value) { + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(this.vdata), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -166,8 +171,9 @@ export const requiredIf = (variable, expected) => helpers.withParams({variable, return value instanceof Array ? value.length > 0 : !!value; }); -export const requiredUnless = (variable, expected) => helpers.withParams({variable, expected}, function(value) { - const dataWithParent = this.getRootScreen().addReferenceToParents(this.vdata); +export const requiredUnless = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value) { + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(this.vdata), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -178,8 +184,9 @@ export const requiredUnless = (variable, expected) => helpers.withParams({variab return value instanceof Array ? value.length > 0 : !!value; }); -export const sameAs = (field) => helpers.withParams({field}, function(value, data) { - const dataWithParent = this.getRootScreen().addReferenceToParents(data); +export const sameAs = (field, fieldName) => helpers.withParams({field}, function(value, data) { + const level = fieldName.split('.').length - 1; + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); const valueSameAs = get(dataWithParent, field); return value == valueSameAs; }); From 4af5b238a34f6399d2ebda52b56ece43efba04cf Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Mon, 18 Oct 2021 19:59:25 -0400 Subject: [PATCH 08/11] Complete required unless test --- tests/e2e/specs/ValidationRulesAdvanced.spec.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/e2e/specs/ValidationRulesAdvanced.spec.js b/tests/e2e/specs/ValidationRulesAdvanced.spec.js index c44f9d4ec..34947910c 100644 --- a/tests/e2e/specs/ValidationRulesAdvanced.spec.js +++ b/tests/e2e/specs/ValidationRulesAdvanced.spec.js @@ -54,6 +54,11 @@ describe('Validation Rules (Advanced test)', () => { shouldNotHaveValidationErrors(); + cy.get('[data-cy=preview-content] [data-cy="screen-field-form_select_list_2"]').selectOption('two'); + shouldHaveValidationErrors(); + fillInputText('screen-field-form_input_12', 0, 'ok'); + shouldNotHaveValidationErrors(); + submitForm(); }); }); From 83d297ff2bac80d21dc2d011db2846f24fc8d0d9 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Tue, 19 Oct 2021 09:53:33 -0400 Subject: [PATCH 09/11] Skip validation on hidden containers --- src/ValidationsFactory.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js index 175cd18e5..72e7d940c 100644 --- a/src/ValidationsFactory.js +++ b/src/ValidationsFactory.js @@ -27,6 +27,22 @@ class Validations { async addValidations(validations) { throw 'Abstract method addValidations not implemented', validations; } + + /** + * Check if element/container is visible. + */ + isVisible() { + // Disable validations if field is hidden + let visible = true; + if (this.element.config.conditionalHide) { + try { + visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data); + } catch (error) { + visible = false; + } + } + return visible; + } } /** @@ -60,6 +76,10 @@ class ScreenValidations extends Validations { */ class FormNestedScreenValidations extends Validations { async addValidations(validations) { + // Disable validations if field is hidden + if (!this.isVisible()) { + return; + } const definition = await this.loadScreen(this.element.config.screen); if (definition && definition[0] && definition[0].items) { await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data }).addValidations(validations); @@ -85,6 +105,10 @@ class FormNestedScreenValidations extends Validations { */ class FormLoopValidations extends Validations { async addValidations(validations) { + // Disable validations if field is hidden + if (!this.isVisible()) { + return; + } set(validations, this.element.config.name, {}); const loopField = get(validations, this.element.config.name); loopField['$each'] = {}; @@ -98,6 +122,10 @@ class FormLoopValidations extends Validations { */ class FormMultiColumnValidations extends Validations { async addValidations(validations) { + // Disable validations if field is hidden + if (!this.isVisible()) { + return; + } await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations); } } @@ -107,6 +135,10 @@ class FormMultiColumnValidations extends Validations { */ class PageNavigateValidations extends Validations { async addValidations(validations) { + // Disable validations if field is hidden + if (!this.isVisible()) { + return; + } if (this.screen.pagesValidated && !this.screen.pagesValidated.includes(parseInt(this.element.config.eventData))) { this.screen.pagesValidated.push(parseInt(this.element.config.eventData)); if (this.screen.config[this.element.config.eventData] && this.screen.config[this.element.config.eventData].items) { From 8f0b5dfd52aa0dcdeb70a3675d642186885cd229 Mon Sep 17 00:00:00 2001 From: "Marco A. Nina Mena" Date: Tue, 19 Oct 2021 11:16:45 -0400 Subject: [PATCH 10/11] add debunce to refresh validation rules when visibility changes --- src/mixins/Json2Vue.js | 5 ++++- src/mixins/VisibilityRule.js | 19 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/mixins/Json2Vue.js b/src/mixins/Json2Vue.js index fc3f1eb60..32e37ef76 100644 --- a/src/mixins/Json2Vue.js +++ b/src/mixins/Json2Vue.js @@ -335,7 +335,10 @@ export default { component.methods.loadValidationRules = function() { // Asynchronous loading of validations const validations = {}; - ValidationsFactory(definition, { screen: definition, firstPage, data: this.vdata }).addValidations(validations).then(() => { + ValidationsFactory(definition, { screen: definition, firstPage, data: {_parent: this._parent, ...this.vdata} }).addValidations(validations).then(() => { + if (_.isEqual(this.ValidationRules__, validations)) { + return; + } this.ValidationRules__ = validations; this.$nextTick(() => { if (this.$v) { diff --git a/src/mixins/VisibilityRule.js b/src/mixins/VisibilityRule.js index 88844a88c..c95f9add3 100644 --- a/src/mixins/VisibilityRule.js +++ b/src/mixins/VisibilityRule.js @@ -1,16 +1,32 @@ import { Parser } from 'expr-eval'; +import { debounce } from 'lodash'; export default { mounted() { + this.refreshValidationRulesByName = debounce(this.refreshValidationRulesByName, 300); + this.$root.$on('refresh-validation-rules', () => { this.loadValidationRules(); }); }, methods: { + refreshValidationRulesByName(fieldName, isVisible) { + if (fieldName) { + // Update the array of hidden fields + const fieldExists = this.hiddenFields__.indexOf(fieldName) !== -1; + if (isVisible && fieldExists) { + this.hiddenFields__ = this.hiddenFields__.filter((f) => f !== fieldName); + } else if (!isVisible && !fieldExists) { + this.hiddenFields__.push(fieldName); + } + } + this.$root.$emit('refresh-validation-rules'); + }, + visibilityRuleIsVisible(rule, fieldName) { try { const data = Object.assign({ _parent: this._parent }, this.vdata); - const isVisible = !!Parser.evaluate(rule, Object.assign({}, this, data)); + const isVisible = !!Parser.evaluate(rule, Object.assign({}, data)); // Update the array of hidden fields if (fieldName) { @@ -25,6 +41,7 @@ export default { } + this.refreshValidationRulesByName(fieldName, isVisible); return isVisible; } catch (e) { return false; From 36b09b3a803c6508bef4520bff794cdc0755a872 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Wed, 27 Oct 2021 09:55:43 -0400 Subject: [PATCH 11/11] Fix data with parent for required if/unless rules --- src/mixins/ValidationRules.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mixins/ValidationRules.js b/src/mixins/ValidationRules.js index 149bd3507..90cafa4b2 100644 --- a/src/mixins/ValidationRules.js +++ b/src/mixins/ValidationRules.js @@ -158,9 +158,9 @@ export const required = (value) => { return value instanceof Array ? value.length > 0 : !!value; }; -export const requiredIf = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value) { +export const requiredIf = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value, data) { const level = fieldName.split('.').length - 1; - const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(this.vdata), level); + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -171,9 +171,9 @@ export const requiredIf = (variable, expected, fieldName) => helpers.withParams( return value instanceof Array ? value.length > 0 : !!value; }); -export const requiredUnless = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value) { +export const requiredUnless = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value, data) { const level = fieldName.split('.').length - 1; - const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(this.vdata), level); + const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected;