Custom controls

[nosajd]

Hi,

I was interested in further customizing your library to also allow a consumer to add their own custom controls. Currently the library allows for form controls to be created at the basic level which can then be edited to have some additional options.

However, if I want to have, lets say a "Credit Card" field which would be a text field and would always be required if present on a form, instead of asking the user to first drag a Text Field control, then edit it and add attributes, it would be better if I could have a Credit Card control, which when rendered would have all this information prefilled. This would save time for the user when generating the form.

Is this functionality already present?

I was not able to find it and as such decided to dig through the source code a bit.
I have found out a way to add a custom control and have it rendered on the form builder interface.

form-builder.js
just add another object to the frmFields (line 219),
{ label: 'Custom Control', attrs: { type: 'textarea', className: 'text-area', name: 'customcontrol', customAtt: 'test' } }

helpers.js line 645
the orderFields function currently expects a control to have a unique type. To allow for multiple types, I did the following at line 668,
` fieldOrder.forEach((fieldType) => {
var field = frmbFields.filter(function(field) {
return field.attrs.type === fieldType;
});
var arrayLength = field.length;

  for(var i=0; i < arrayLength; i++) {
	newOrderFields.push(field[i]);
  }
});`

This allows me to render my "Custom Control" in the control bar of the formbuilder. It also allows me to drag/drop and give me the appropriate JSON. However, if I want to add more attributes to the element, just adding more attributes in the attrs does not work.

I managed to get the attribute rendered as an html attribute by doing the following,

form-builder.js
line 337
let $field = $('<li/>', { 'class': 'icon-' + frmbFields[i].attrs.className, 'type': frmbFields[i].type, 'name': frmbFields[i].className, 'label': frmbFields[i].label, 'customAtt': frmbFields[i].customAtt });

line 1085
let field = utils.markup('li', liContents, { 'class': type + '-field form-field', 'type': type, id: lastID, customAtt: values.customAtt }), $li = $(field);

However, when I try to obtain the form as a JSON string, the custom attribute does not render.

Is this functionality already present and am I just trying to reinvent it?

[nosajd]

Ok, scratch that.. I just came across typeUserAttrs which allows me to define my own attributes which I can then reinitialize when creating a custom control to have a predefined value which autoappears in the JSON created. Awesome! http://formbuilder.readthedocs.io/en/latest/formBuilder/options/typeUserAttrs/

In any case, my original query still remains :) is there a way in which custom controls can be added ?

[kevinchappell]

Currently no, however the next version will have some basic support as it allows you to define custom templates. That combined with typeUserAttrs as you have found should allow for basic custom controls.

[nosajd]

Hi,

I have managed to add two options to allow custom controls to be added. Below is the option's array for it.
fbOptions = { dataType: 'json', controlPosition: 'left', typeUserAttrs: { text: { identifier:{ label: 'Custom Identifier' } } }, clearDefaultControls: true, userDefinedControls: [{ label: 'User Control', attrs: { type: 'text', className: 'text-input', name: 'customcontrol', identifier: 'customcontrol' } }] }

There is just a small change to be done in form-builder.js to achieve it and the user is able to add as many controls as they want..of course, as per your defined types i.e. text area, text-input etc.

[nosajd]

Sorry just saw your comment as I posted mine, I was able to use your library with just a few minor tweaks and achieve this :)

[Hanady1990]

@jasonEXA can you please describe in details what you have done to add custom controls?