Formwiz-publicweb-controls NPM

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.