Content SaaS | JSON Schema Form Builder

#bloomreach #saas #json #formbuilder

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: