diff --git a/src/ValidationsFactory.js b/src/ValidationsFactory.js
index d5522dba4..0e80db2e6 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.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 25131c82d..bddfff644 100644
--- a/src/mixins/Json2Vue.js
+++ b/src/mixins/Json2Vue.js
@@ -322,6 +322,9 @@ export default {
// Asynchronous loading of validations
const validations = {};
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(() => {
this.$v.$touch();
diff --git a/src/mixins/ScreenBase.js b/src/mixins/ScreenBase.js
index 65748f0d8..03ee0667c 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 ad67181a4..0bb17d5e4 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,20 +158,23 @@ 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);
if (get(dataWithParent, variable) != expected) return true;
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);
if (get(dataWithParent, variable) == expected) return true;
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 4b0c0e980..6885eb9ef 100644
--- a/src/mixins/VisibilityRule.js
+++ b/src/mixins/VisibilityRule.js
@@ -1,29 +1,34 @@
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));
-
- 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);
- this.$root.$emit('refresh-validation-rules');
- } else if (!isVisible && !fieldExists) {
- this.hiddenFields__.push(fieldName);
- this.$root.$emit('refresh-validation-rules');
- }
- }
+ const isVisible = !!Parser.evaluate(rule, Object.assign({}, data));
+ 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 afceb0336..fa6e3776b 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('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')
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();