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 Config

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

• Section Client Key
• Turn on/off Dynamic Form
  • If on, 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
         }
    ]
}

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.

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. (Pic later)

Remove control out of a row

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

Config control

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

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