Dynamic form builder
This is an dynamic form builder empowered FormWiz project.
How to use
- Install peer dependencies:
npm install --save react react-dom react-redux redux moment
- This package relies on
redux-form
so you need to install it (if you haven't):
npm install --save redux-form
- Install it:
npm install --save formwiz-publicweb-controls
-
Load form options:
-
Since the form builder relies on
redux
, you can only load its rendered form's options to state and then the form will load them automatically. -
First you need to register its store in
redux
's state tree:/** * rootReducer.js */ import { formBuilder } from 'formwiz-publicweb-controls'; const rootReducer = combineReducers({ ... // Register formwiz-publicweb-controls's store formBuilder ... });
-
Then dispatch
formOptionsUpdate
action from inside your action for loading form's options:/** * actions.js */ import { formOptionsUpdate } from 'formwiz-publicweb-controls'; // Using redux-thunk (learn more at https://github.com/gaearon/redux-thunk) export const loadFormOptions = (payload: { uuid, data, currentSection }) => { return ( dispatch, getState ) => { const { uuid, data, currentSection } = payload; fetch('http://www.my-api.com/my-form-options') .then( (formOptions) => { // Set uuid back to new form options formOptions.uuid = uuid; // optional // Update form options dispatch(formOptionsUpdate(uuid, formOptions)); } ) }; };
-
-
Load default form data:
/** * actions.js */ import { formOptionsUpdate, fillData } from 'formwiz-publicweb-controls'; // Using redux-thunk (learn more at https://github.com/gaearon/redux-thunk) export const loadFormOptions = (payload: { uuid, data, currentSection }) => { return ( dispatch, getState ) => { const { uuid, data, currentSection } = payload; fetch('http://www.my-api.com/my-form-options') .then( (formOptions) => { // Set uuid back to new form options formOptions.uuid = uuid; // optional // Assume you already have form data stored in `reduxStore.formDataState` const { formDataState, currentSectionState } = getState().application; // Get current form data state const formData = formDataState[formOptions.uuid]; if (formData) { // fill data in current form formOptions = fillData( dispatch, formOptions, formData, currentSection, formMeta.isSubmitted ); } else { // Activate first section formOptions.sections = formOptions.sections.map( (section, index) => ({ ...section, isActive: currentSection && currentSectionState ? currentSection.uuid === currentSectionState.uuid : index === 0 }) ); } // Update form options dispatch(formOptionsUpdate(uuid, formOptions)); } ) }; };
-
Submit form data:
/** * actions.js */ import { formSubmit } from 'formwiz-publicweb-controls'; export const submit = ({ formUUID, formModel }) => formSubmit( formUUID, // onSubmitAction // Call API to submit form model () => fetch('http://www.my-api.com/my-form-data', { method: 'POST', // or 'PUT' body: JSON.stringify(formModel), headers: new Headers({ 'Content-Type': 'application/json' }) }) // onStartAction?: Function undefined, // onErrorAction?: Function, undefined, // onSuccessAction?: Function, undefined, // onEndAction?: Function, undefined, // onCatchAction?: Function );
-
Import and then render it:
/** * MyFormComponent.js */ import React from 'react'; import { ReduxDynamicFormBuilder } from 'formwiz-publicweb-controls'; class MyFormComponent extends React.Component { ... render() { const DynamicFormBuilder = ReduxDynamicFormBuilder({ // Form's UUID form: 'MyDynamicForm', // Other `redux-form` configurations ... }); return (<DynamicFormBuilder />); } }
-
Advance configurations:
-
Validation:
/** * MyFormComponent.js */ import React from 'react'; import { ReduxDynamicFormBuilder } from 'formwiz-publicweb-controls'; class MyFormComponent extends React.Component { ... render() { const DynamicFormBuilder = ReduxDynamicFormBuilder({ // Form's UUID form: 'MyDynamicForm', // Other `redux-form` configurations ... }); return (<DynamicFormBuilder onValidate={(fieldName, errors, form) => { // Validating field's name console.log(fieldName); // Validation's errors console.log(errors); // Rendered form's ref object console.log(form); }}/>); } }
-
Localization
-
Date time:
- This package use
moment
as a date parser. - You can change its locale via adding
moment.locale('<LOCALE>');
anywhere in your app, as long as it's executed before rendering the form. - Best practice is to add it in
app.js
- where you bootstrapped your root React component.
/** * app.js */ import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import 'moment/locale/hr'; moment.locale('en'); const App = props => ( ... ); ... render( <App />, document.querySelector('#root') );
- This package use
-
-
Other examples: COMING SOON.
-
-
API docs:
-
FormOptions
interface. -
FormSection
interface. -
FormField
interface. - Will be updated soon...
-
Contribution Guide
Note: This package is currently receives contribution only from FormWiz team members. We're sorry about that.
- Clone FormWiz project repo.
- Run
npm install
andnpm run bootstrap
at repo's root folder. This will run lerna's bootstrap commands. - Navigate to
cloned-repo/src/FormWiz.DynamicFormBuilder
in terminal. - Run
npm start
. This will buildformwiz-publicweb-controls
package, copy it to packages which depends on it in this project and then watch forformwiz-publicweb-controls
's changes.