ivoyant-form-builder v4.0.4

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.

\

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.

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}>)