formik-json

formik-json is a wrapper for Formik to easily create forms using JSON / Javascript Object for defining the elements.

Examples

Demo

Pre-requisites

The component depends on a few third-party plugins for adding WYSIWYG, select, auto-complete, validation etc. Few of them already come packaged with the extension and few need to be installed separately in your project.

Installation

You can install Formik-json using following steps.

$ npm i @flipbyte/formik-json

Quick Start Guide

Once you've finished installation, you can add the form to any of your components as follows:

Import the Form component

import { Form } from '@flipbyte/formik-json';

Prepare your form object

{
    "id": "my-new-form",
    "label": "My New Form",
    "type": "container",
    "renderer": "form",
    "elements": {
        "save": {
            "type": "field",
            "renderer": "button",
            "name": "save",
            "label": "Save",
            "htmlClass": "btn-success",
            "buttonType": "submit"
        },
        "main": {
            "type": "container",
            "renderer": "div",
            "htmlClass": "row",
            "elements": {
                "title": {
                    "name": "attributes.0.title",
                    "label": "Title",
                    "type": "field",
                    "renderer": "text",
                    "fieldType": "text"
                },
                ....
            }
        },
        ....
    }
}

Add the component anywhere you want

<Form
    schema={ /* Your form object here */ }
    { .../* Other formik props */ } />

Form Component

Form component requires the following properties:

Key	Description
schema	your schema object
onUpdate	callback when the values are updated
initialValues	check
Formik properties	You can add any of the component props

Schema object

Schema object contains elements which can be one of 2 types: either "container" or "field" Each type needs a renderer to render the specific component. The "container" has an "elements" key within which you can define either new containers or fields.

schema object that has the following keys (all required):

Key	Description
id	the ID for the form
label	the title for the form
type	"container"
renderer	"form" (you can use other renderers but if you want the form to have a `<form />` tag use the "form" renderer.)
elements	is an object used to define the elements within the container

Note: The schema object can only have one container. You can have multiple containers and fields inside the elements object of the main schema object.

"elements" is an object with key-value pair where value is another object. The value object can either be a of type "container" or "field".

Each container or field requires a renderer which can be set using "renderer": "{your_renderer}". You can define you own renderers for both containers and keys or use the ones that come with the module.

Following are the properties for each type of container

Common container properties

Not applicable	Field	Property	Description
none	type	String	"container"
button-group	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
editable-grid, tabs	elements	{}	is an object that can hold one or more fields or containers within it.
editable-grid, button-group	prefixNameToElement	Bool
	showWhen	String	Check when-condition
	comment	String	comment / description for the container
	commentClass	String	html class for the comment element

Container specific properties

Container	Field	Property	Description
editable-grid	renderer	String	editable-grid
	fields	{}	An object with one or more field definitions in a key-value pair
	buttons	`{"add": "Add", "remove": "X", "duplicate": "Duplicate"}`	has 3 properties, all optional. These can be either function that returns the button or string which is the label for a button
	isObject	Bool	whether the grid displays an object. If set to true, buttons (add, remove and duplicate) will be disabled.
	isSortable	Bool	whether the grid rows can be dragged and sorted
	tableContainerClass	String	htmlClass for the div wrapping the editable-grid
	tableClass	String	htmlClass for the main editable grid
div	renderer	String	div
	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
	htmlClass	String	htmlClass for the div element
html-tag	renderer	String	html-tag
	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
	as	String	html tag to be used (Default: 'div')
	htmlClass	String	htmlClass for the html-tag element
fieldset	renderer	String	fieldset
	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
	title	String	label for the fieldset
	cardClass	String	htmlClass for the main wrapping container
	cardHeaderClass	String	htmlClass for the header of the wrapping container
	cardHeaderActionsClass	String	htmlClass for the container holding the disclose buttons in the header of the container
	cardBodyClass	String	htmlClass for the body of the container
form	renderer	String	form
	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
	htmlClass	String	any character
