Optimajet Form Builder

Optimajet Form Builder

轻量级、基于 React、拖放、可定制、JavaScript

 

Form Builder是一个轻量级的、基于 React 的 Web 工具，可以集成到任何 Web 应用程序中。 这使用户能够快速轻松地创建和设计表单，而无需编程或编码技能。

 

Form Builder允许用户将各种表单元素（例如文本框、下拉列表、复选框、单选按钮和日期选择器）拖放到画布上以创建表单。

 

功能

自定义 React 组件

在本节中，我们将讨论如何创建自己的 React 组件并将其连接到 FormBuilder 和应用程序。 组件代码示例已上传到 GitHub。 让我们逐步研究这个示例。

步骤1.创建React组件

首先让我们编写我们需要的任何 React 组件。 在我们的示例中，我们使用计数器组件，该组件显示表单数据值并包含两个按钮 - 将值增加 1 和将值减少 1。

步骤 2. 创建用于编辑组件属性的表单

正如我们之前讨论的，用于编辑组件属性的表单是为表单生成器中的每个组件绘制的。 我们需要创建一个组件，它将在此表单中绘制“常规”选项卡，并返回“事件”选项卡的事件列表。 它的代码也非常简单，你可以在下面或在 GitHub 上查看。

步骤3.创建组件渲染器函数

Renderer 函数对于我们的 Form Builder 组件在表单中渲染组件是必需的。 它位于 GitHub 上。 该函数解决了重要问题：

• 它使许多Form Builder参数适应我们手动编写的组件的属性。
• 渲染一个组件。

假设应用程序中只有一个自定义组件渲染器函数，您只需在添加新的自定义组件时更改它即可。

步骤 4. 为表单构建器创建自定义 React 组件列表

现在您需要创建自定义组件的列表，以便表单生成器可以在组件面板中绘制它。 它位于 GitHub 上。 只能有一个这样的列表，所有其他自定义组件都应添加到其中。

步骤5.将组件直接连接到每个组件

我们必须将渲染器函数和自定义组件列表传输到 React 组件中。

步骤 6. 将组件全局连接到应用程序（可选）

 

替换表达式和数据绑定

我们经常需要根据数据动态改变表单中的组件状态。让我们举几个例子。

• 当改变文档页边距时，表单页眉会动态改变。
• 相关控件（例如字典）。如果您在第一个字典中选择了一个值，那么第二个字典中的选择列表将自动受到限制。
• 您必须在每个集合编辑器或中继器组件项中添加按钮（或链接），点击后您将转到实体编辑表单。

 

自适应布局

您可以在应用程序中执行自适应布局。当同一个表单在宽屏（电脑屏幕宽度>=998px）和移动设备（智能手机屏幕宽度<998px）的不同设备上看起来不一样时。该功能由两个工具支持：

• 仅在移动布局中编写附加样式。
• 为组件指定渲染模式（移动或桌面）。

 

模板

FromBuilder支持模板。为了连接模板，您需要设置templates属性和getFormFunc回调函数。