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)