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 inredux'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')
      );

  • 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 and npm 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 build formwiz-publicweb-controls package, copy it to packages which depends on it in this project and then watch for formwiz-publicweb-controls's changes.