Form Types
Common Options
form.title
form.subtitle
form.type: Wizard
form.color
HTML color Color of form
form.shape
Shape of wizard tabs see Form Wizard Git
form.validateOnBack
Applies to wizard only
form.errorColor
form.backButtonText
form.nextButtonText
form.finishButtonText
form.transition
CSS transition used when changing tabs
form.shape
Used for wizard wizard for type
state.startIndex
0 based index of the tab the form will have selected
page[ {pageNumber} ].visible
set to `false` to hide this page, default is `true`
Form Design
Form Types
type
This is the object type for this field, e.g. input, radio, dropdown etc.
see: https://icebob.gitbooks.io/vueformgenerator/content/fields/core-fields.html
visible_calc - Boolean or string expression
Field components can be shown or hidden programatically. The equation of the visible_calc key is evaluated when it's referenced parameters change and the boolean Boolean result will control the field visibility.
When a visible_calc parameter is supplied, the visible key is ignored.
// example - show occupation when employed is 'yes'
//data model
{
"isEmployed" : ""
}//formSchema
... "fields" :
{
"label" : "Are you employed?",
"type": "input",
"model" : "isEmployed"
},
{
"inputType": "text",
"label": "What's your occupation?",
"model": "occupation",
"type": "input",
"visible_calc": "this.model.isEmployed == 'yes'"
}Accordions, v-Tabs and rowLists:
These component types have their own sub data model so this.model will reference the object within the rows array.To see the entire data model you can reverence this.options.fullModel This allows you to look outside of your row or tab.
JSONPath Library
You can also take advantage of the jsonPath library and quickly search arrays for matches. This is a very powerful function and worth reading the documentation.
Documentation : https://github.com/json-path/JsonPath
Bootstrap Columns
Add custom CSS classes to styleClasses
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
omit periods
// e.g.:
"styleClasses": "col-md-offset-2 col-md-6"
Field Validation
Sample Wizard JSON
Validation{
"form": {
"formType": "formwizard",
"title": "Camp Green Acres 2018 Application For Enrollment",
"text": "<br /><h2>This is an example of a multiple page form.</h2> Disrupt jean shorts viral hella meh, plaid cupidatat magna art party. Echo Park adipisicing literally narwhal. Williamsburg leggings church-key, craft beer forage cornhole jean shorts blue bottle pariatur. <br /> <br /> <h2>Officia sapiente </h2>Bespoke, locavore plaid cray voluptate deep v ex vinyl tote bag chillwave swag occaecat. \n\nSed banh mi 3 wolf moon single-origin coffee quis tempor. Hoodie pitchfork pork belly aliqua, shabby chic elit consequat freegan ethical try-hard mixtape. Schlitz banjo deep v ullamco blog, umami nulla sint elit skateboard Godard odio. ",
"color": "grey",
"shape": "circle",
"errorcolor": "#a94442",
"showPannelHeader": false,
"panelHeaderText": "Your Dating Profile",
"wizardTitle": "Register your child ",
"panelIsCollapsible": false,
"validateOnBack" : false,
"cssObject": {
"col-md-12": true,
"text-danger": false
},
"styleObject": {}
},
"pages": [
{
"title": "Start",
"description": "Overview Information",
"icon": "fa fa-car",
"validateOnServer": true,
"schema": {
"fields": [
{
"type": "switch",
"label": "Status",
"model": "status",
"multi": true,
"readonly": false,
"featured": false,
"disabled": true,
"default": true,
"textOn": "Active",
"textOff": "Inactive"
},
{
"type": "select",
"label": "Prefix",
"model": "prefix",
"values": [
"Mr.",
"Mr. & Mrs.",
"Mrs.",
"Ms."
],
"styleClasses": "col-md-2"
},
{
"type": "input",
"inputType": "text",
"label": "Family Name",
"model": "familyName",
"readonly": false,
"disabled": false,
"styleClasses": "col-md-5"
},
{
"type": "input",
"inputType": "text",
"label": "Referred By",
"model": "reffered",
"readonly": false,
"disabled": false,
"styleClasses": "col-md-5"
}
]
}
},
{
"title": "Parent Info",
"description": "Contact Info",
"icon": "fa fa-user ",
"schema": {
"fields": [
{
"type": "input",
"inputType": "text",
"label": "First Name",
"model": "nameFirst",
"placeholder": "",
"featured": true,
"required": true,
"styleClasses": "col-md-4"
},
{
"type": "googleAddress",
"inputType": "text",
"label": "Address",
"model": "address",
"placeholder": "start typ",
"featured": true,
"required": true,
"styleClasses": "col-md-4"
},
{
"type": "input",
"inputType": "email",
"label": "E-mail",
"model": "email",
"validator": "email",
"placeholder": "User's e-mail address",
"styleClasses": "col-md-4"
},
{
"type": "input",
"inputType": "text",
"label": "First Name",
"model": "nameFirst2",
"placeholder": "",
"featured": true,
"required": true,
"styleClasses": "col-md-4"
},
{
"type": "input",
"inputType": "text",
"label": "Last Name",
"model": "nameLast2",
"placeholder": "",
"featured": true,
"required": true,
"styleClasses": "col-md-4"
},
{
"type": "input",
"inputType": "email",
"label": "E-mail",
"model": "email2",
"validator": "email",
"placeholder": "User's e-mail address",
"styleClasses": "col-md-4"
}
]
}
},
{
"title": "Camper Info",
"description": "Camper Information & Program Selections",
"icon": "fa fa-home",
"schema": {
"fields": [
{
"type": "input",
"inputType": "text",
"label": "Campers First Name",
"model": "campFirstName",
"placeholder": "",
"featured": true,
"required": true,
"styleClasses": "col-md-6"
},
{
"type": "input",
"inputType": "text",
"label": "Campers Last Name",
"model": "camplast",
"placeholder": "",
"featured": true,
"required": true,
"styleClasses": "col-md-6"
},
{
"type": "radios",
"label": "Gender",
"model": "gender",
"values": [
" Male",
" Female"
],
"styleClasses": "col-md-4"
},
{
"type": "dateTime",
"label": "DOB",
"model": "dob",
"required": true,
"placeholder": "User's birth of date",
"min": "",
"max": "",
"validator": "date",
"dateTimePickerOptions": {
"format": "YYYY-MM-DD"
},
"onChanged": "",
"styleClasses": "col-md-4"
}
]
}
},
{
"title": "Payment",
"description": "Visa, Paypal",
"icon": "fa fa-credit-card",
"schema": {
"fields": [
{
"type": "input",
"inputType": "text",
"label": "Card Type",
"model": "cardType",
"placeholder": "visa / MC / Amex",
"featured": false,
"required": false
},
{
"type": "input",
"inputType": "text",
"label": "Full Name On Card",
"model": "cardName",
"placeholder": "john J. Smith",
"featured": false,
"required": false
},
{
"type": "input",
"inputType": "input",
"label": "Number",
"model": "cardNumber",
"placeholder": "xxx-xxx-xxx"
}
]
}
}
],
"model": {
"id": 1,
"prefix": "Mr.",
"nameFirst": "John",
"nameLast": "Smith",
"password": "J0hnD03!x4",
"skills": [
"Javascript",
"VueJS"
],
"email": "[email protected]",
"status": true
},
"options": {
"validateAfterLoad": true,
"validateAfterChanged": true
},
"state": {
"startIndex": 0
}
}Last updated
Was this helpful?