optimajet/formengine

Drag & Drop Form Builder Library for React.

React Form Builder example application

React Form Builder is a Drag & Drop Form Builder library for React.

Develop front-end drag and drop forms with ease, resulting in cost savings and reduced development timing

How to start

npm install
npm run start

Features

1. Web interface with Drag & Drop functionality.
2. Adaptive layout.
3. Form validation.
4. Built-in web components based on React Suite library.
5. Easy integration of custom components.
6. Export form to JSON and import form from JSON.
7. Powerful internationalization.
8. Custom actions.
9. Computable properties.
10. Templates (forms within a form).

Screenshots

Information

• Website - formengine.io.
• Demo - demo.formengine.io.
• Documentation - formengine.io/documentation.

For commercial use, please contact [email protected].

formengine's Issues

Formbuilder clashes in i18n library/ dropdowns seem to render elsewhere

formbuilder-i18n.mp4

Attaching the above noticed issues when integrating the formbuilder into the app.

1. Looks like it clashes with i18n libraries that are already existing within the app. I was able to fix it for the app itself, but creating an instance of i18n, but this doesn't seem to help Formbuilder itself. Maybe something to look at or there is another way around it?

2. The dropdowns seem to spaz out, as you can see in the video, it appears elsewhere on screen. They are still selectable using arrow keys but the user has no idea what is being selected.

Let me know if there is more info required, would be happy to provide it!

form builder localization

Hi guys
I use the library you wrote
First of all, thank you
Next, I want to know if it is possible to localize the static content of the form builder?
For example, the parts shown in the image below:

Actually, I want to add a new language

Setting "valued" to an object type in a custom component

There is some documentation here about using "valued" to let the component know that the custom component contains a value:
https://formengine.io/documentation/custom-components#custom-component-containing-data

I was wondering how this would work for objects. I know its possible, since the dropdown component from rComponentSuite contains the value in this format, I am just not sure how to translate that into a custom component that would have a similar structure.

For more info:

• Just using "value: string.valued.default('')" within the props of define() causes it to throw an error "cannot convert [Object object] from object to string
• i can override the onChange and propagate the value of event.target.value into the custom component code itself, but the json on the formBuilder still shows an empty string.

Form Builder (One to one)

Hi Guys

I want to print the output data as like this

{
book_name : "xyz",
...
author : {
name : "abc",
...
}
},

Then how can i implement these in formengine

Forms Tab is Not available?

When comparing the online demo of the FormEngine library (link to demo) with my local implementation using this repository,

I noticed a slight difference in the builder interface.
Specifically, the online demo features a "Forms" tab in the builder, whereas the local implementation does not include this tab.
Can I know why the feature is not included in this?

Form Engine Demo

Form Engine Local:

onFormDataChange looping if there is setState inside

i don't understand why onFormDataChange is keep looping, but if i remove the setState it is not

Crash when RsContainer doesn't exist "props" in the objet

The designer and viewer stop working when in the schema some "container" component does not have the "props", it seems, this prop must exist even if it is empty.

It would be nice if it worked without "props"

It works:

It doesn't work:

Issue Report: Updating Component Keys in Formengine React Library

Issue:
I'm encountering an issue with the Formengine library in React, specifically related to key changes not reflecting in the calculable value. When I change the key of any component in the form output, it works as expected. However, in the calculable value, which contains 'Test form data', it does not change, and a warning is displayed stating "Has not returned value", despite the functionality working correctly.

Another Suggestion:
I suggest that when a component is dragged and dropped, the key should be set as "textbox" without any additional characters like spaces or numbers. This is because the space between "textbox" and "1" is not a valid key in JavaScript. Therefore, my idea is to ensure that when a component is dragged and dropped, it should be named consistently as "textbox". If another textbox is added to the canvas, then the subsequent components can be named as "textbox1" or "textbox 1".

I appreciate your attention to this matter and look forward to a resolution that enhances the usability and reliability of the Formengine library.

Thank you for your time and assistance.

Download JSON

Hello, I'm using the from Library @react-form-builder/designer in CRA. is there any way to create or get JSON of That created FORM without Manually Download or Copy From Edit JSON in Front-end because i wanna show the view of That JSON.

Triggered custom download callback function

Hi, can i customize form builder download callback action?example when i downloading json i want to store to my database with hit API

cannot add code actions from setting section

Hi, im trying to follow the example to load data from external resource, but when i do it there is this error: Uncaught TypeError: Cannot convert undefined or null to object

because i see the loadData function is created here

is there something i missing? or did i do it wrong?

the builder component:

On production build Viewer faces an error that Anonymous components are not allowed!

Hi, Recently i started using formengine, but whenever I try to make a production build Formengine viewer gives me error () and nothing gets displayed on screen.
details are attached below

Definer.ts:75 Uncaught Error: Anonymous components are not allowed!
at define (Definer.ts:75:22)
at RsBreadcrumb.tsx:39:29
at index.tsx:34:20
at index.tsx:34:20

My code is in screenshot

It perfectly run in dev but in production it gives error

Customize builder UI

Hi, is there a way to hide or customize the toolbar components?
for example, hiding the preview button marked in the picture

general loadCallback function on loadData options

i wonder is loadCallback can set to a specific form data/options for dropdown for example, like you used in this example

is there a way to do that like below

loadCallback(data, 'region')

this will set options of region input

Triggering getForm and hiding toolbar items

I was wondering if there is functionality for triggering getForm in the FormBuilder component. For example, I want to update the component with form data based on external (to the component) searches. I want to ideally use my ui and api for this. But, once I have the data, I want to feed it to the component and have it render properly. The data is something that I get from the builderRef so it should ideally just plug and play, but I do not see a way to trigger this right now.

Also, I was wondering if there is a way to hide the toolbar items, incase we don't need it. For example, disabling the "edit JSON" or "theme" buttons. (This can be done using css hacking, which is what I will go with in case the functionality isn't available yet haha)