Develop a JSON Form Builder custom integration for Bloomreach Content.
Recently Bloomreach Content SaaS released the feature: “Integrations Library”, in which innovative content type fields can be built using a built-in App framework. With the release of Custom integrations, you will be able to integrate, for example: 3rd party DAM system, add a markdown editor field or in this specific case: a form builder. Look at our Documentation pages dedicated to the Integrations Library to learn more.
JSON schema forms are a well known concept for quick form model building for the frontend. With the JSON Schema Form Builder integration, content editors can seamlessly create form models and add these to a website managed by the Bloomreach Experience Manager. This will save you time and demonstrate the flexibility of Bloomreach Content’s out-of-the-box integrations with more integrations to come.
A demo:
The form builder Application URL is located at:
https://content-forms.bloomreach.works/
We usually work with the following libraries to display the forms in the frontend application:
https://react-jsonschema-form.readthedocs.io/en/latest/
https://jsonforms.io/docs/getting-started
Example of a React Form Component:
import React from "react"; import { ContainerItem } from "@bloomreach/spa-sdk"; import { BrProps } from "@bloomreach/react-sdk"; import { withTheme } from "@rjsf/core"; import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4"; const Form = withTheme(Bootstrap4Theme); export function FormComponent({ component, page, }: BrProps<ContainerItem>): JSX.Element | null { const content: any = component.getContent(page); let form; try { form = JSON.parse(content.form); } catch (e) { form = { jsonSchema: {}, uischema: {} }; } const schema = form.jsonSchema ?? {}; const uischema = form.uiSchema ?? {}; return ( <div className={`jumbotron mb-3 ${page.isPreview() ? "has-edit-button" : ""}`} > <Form schema={schema} uiSchema={uischema} onSubmit={(submissionData) => { console.log(submissionData); }} /> </div> ); } Do note that JSON Schema Form Builder does not take any form handling into account. The library packages listed above provide a hook (see above #onSubmit whenever the form is submitted by the site visitor).
This integration is based on the UI provided by:
https://ginkgobioworks.github.io/react-json-schema-form-builder/
Install JSON Schema Form Builder with the Custom Integrations dashboard:
Or use the installer:
Top comments (0)