ivoyant-form-builder

iVoyant Form Builder

Quickly build Ant Design forms with a JSON schema.

Installation

yarn add ivoyant-form-builder

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'ivoyant-form-builder';
import config from './config.json';

ReactDOM.render(<Form config={config} />, document.getElementById('root'));

In ./config.json

{
  "schema": {
    "customerInfo": {
      "name": "@first @last",
      "address": "@address"
    },
    "isEligible": "@@age >= 65"
  },
  "meta": [
    {
      "columns": 2,
      "fields": [
        {
          "key": "first",
          "label": "First Name",
          "widgetProps": {
            "maxLength": 15
          }
        },
        {
          "key": "last",
          "label": "Last Name"
        },
        {
          "key": "address",
          "label": "Home Address"
        },
        {
          "key": "age",
          "label": "Select age",
          "widget": "select",
          "options": [64, 65, 66]
        },
        "@submitButton"
      ]
    }
  ]
}

The antd-form-builder API drives the creation of antd components managed under a single Form component.

In the above example, meta is an array of ant-form-builder meta objects that operate under the same API as ant-form-builder with some enhancements.

<br/>

ivoyant-form-builder specific API

In order to solve some of the difficulties of creating dynamic forms with JSON, properties can be accessed with @ and functions can be parsed inline with the @@ syntax.

Property	Type	Default Value	Description
schema	object	-	Collects the values of your fields. How to use
encryptionKey	string	-	When an encryption key is provided, it is encrypted with crypto-js a default configuration using AES encryption.
encryptionMethod	object	-	An object with keys parse and options. parse is a string function that will encrypt the collected form values. The function has access to payload and the spread keys of options. options is an object that contains variables that can be accessed by the parsed function.
overrideEncryption	boolean	-	if true, encryption will be bypassed even if encryption methods are passed into Form component
forceUpdate	boolean	false	This will rerender the form on all state changes. Enable if you aren't getting expected dynamic behavior.
formProps	object	-	Contains props that will get passed to antd <Form> component

Collecting form values

In the example, schema is an object that conforms to the shape you want your fields in after form validation/collection. To reference a field value, get its key with the @ syntax. To run some processing on the field value, create a function and use the field as a variable.

Example collected meta keys for a form:

{
  "firstName": "Jane",
  "lastName": "Doe",
  "address": "Peachtree St",
  "city": "Atlanta",
  "state": "GA"
}

Example schema

{
  "customerName": "@firstName @lastName",
  "address": "@address, @city, @state",
  "livesInCA": "@@state === 'CA'"
}

parses to:

{
  "customerName": "Jane Doe",
  "address": "Peachtree St, Atlanta, GA",
  "livesInCA": false
}

Thorough example

{
  "schema": {
    "customerData": {
      "name": "@@useTitle ? `${title}. ${first} ${last}` : `${first} ${last}`",
      "address": "@address",
      "email": "@email"
    },
    "preferences": {
      "subscribe": "@@wantsSubscription",
      "sendOffers": "@@wantsOffers"
    }
  },
  "encryptionKey": "abc",
  "meta": {
    "columns": 1,
    "fields": [
      {
        "key": "first",
        "label": "First Name"
      },
      {
        "key": "last",
        "label": "Last Name"
      },
      {
        "key": "useTitle",
        "widget": "checkbox",
        "children": "Prefer title?"
      },
      {
        "key": "title",
        "widget": "select",
        "label": "Select title",
        "options": ["Mr.", "Ms.", "Mrs.", "Dr."]
      },
      {
        "key": "address",
        "label": "Address"
      },
      {
        "key": "email",
        "label": "Email"
      },
      {
        "key": "wantsSubscription",
        "widget": "checkbox",
        "children": "Check if you want to subscribe to emails"
      },
      {
        "key": "wantsOffers",
        "widget": "checkbox",
        "children": "Check if you want third party offers"
      }
    ]
  }
}

const customMethod = ({payload}) => {
  /**
   * EXAMPLE
   * payload = {
   *    customerData: {
   *       name: "Mr. Mike W",
   *       address: "123 Anywhere",
   *       email: "email@email.com"
   *    },
   *    preferences: {
   *       subscribe: false,
   *       wantsOffers: true
   *    }
   * }
   **/
  // do something with the payload

  return // encrypted value
}


React.render(<Form config={config} encryptionMethod={customMethod}>)