Form Builder Library

Overview

The Form Builder Library is a modular, extensible solution designed to streamline the creation and management of dynamic forms for multi-tenant SaaS platforms. Its architecture enables rapid development, robust validation, and flexible configuration, empowering both developers and business users to define complex forms and business logic with minimal code changes.

Architectural Goals

• Configurability: Allow forms, fields, layouts, and business rules to be defined via JSON configuration.
• Reusability: Provide a library of field components and layouts that can be composed for various use cases.
• Extensibility: Support custom field types, validation logic, and business rules.
• Security: Integrate Role-Based Access Control (RBAC) to restrict access and editing based on user roles.
• Maintainability: Use industry-standard libraries and patterns for long-term support and scalability.

Core Components

This library comprises of the following core components.

1. Fields

Reusable React components for each field type, supporting both basic and business-specific needs:

• Basic Fields: (examples)
  • Input
  • Select/Options
  • Date
  • Time
• Business-Specific Fields (examples)
  • Gender
  • Address
  • Signature

2. Layouts

Support for multiple form layouts, including:

• Grid
• Wizard (multi-step)
• Table Of Contents: Shows a floating (& responsive) table of contents. Clicking a menu item scrolls to the relevant section.

3. Form Modes

Forms and Fields can be rendered in different modes:

• Edit - Every form is editable, unless specified otherwise.
• Readonly - In this mode, all the values are displayed as text.
• Disabled - In this mode, all the fields in the form are disabled.
• Print - In this mode, the form (with values) is rendered as a PDF within the app, with options to 1/ Download & Save or 2/ Print.

4. Dynamic Resources

Support for fetching external resources at runtime, when rendering the form. These resources are used along-with "Business Rules Engine", to display the Form in Edit / Readonly / Disabled mode. These resources can also be used to pre-fill form fields.

5. Form Events & Field Events

Support for configuring custom actions for different form events (onLoad, onSubmit) and fields events (onChange, onBlur).

6. Business Rules Engine

A custom-built engine interprets business logic and validation rules defined in the form configuration. This enables dynamic field visibility, conditional validation, and workflow automation without code changes.

• Comparison Operators
  • equals: Checks if two values are equal.
  • notEquals: Checks if two values are not equal.
  • lessThanEquals: Checks if one value is less than or equal to another.
  • lessThan: Checks if one value is less than another.
  • greaterThanEquals: Checks if one value is greater than or equal to another.
  • greaterThan: Checks if one value is greater than another.
  • contains: Checks if a value contains another value (e.g., substring or array element).
  • notContains: Checks if a value does not contain another value.
• Boolean Operators
  • and: Logical AND, returns true if all conditions are true.
  • or: Logical OR, returns true if any condition is true.
• Data Manipulation Operators
  • concat: Concatenates two or more values (e.g., strings).
  • string: Converts a value to a string.
  • date: Converts or manipulates date values.

7. Form Definition (JSON)

All aspects of a form — including fields, layout, mode, permissions, and business rules — are defined in a single JSON object. This definition is consumed by the generator to render the form.

8. Form Generator

The generator reads the form definition and renders the appropriate fields, layouts, and applies business rules at runtime. It also reads the user permissions configured for the form and renders the form in the correct mode (i.e readonly, disabled, print or edit modes).

Key Libraries

• Formik: Form state management and validation.
• Yup: Schema-based validation.
• Lodash: Utility functions for data manipulation.

JSON Examples

1. Field Definition

This example shows how to define a select field with options and a description. The field is required and will display a dropdown for users to select a social media channel.

{
  "type": "field",
  "isRequired": true,
  "component": "options",
  "componentVariant": "select",
  "fieldName": "socialMediaChannel",
  "label": "Social Media Channels",
  "description": "How did you hear about us?",
  "options": [
    { "key": "facebook", "label": "Facebook" },
    { "key": "linkedin", "label": "Linked In" },
    { "key": "instagram", "label": "Instagram" },
    { "key": "other", "label": "Other" }
  ]
}

2. Business Rules

This example demonstrates a business rule expression that checks if the selected social media channel is either Facebook or Instagram. Such rules can be used to control field visibility, validation, or workflow logic.

or(equals($.socialMediaChannel, string(facebook)), equals($.socialMediaChannel, string(instagram)))

3. Form Layout

This example configures the form to use a wizard layout with pill-style titles and a horizontal orientation, enabling a multi-step form experience.

"formLayout": {
  "layoutType": "wizard",
  "titleStyle": "pills",
  "orientation": "horizontal"
}

Summary

The Form Builder Library delivers a scalable, maintainable, and highly configurable solution for enterprise-grade form management. Its architecture separates configuration from implementation, enabling rapid adaptation to evolving business requirements while maintaining code quality and security.