Custom controls

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?

[Hanady1990]

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

[jasonEXA]

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.