1.0
BF Editor fmbetterforms.com

Form Types

Common Options

form.type: Wizard

Form Design

Form Types

Form Wizard Git

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

{
  "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": "cdelfs@delfsengineering.ca",
    "status": true
  },
  "options": {
    "validateAfterLoad": true,
    "validateAfterChanged": true
  },
  "state": {
    "startIndex": 0
  }
}
PreviousForms ProcessorNextHTML & VueJS

Last updated