Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.


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++) {

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

Hanady1990commented, Feb 3, 2017

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

jasonEXAcommented, Nov 23, 2016


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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Controls Company - Houston
Custom Controls Company has been providing Hazardous Location and Explosion Proof HVAC equipment for industry since the 1960's. In the 40+ years since, ......
Read more >
Custom Controls Inc
Custom Control Equipment. Where you can find the dedication, experience, and quality control equipment necessary to keep your job site safe and productive....
Read more >
Custom Controls Group | Building Automation Systems
CUSTOM CONTROLS GROUP. Innovative Building Solution Specialists. (614) 425-8694 | | For Emergency Service Call (614) 425-8694 x 1001.
Read more >
Custom Controls of Arizona, Quality Custom Electric Control ...
Custom Controls of Arizona - building high quality custom electric control panels in our Phoenix, AZ manufacturing facility since 2002.
Read more >
Custom Controls Technology | OEM Industrial ...
Custom Controls Technology, Inc. specializes in providing engineering, design, procurement, and fabrication services for all Industrial Automation needs.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found