Form Builder Template Form Config

How to config my form?

I'll show you all the configurations in this topic :D

Section

Default

• To add a new section, you can click the button Add Section, a new section will appear below all existed sections.
• To remove a section, you can click the X Remove Section, if your section currently is blank (no rows), the section will be deleted, otherwise an error message will appear.
• Section can be sort-able too, you can change your section order by drag it up or down like this:

Section Config

We can config for some special case for a section, including:

• Section Client Key
• Turn on/off Dynamic Form
  • If on, you can set Min and Max instance for Dynamic Form.

Section Client Key

Is the key of the property for a section when we get form values in Form Builder GUI. By the default, Form Builder Template will create a default unique key. This will affect to your Form Builder GUI.

For example when we get form values in Form Builder GUI, have a section has a key section_1, the data we will get:

{
    // if static form
    section_1: { // <== section client key
         control_name: "", // value
         ...
    }
    // if dynamic form
    section_1: [ // <== section client key
         {
              control_name: "", // value
         }
    ]
}

Section Label Position (Version 1.3.0 above)

Available Position: Horizontal, Vertical. Demo:

Dynamic Form

If you turn this on, your section will be a default template for dynamic form. Dynamic form will depend on that template to clone a new form. With dynamic form you can add/remove form by you want. This will affect to your Form Builder GUI.

Configurable:

• Min instance: the minimum instance must have.
• Max instance: the maximum instance that can be created.

Rows

You don't need to config anything for row, rows only there to let you drag & drop your control into a specific row.
But you can change the row order if you want, just drag it and move it up or down like this:

Control

Insert control into a section

• Look for a control in right sidebar
• Drag it and drop in specific row in a section.
• Your control will be added into that row.

Remove control out of a row

• Drag the control from a row
• Drop it in the sidebar
• Your control will be removed.

Change control order

You can change control order in a row too, just simply drag it and move it like this:

Config control

• Double click an added control
• The config control in the right sidebar will appear
• You can config by your choice

I'll walkthrough all the things that you can config for a specific control below here :D

Control Label

All controls always have a label, you can config text for that label.
(Version 1.3.0 above) You can able to styling the label text (bold, italic, underline) if you want.

Control Name

The name of the field (input[name='control_name']) will be rendered, also it will be the key name when we get form values in Form Builder GUI

{
    your_info: {
        // default control name
        control_name_1: "....",

        // configurated control name
        Name: "...",
        Phone: "..."
    }
}

Control width size

Follow by Bootstrap Grid, you can config any size from 1-12 column(s) which you want. Most recommended and default: Width 4 parts (col-md-4)

Default value

The default value for your control if there's no value yet.

Control label

The label of your control

Read only

If you checked this, the Form GUI will render as a read-only control for you.

Text Input - Multiline

If you checked this, the Form GUI will render a textarea and allow user to input multi-line value instead of input single line.

Number Input - Integer Only

If you checked this, the Number GUI can only input as an integer number only.

Number Input - Decimal Places

You can only config this field if the Integer Only is not checked. You can config the decimal place, example:
Decimal place: 2
Value: 1.22

Date Picker - Current Date

The Form GUI will help you input the current date if this option is checked.
Note: if default value available, the current date will be override.

Date Picker - Date Format

Available date format you can choose:

    'dd/mm/yy' // 22/09/2018
    'dd-mm-yy' // 22-09-2018
    'mm/dd/yy' // 09/22/2018
    'mm-dd-yy' // 09-22-2018
    'yy/mm/dd' // 2018/09/22
    'yy-mm-dd' // 2018-09-22

Note: yy stand for YYYY (4 number of year) by Date Format of Date Picker - Jquery UI.

Time Picker - Current Time

The Form GUI will help you input the current time if this option is checked.
Note: if default value available, the current time will be override.

Time Picker - Time Format

Available time format you can choose:

    'H:m' // 22:1
    'HH:mm' // 03:04
    'h:m p' // 11:4 AM
    'hh:mm p' // 09:09 PM

Select Option - Multiple Select

If this option is checked, the select control will allow user select many option as they want (multiple select)

Select Option - Static Data Source

The data source for select control, you need to define it.

Select Option - Ajax Data Source

URL that contains data source for the select control. The data response must be return as JSON with these following structure: 1/ Value = Text - Array of string

['hello', 'world', 'seth', 'phat', ...]

2/ Value and text - Array of objects

[
    {
        id: 1,
        text: "Phat Tran",
    },
    {
        id: 2,
        text: "Seth Phat",
    },
    ...
]

Notes

• Please use the Preview mode to preview & test your form for the best experience. Test directly in the Form Builder Template may not have a best experience for you :D.
• For the Ajax Source of Select Option, you should make sure that the CORS of your server are allow the Ajax Request, in order to let the Ajax Request preflight work perfectly.