formwiz-publicweb-controls

1.3.37 • Public • Published

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:

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.

Package Sidebar

Install

npm i formwiz-publicweb-controls

Weekly Downloads

0

Version

1.3.37

License

ISC

Unpacked Size

589 kB

Total Files

197

Last publish

Collaborators

  • davorpr1
  • stevetran
  • mjovic
  • ebrutus
  • rdapic