Optimajet--Form Builder
Lightweight, React-based, Drag&Drop, Customizable, JavaScript
A Form Builder is a Lightweight, React-based web tool, can be integrated into any web app. That enables users to create and design forms quickly and easily without the need for programming or coding skills.
Form Builder allows users to drag and drop various form elements, such as text boxes, dropdown lists, checkboxes, radio buttons, and date pickers, onto a canvas to create the form.
In this section let's discuss how to create our own React component and connect it to FormBuilder and an app. Component code example is uploaded to GitHub. Let's examine this example step by step.
First let's write any React component we need. In our example we are working with Counter component which displays form data values and contains two buttons - to increase value by 1 and to decrease value by 1.
As we have discussed before, form for editing component properties is drawn for each component in Form Builder. We need to create a component which will draw General tab in this form and return a list of events for the Events tab. Its code is also very simple, you can check it out below or on GitHub.
Renderer function is necessary for our Form Builder component to render component in form. Here it is on GitHub. This function solves to important problems:
it is presumed that there is only one custom component renderer function in the application, and you just change it when adding new custom components.
Now you need to create a list of your Custom components, so that Form Builder could draw it in the components panel. Here it is on GitHub. There can be only one such list and all further custom components should be added to it.
We must transmit renderer function and custom components list into React component.
Quite often we need to dynamically change components state in the form, depending on data. Let us draw a few examples.
You can perform adaptive layout in your application. When the same form looks different on various devices with wide screen (computer screen width is >= 998px) and mobile devices (smartphone screen width is < 998px). This functionality is supported by two tools:
FormBuilder supports templates. For connecting templates you need to set templates property and getFormFunc call-back function.
© Copyright 2000-2023 COGITO SOFTWARE CO.,LTD. All rights reserved