How to extend Form elements Without touching Core?

[ajaykr089]

Het Kevin,

I was trying to add some custom fields in one of my project, for doing so i have to edit form-builder.js

What i was expecting if can extend custom fields in a separate file,so that i can update library in the next release.

Is there any way to do so..?

[kevinchappell]

Currently no but this is being worked on for the next version.

[smark111]

Looking for same functionality. I would like to add validations to Text Field like,

URL, Digits Only, URL or Email, and other options supported by http://jqueryvalidation.org/ plugin.

Was going though the code, and at current stage, looks like i need to update the core code to add these additional options. Any option to extend the fields without touching the core will be really helpful.

Thanks

[ivuorinen]

Declaring new field types (or predefined elements) would be a great feature, +1 from me.

Regarding validation. Would simple <input pattern="[0-9][A-Z]{3}"> be sufficient? It is valid way according to spec and progressive enhancements could be used to provide support for older browsers (which there aren't a lot).

Selecting validation rules could be made user friendly by providing pre defined validation rules (I'm thinking dropdown) with option to use raw RegExp by the developer.

[kevinchappell]

@ivuorinen The fields themselves will definitely have support for pattern (and any other attribute) to take advantage of Constraint API. In the future the field you described could be configured like so:

{
  tag: 'input',
  meta: {
    label: 'Password',
    description: 'Requires at least 1 number and 3 letters'
  },
  attrs: {
    type: 'password',
    pattern: '[0-9][A-Z]{3}'
  }
}

edit: I forgot to mention that with this configuration the developer could do something similar to this with the generated form which I think is what your'e referring to with RegExp use for developer.

I haven't finalized the spec for field declaration but should be similar to add new field types and it dovetails in with the spec for field attribute declaration in the editor I outlined earlier here. With this format If you wanted users to see the pattern attribute in the editor but not edit it you could do this:

{
  formSettings: {
    tag: {
      input: {
        password: {
          attrs: {
            pattern: {
              fixed: true
            }
          }
        }
      }
    }
  }
}

or formSettings.tag.input.password.attrs.name.fixed = true;

I think that's the simplest way to provide the granularity of extensibility and forward compatibility developers have been asking for without requiring them to write any actual code.

[AdamLitt]

Hi, is there still scope on formBuilder for custom elements?

Cheers,
Adam

[kevinchappell]

@AdamLitt Not for formBuilder. Due to the amount of refactoring required to make formBuilder truly extensible for custom fields a new plugin named Formeo was created instead. The syntax described above is pretty much the same except label and description are now part of config instead of meta. Meta configuration for a field is for settings within the editor, example:

meta: {
  group: 'common',
  icon: 'password',
  id: 'password'
}

The above meta config would place password in the editor's common fields, describe the icon it would use in the editor and set a baseID for the field to be reference by the editor.

This is all still being documented and will be posted over on the Formeo repo.

[AdamLitt]

Thanks Kevin.

[adityashankert]

@kevinchappell by when we can expect some docs to use it as we want to use this in our upcoming project. If possible our team can also contribute to your development.

[kevinchappell]

There is already some basic (really basic) documentation here but there will be a fair bit more posted early the next week.

[pdldynamicsltd]

did this ever get implemented? I would really like to add some database driven fields to the builder like type ahead and textboexs which lookup values once a form value is set

[AdamLitt]

I ended up writing something myself to integrate with Db elements in my own system. It works really well; although this probably isn't the answer you wanted.

[karthikn7]

Hi kevin..
in this form builder i want to include a new fields and want to remove the old fileds, (eg: i want to add a name, ang etc..) how to do this (i want to remove all old fields)

[brentkelly]

@karthikn7 there is lots of info in the docs

• http://formbuilder.readthedocs.io/en/latest/formBuilder/options/disableFields/
• http://formbuilder.readthedocs.io/en/latest/formBuilder/options/fields/
• http://formbuilder.readthedocs.io/en/latest/formBuilder/options/templates/
• http://formbuilder.readthedocs.io/en/latest/formBuilder/control-plugins/

[karthikn7]

Hi ,

    I need to remove  the particular field  from the list of form builder fields ,  after drag into the form builder container. 

      Example : 
                If i move checkbox from the right side menu , i need to remove that checkbox field in the right side form builder list.

[santosh-k1]

How to create custom id of html controls rightnow its generating random id such as id="629a3feb-a28f-42fe-a547-4ec838455f9b"

[karthikn7]

on drag the field from right side panel to left side container , remove the particular field which i drag from right side panel. Please help me to do this

[karthikn7]

i need to add the custom attributes to both sides fields,

for example ,

fields: [
{
label: "Test1",
type: "text",
fieldType : "field1", // i need to add like this
subtype: "email",
icon: "?"
},
}
and expecting result as

<input type="email" class="form-control" name="text-1518152971932-preview" pattern="form-control" id="text-1518152971932-preview" fieldType="field1">

and final formbuilder json like

[
{
"type": "text",
"fieldType" : "field1",
"subtype": "email",
"label": "Test1",
"className": "form-control",
"name": "text-1518153290403",
"pattern": "tamil form-control"
}
]