Adding two options attributes to a field

[el-Knix]

Hey there, thanks for taking the time to build this useful library.My question is, is it possible to have two options attributes in a field. I've gone through the docs and i have yet to find anything that can help me achieve this.I would be very grateful if anybody can help me with this.

Environment Details:

• formBuilder Version:
• Browser:
• OS:

Expected Behavior

Actual Behavior

Steps to Reproduce

Screenshot - (optional)

Something Like this..

[marcus-at-localhost]

What do you want to achieve? What do you want it to look like when you render the form? As presented here, it doesn't make sense I would say.

[el-Knix]

What do you want to achieve? What do you want it to look like when you render the form? As presented here, it doesn't make sense I would say.

For this particular project, we are most interested in form builder's ability to create form json, the idea is to have form builder on a dashboard and use it to create forms that will render on an app.Due to the limitations in the json structure im working with, i am forced to implement the functionality i stated above.

What i need is to be able to add the options attribute to any field.From the docs, i've seen that its possible to add the options attribute, but the values have to be hardcoded. I was hoping that there was some workaround for this

[marcus-at-localhost]

I see, and indeed the resulting json is missing a lot of stuff. I am in the same situation and worked around it with a lot of quirky hacks.

Lookup the docs for typeUserAttrs to add additional attribute fields (not sure if checkbox/radio fields are possible, probably not). Then get familiar with typeUserEvents and the onadd option where you get access to the dom node of the field block. There you can add more fields that are not available via Formbuilder, or add custom behaviour.

This gives a nice direction, what's possible: #680 (comment)

And last but not least, onSave you have to traverse the whole formbuilder tree, pick out the elements that are not present in the initial Formbuilder JSON export and merge both objects to your needs.

Finally, you have to find a way to reverse that. Go through your custom JSON, create the Formbuilder minimal JSON object to initialize the form and add custom fields and behaviour via typeUserEvents.radio-group.onadd etc.

It's not really straight forward. Maybe there is a better way to do it.

[el-Knix]

Thanks for the response, was really hoping that i'd avoid having to write hacky code, but looks like there's not much of a choice.Let me try out your suggestion.

[marcus-at-localhost]

If you got more/different insight please share, that would be great. There is a lot of knowledge hidden in all these issues here :)

There is also https://draggable.github.io/formeo/ from the same guy who made this Formbuilder. But it lacks documentation and I doubt it allows what you want, out of the box.

[junathakuri]

I have similar requirement in my project. The admin requires to create English and French form in one form-builder. I have created 2 attributes each for labels, helptext, placeholder etc. I need to create one more options attribute. Please share if you have found any workaround.

[marcus-at-localhost]

@junathakuri I think you should create a separate field for each language and then pick the right language when you render the form (see name key). Else, I believe it becomes really messy.

[
	{
		"type": "radio-group",
		"label": "Radio Gruppe (de)",
		"name": "radio-group-de",
		"values": [
			{
				"label": "Option 1",
				"value": "option-1"
			},
			{
				"label": "Option 2",
				"value": "option-2"
			},
			{
				"label": "Option 3",
				"value": "option-3"
			}
		]
	},
	{
		"type": "radio-group",
		"label": "Radio Group (en)",
		"name": "radio-group-en",
		"values": [
			{
				"label": "Option 1",
				"value": "option-1"
			},
			{
				"label": "Option 2",
				"value": "option-2"
			},
			{
				"label": "Option 3",
				"value": "option-3"
			}
		]
	}
]

[junathakuri]

Thank you for replying. I agree that it's a bit messy (can't help with the requirement though :( ). The issue is not every attribute is going to be different only the editable text attributes in En and Fr. I managed to create for most of the fields, and got stuck with the options. Mainly because there is no simple way to define type for options control like 'text' or 'select'. Nevermind I will find some other way. Thank you very much.

[kevinchappell]

@junathakuri to your point about defining types for options, youre right. this is not currently possible. Like everything its totally possible but would surely be a breaking change. Maybe we can save this for v3.0

[github-actions]

🎉 This issue has been resolved in version 3.20.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