Issue in Components with Licence key

[linesh98]

The form builder was integrated into our application, and we have now reinstalled the latest version (7.9).

We have a license: “Formengine Designer Enterprise Lifetime License (including access to the source code) with 1 year of updates.”

Currently, the following packages are installed in our application:

npm install @react-form-builder/core @react-form-builder/components-rsuite @react-form-builder/designer
npm install @react-form-builder/components-google-map
npm install @react-form-builder/components-signature
npm install @react-form-builder/components-rich-text
npm install @react-form-builder/components-fast-qr

However, we are still unable to see or use the QR Code, Rich Text Editor, Signature, and other related components in the form builder.

Could you please explain how to enable these components correctly and provide the correct steps we should follow to integrate them properly?

Below, I will provide a screenshot of the current form builder view in our application for your reference.

[ashalugin]

Hi @linesh98,

To include these components in the designer, you need to connect them to your view. For example:

import {fastQrComponent, fastQrComponentsDescriptions} from '@react-form-builder/components-fast-qr'
import {googleMapComponent, googleMapComponentsDescriptions} from '@react-form-builder/components-google-map'
import {richTextComponent, richTextEditorComponentsDescriptions} from '@react-form-builder/components-rich-text'
import {
  components,
  formEngineRsuiteCssLoader,
  ltrCssLoader,
  RsLocalizationWrapper,
  rSuiteComponentsDescriptions,
  rtlCssLoader
} from '@react-form-builder/components-rsuite'
import {rSuiteTableComponentsDescriptions} from '@react-form-builder/components-rsuite-table'
import {signatureComponent, signatureComponentsDescriptions} from '@react-form-builder/components-signature'
import {BiDi, BuilderView} from '@react-form-builder/core'

const allComponents = [
  ...components,
  fastQrComponent.build(),
  googleMapComponent.build(),
  signatureComponent.build(),
  richTextComponent.build(),
]

export const view = new BuilderView(allComponents)
  .withViewerWrapper(RsLocalizationWrapper)
  .withCssLoader(BiDi.LTR, ltrCssLoader)
  .withCssLoader(BiDi.RTL, rtlCssLoader)
  .withCssLoader('common', formEngineRsuiteCssLoader)
  // connect i18n
  .withComponentLibraryDescription(fastQrComponentsDescriptions)
  .withComponentLibraryDescription(googleMapComponentsDescriptions)
  .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
  .withComponentLibraryDescription(signatureComponentsDescriptions)
  .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
  .withComponentLibraryDescription(rSuiteComponentsDescriptions)