diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js index f88d645c5..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,10 +105,14 @@ 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'] = []; - 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']); } } @@ -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) { @@ -168,6 +200,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/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/ScreenBase.js b/src/mixins/ScreenBase.js index c0afa8857..07e64ece8 100644 --- a/src/mixins/ScreenBase.js +++ b/src/mixins/ScreenBase.js @@ -27,6 +27,50 @@ export default { }, }, methods: { + getDataAccordingToFieldLevel(dataWithParent, level) { + if (level === 0 || !dataWithParent) { + return dataWithParent; + } + return this.getDataAccordingToFieldLevel(dataWithParent._parent, level - 1); + }, + 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], data); + 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 0dccc4a7a..90cafa4b2 100644 --- a/src/mixins/ValidationRules.js +++ b/src/mixins/ValidationRules.js @@ -67,9 +67,11 @@ export const custom_date = (date) => { return checkDate.isValid(); }; -export const after = (after) => helpers.withParams({after}, function(date) { +export const after = (after, fieldName) => helpers.withParams({after}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + 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()) { return false; @@ -81,9 +83,11 @@ 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, fieldName) => 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 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()) { return false; @@ -94,9 +98,11 @@ 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, fieldName) => helpers.withParams({before}, function(date, data) { // Get check date - const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata}; + 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()) { return false; @@ -107,9 +113,11 @@ 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, fieldName) => 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 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()) { return false; @@ -150,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 = {_parent: this._parent, ...this.vdata}; +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(data), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -162,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 = {_parent: this._parent, ...this.vdata}; +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(data), level); const variableValue = get(dataWithParent, variable); const isBoolean = (variableValue === true || variableValue === false); let expectedValue = expected; @@ -174,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) { - const dataWithParent = {_parent: this._parent, ...this.vdata}; +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; }); 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; 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/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/NestedValidationRules.spec.js b/tests/e2e/specs/NestedValidationRules.spec.js index 643de0ebb..de8180f9e 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 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(); + + 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"]') diff --git a/tests/e2e/specs/ValidationRulesAdvanced.spec.js b/tests/e2e/specs/ValidationRulesAdvanced.spec.js new file mode 100644 index 000000000..34947910c --- /dev/null +++ b/tests/e2e/specs/ValidationRulesAdvanced.spec.js @@ -0,0 +1,97 @@ + +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(); + + 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(); + }); +}); + +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();