Custom Form Builder With Field Interactions – Dynamic Forms

Preview:

Description:

A powerful and customizable form builder that dynamically generates form fields from JSON data.

The best part of the library is that it supports dynamic field interactions such as asynchronously fetching data, reading/updating data and state, showing and hiding elements, etc.

How to use it:

1. Install & download the package.

# Yarn
$ yarn add @simomosi/dynamic-forms
# NPM
$ npm i @simomosi/dynamic-forms

2. Import the Dynamic Forms.

// Browser
<script src="./dist/dynamicforms.min.js"></script>
// ES Module
import * from "./dynamicforms.min.js";

3. Create empty form fields on the page.

<form id="exampler">
  <label for="user"></label>
  <select id="user" name="user">
    <option value="" selected></option>
  </select>
  <br />
  <label for="post">Posts</label>
  <select id="post" name="post">
    <option value="" selected></option>
  </select>
</form>

4. Config the form and specify the data source.

let formConfig = {
  'id': 'example', 
  'debug': true, 
  'fields': [ 
    {
      'name': 'user',
      'fetch': {
        'makeUrl': (data) => `https://jsonplaceholder.typicode.com/users`,
      },
      'behavior': {
        'postProcessData': (htmlElement, data) => {
          return data
          .map(x => { return { 'value': x.id, 'text': x.username }; })
          .sort((a, b) => { return a.text > b.text });
        }
      }
    },
    {
      'name': 'post',
      'fetch': {
        'makeUrl': (data) => `https://jsonplaceholder.typicode.com/posts?userId=${data.user}`,
      },
      'behavior': {
        'postProcessData': (htmlElement, data) => {
          return data
          .map(x => { return { 'value': x.id, 'text': x.title }; });
        }
      }
    }
  ],
  'rules': [ // list of Update Rules
    {
      'name': 'user',
      'update': ['post'],
    }
  ],
  'init': [ // list of Init Rules
    {
      'name': 'user',
    }
  ]
};

5. Generate the HTML.

let form = dynamicForms.makeForm(formConfig);

6. All default form configurations.

let formConfiguration = {
    'id': 'formId',
    'debug': true,
    'behavior': {
      // Executed before the update related events. Return false to block all updates
      'beforeUpdate': (subjectName) => { }, 
      // Executed after the update related events
      'afterUpdate': (subjectName) => { }, 
    },
    'fields': [],
    'rules': [],
    'init': []
};

7. All default filed configurations.

let fieldConfiguration = {
    'name': 'fieldName',
    'io': {  // Customize field input/output
        'event': 'change',
        'get': (htmlElement) => { },
        'set': (htmlElement, value) => { },
    },
    'fetch': { // Remote call options
        'method': 'GET',
        'makeUrl': (data) => { },
        'makeBody': (data) => { }, // JSON.stringify, formData, text...
        'fullFetchConfig': {}, // Fetch complete configuration
    },
    'behavior': {
        'clear': (htmlElement) => { }, // Clear field from its content
        'beforeUpdate': (htmlElement, data, subjectName) => { return true; }, // Executed before the remote call. Return false to block the update
        'updateStatus': (htmlElement, data, subjectName) => { },
        'afterUpdate': (htmlElement, data, subjectName) => { } // Executed after the remote call
    },
    'dropdown': { // Only for dropdown elements
        'postProcessData': (htmlElement, data) => { }, // Process data retrieved by remote call
        'saveData': (htmlElement, data) => { }, // Save data in html (es: <option value="value">'text'</option>)
        'clearOnParentVoid': true, // True (default) to clear field content when subject is empty; false to trigger a remote call
    },
    'checkbox': { // Only for checkbox elements
        'booleanValue': true // True (default) to get element's value as boolean, based on the checked property; false to get the value property
    }
};

8. All default rule configurations.

let updateRuleConfiguration = {
    'name': 'fieldName',
    'update': [],
    'additionalData': [], // Array of field names
    'externalData': (data, subjectName) => { } // Function which returns a json of data
};