Optimajet Form Builder

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.

Features

Custom React components

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.

Step 1. Creating React component

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.

Step 2. Creating form for editing component properties

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.

Step 3. Creating component renderer function

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 adapts a lot of Form Builder parameters to props of our manually written component.
• Renders a component.

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.

Step 4. Creating a Custom React components list for Form builder

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.

Step 5. Connecting component directly to each component

We must transmit renderer function and custom components list into  React component.

Step 6. Connecting component to an application globally (optional)

Substitution expressions and data binding

Quite often we need to dynamically change components state in the form, depending on data. Let us draw a few examples.

• A form header dynamically changes when changing document margins.
• Related controls (for example, Dictionary). If you, say, pick a value in the first Dictionary, selection list automatically gets limited in the second Dictionary.
• You must add button (or link) into each Collection editor or Repeater component item, by clicking which you will be transferred to entity editing form.

Adaptive layout

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:

• Writing additional styles applied in mobile layout only.
• Specifying for component in which mode (mobile or desktop) it will be rendered.

Templates

FormBuilder supports templates. For connecting templates you need to set templates property and getFormFunc call-back function.