tabs	renderer	String	tabs
	name	String	is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true.
	tabs	{}	Object
	cardClass	String	same as fieldset
	rowClass	String	htmlClass for the row div
	tabListClass	String	htmlClass for tab list
	tabListItemClass	String	htmlClass for tab list item
	tabContentClass	String	htmlClass for tab content container
	tabColumnClass	String	htmlClass for tabs container
	contentColumnClass	String	htmlClass for wrapping the tab content container
	tabActiveClass	String	htmlClass for active tabs
	tabPaneClass	String	htmlClass for single tab pane
button-group	renderer	String	button-group
	elements	{}	the elements can only be of type: "field" with renderer: "button".

Following are the properties for each type of field

Common field properties

Type	Property	Description
name	String	html field name attribute
label	String	the label for the field
type	String	"field"
labelClass	String	html class for the label html element
formGroupClass	String	html class for the div that wraps the form field
validation	String	Check yup-schema
showWhen	String	Check when-condition
enabledWhen	String	Check when-condition
fieldClass	String	html class for the main html/3-rd party form field
comment	String	comment / description that goes below the field
commentAs	String	define the HTML tag to be used for wrapping the comment. (Default: )
commentClass	String	html class for the comment element
template	React Component	String	define your custom template for the field (check `src/Template/Default.js`) or set the template in the template registry using `registerTemplate` and pass the string key here
errorAs	String	define the HTML tag to be used for wrapping the error. (Default: )
errorClass	String	html class for the error element

Field specific properties

Field	Type	Property	Description
checkbox	renderer	String	checkbox
	name	String	html field name attribute
	label	String	the label for the field
	type	String	"field"
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
	options	Array	Array of objects with keys "value" and "label"
code-editor	renderer	String	code-editor
	name	String	html field name attribute
	label	String	the label for the field
	options	{}
	defaultValue	String	default field value (untested)
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
radio	renderer	String	radio
	name	String	html field name attribute
	label	String	the label for the field
	options	{}
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
react-select	renderer	String	react-select
	name	String	html field name attribute
	label	String	the label for the field
	options	{}	array of objects with value and label keys. Example: `[{"label": "Item 1", "value": "value-1"}]`
	defaultValue	String	default field value (untested)
	isMulti	Bool	whether it's a mult-select
	isClearable	Bool	displays a clear select button on the select which will clear the selected options
	isDisabled	Bool	disables the select when set to true
	noOptionsMessage	Function	refer ReactSelect Props
switch	renderer	String	switch
text	renderer	String	text
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
	fieldType	String	HTML input type. The value that goes into
	defaultValue	String	default field value (untested)
	icon	String	fontawesome icon class
	inputGroupClass	String	html class for the div that wraps an icon and an input element together
textarea	renderer	String	textarea
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
	rows	Number	Number of rows that the text-area container should show by default
wysiwyg	renderer	String	wysiwyg
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
	options	{}	React-quill wysiwyg options
	rows	Number	Number of rows that the wysiwyg container should show by default
	textareaClass	String	the class for the textarea that will show the raw html for the content entered in the wysiwyg
autocomplete	renderer	String	autocomplete
	attributes	{}	is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing.
	defaultValue	String	default field value (untested)
	options	{}	Options available in react-autosuggest plugin
file-uploader	renderer	String	fileuploader
	options	{}	Options available in react-dropzone plugin
	formGroupClass	String	html class for the div that wraps the form field
inner-text	renderer	String	inner-text
	as	String	HTML tag to use for the inner-text field
	htmlClass	String	HTML class for the tag used
	defaultValue	String	Either used as a static value for the HTML element or as a placeholder when is not defined
button	renderer	String	button
	content	String	button inner html

Thank You

If you have suggestions, comments or ideas to develop more such solutions, you can write to us at Flipbyte.com. PRs are welcome.

License

The MIT License (MIT)

mjablons/formik-json-schema