Content SaaS | JSON Schema Form Builder
Tags: bloomreach, saas, json, formbuilder
Published: 2022-10-17 09:23:57

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](https://documentation.bloomreach.com/content/docs/integrations-library?_ga=2.225483932.729086942.1664529358-129010115.1663337065) 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:

{% embed https://www.youtube.com/watch?v=O1FXXdeSDVY %}

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:

![Form builder in the Integrations Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj2nhges73jzyxqtpot1.png)

Or use the installer:

[Install!](https://content-tools.bloomreach.works/ui-extension-frame?uiExtension=%7B%22id%22%3A%22formbuilder%22%2C%22displayName%22%3A%22Form%20Builder%22%2C%22url%22%3A%22https%3A%2F%2Fcontent-forms.bloomreach.works%22%2C%22config%22%3A%22%7B%7D%22%2C%22extensionPoint%22%3A%22document.field%22%2C%22height%22%3A500%2C%22description%22%3A%22JSON%20schema%20form%20builder%22%2C%22logo%22%3A%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8%2BDQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGhlaWdodD0iMTQwIiB2aWV3Qm94PSIwIDAgMTQwIDE0MCIgd2lkdGg9IjE0MCI%2BDQogIDxkZWZzPg0KICAgIDxjbGlwUGF0aCBpZD0iYSI%2BDQogICAgICA8cmVjdCBmaWxsPSIjMDAyODQwIiBoZWlnaHQ9Ijc3LjMxMSIgc3Ryb2tlPSIjNzA3MDcwIiBzdHJva2Utd2lkdGg9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIHdpZHRoPSI3NS4xMDIiLz4NCiAgICA8L2NsaXBQYXRoPg0KICA8L2RlZnM%2BDQogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPg0KICAgIDxwYXRoIGQ9Ik0yMywwaDk0YTIzLDIzLDAsMCwxLDIzLDIzdjk0YTIzLDIzLDAsMCwxLTIzLDIzSDIzQTIzLDIzLDAsMCwxLDAsMTE3VjIzQTIzLDIzLDAsMCwxLDIzLDBaIiBmaWxsPSIjZmZkNTAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8%2BDQogICAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDYuMTkgMTA4LjExMikgcm90YXRlKDE4MCkiPg0KICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNDA1IC0xNTEuNzMpIj4NCiAgICAgICAgPHBhdGggZD0iTTAsMEMxLjAyLjQ5MywxLjk1MSwxLjEwNywyLjk0NCwxLjYzOSwxLjk3MiwxLjA4LDEsLjUyMywwLDBaIiBmaWxsPSIjMDAyODQwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTYuMjc2IDc1LjUwNSkiLz4NCiAgICAgICAgPHBhdGggZD0iTTM1Ljk0NCw1OS43VjBIMFY5MS4yMzRBOTkuMzM5LDk5LjMzOSwwLDAsMSwzNS45NDQsNTkuN1oiIGZpbGw9IiMwMDI4NDAiLz4NCiAgICAgICAgPHBhdGggZD0iTS4wMzQsMCwwLC4wNUMuMy4yLjYxMi4zMzEuOTA4LjQ4Ni42LjM0LjM0LjE0Mi4wMzQsMFoiIGZpbGw9IiMwMDI4NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNS4zNjcgNzUuMDE5KSIvPg0KICAgICAgICA8cGF0aCBkPSJNMTIxLjUsMTAuMDQ3Yy0uOTkzLS41MzItMS45MjQtMS4xNDYtMi45NDQtMS42MzktLjMtLjE1NS0uNjA5LS4yODUtLjkwOC0uNDM2TDk4LjcsMzYuNjZjMTcuMDYsNi45NDUsMjguMzE0LDIzLjkyOCwyOC4zMTQsNDMuNjI0LDAsMjUuNzY3LTE5LjE3Myw0Ny4wMzMtNDUuNTM2LDQ3LjAzMy0yNi42NTksMC00NS41MzQtMjEuMjY2LTQ1LjUzNC00Ny4wMzMsMC0yNS4xNjksMTguMDc2LTQ1LjksNDMuNzY1LTQ2Ljg1MUwxMDAuNDE4LDIuMDgxQTg4LjQ0LDg4LjQ0LDAsMCwwLDgxLjQ3NywwLDgzLjYzMiw4My42MzIsMCwwLDAsMzUuOTQ0LDEyLjkzNHYtLjAwOUE4MSw4MSwwLDAsMCwwLDgwLjI4NHY4MC4yODJIMzUuOTQ0VjE0Ny42MzRhODMuNjM3LDgzLjYzNywwLDAsMCw0NS41MzQsMTIuOTMxLDg1Ljk2MSw4NS45NjEsMCwwLDAsMzIuNDgxLTYuMTkyQTgxLDgxLDAsMCwwLDEyMS41LDEwLjA0N1oiIGZpbGw9IiMwMDI4NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNjcuMDk3KSIvPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc%2BDQo%3D%22%2C%22package%22%3Anull%2C%22connect-src%22%3A%5B%5D%2C%22frame-ancestors%22%3A%5B%5D%2C%22frame-src%22%3A%5B%22content-forms.bloomreach.works%22%5D%2C%22img-src%22%3A%5B%5D%2C%22script-src%22%3A%5B%5D%2C%22style-src%22%3A%5B%5D%2C%22font-src%22%3A%5B%5D%2C%22media-src%22%3A%5B%5D%7D&configForm=%7B%7D)