Form Engine - getting started

[BimalG]

Hello all,

I am new to this form builder library and need help to the following use case of creating clinical forms and saving the entered data.
Please guide or point to the right resources for the below items. Also any code snippets would be useful

a)Integrating the builder editor with a react app
b)How to access this data and then save it from a react UI component
c)Load a saved user form into the editor along with the data
d)How to implement validation on the user form

[ashalugin]

Hi @BimalG,

a)Integrating the builder editor with a react app

https://formengine.io/documentation/#creating-a-form-using-designer

npm install @react-form-builder/designer @react-form-builder/components-rsuite

import {builderViewWithCss} from '@react-form-builder/components-rsuite'
import {FormBuilder} from '@react-form-builder/designer'

/**
 * @returns the Designer element.
 */
export const Designer = () => {
  return <FormBuilder view={builderViewWithCss}/>
}

b)How to access this data and then save it from a react UI component

There are several ways to access the data (https://formengine.io/documentation/getting-form-data).

• Using the onFormDataChange:

const App = () => {
  return (
    <FormViewer
      view={view}
      getForm={getFormFn}
      formName={formName}
      initialData={initialData}
      onFormDataChange={({data, state}) => {
        const sourceData = JSON.stringify(initialData)
        const currentData = JSON.stringify(data)
        state.dataChanged = sourceData !== currentData
      }}
    />
  )
}

• Using the viewerRef:

export const Viewer = () => {
  const ref = useRef<IFormViewer>()

  const setRef = (viewer: IFormViewer | null) => {
    if (viewer) {
      ref.current = viewer
      const formJSON = JSON.stringify(ref.current.formData)
      console.log('formJSON ', ref.current)
    }
  }

  return (
    <FormViewer
      onFormDataChange={({data, errors}) => {
        const formJSON = JSON.stringify(data)
        console.log('onFormDataChange', formJSON)
      }}
      viewerRef={setRef}
      {...otherProps}
    />
  )
}

• Using custom actions (https://formengine.io/documentation/#add-the-form-to-the-page):

export const App = () => {
  return <FormViewer
    view={viewWithCss}
    getForm={() => simpleForm}
    actions={{
      onSubmit: (e) => {
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }}
  />
}

c)Load a saved user form into the editor along with the data

Use the initialData property to send data to the form.

const App = () => {
  return (
    <FormViewer
      view={view}
      getForm={getFormFn}
      formName={formName}
      initialData={initialData}
    />
  )
}

d)How to implement validation on the user form

Here is an article describing the validation. https://formengine.io/documentation/validation.