DEV Community

ksalic for Bloomreach

Posted on

Content SaaS | JSON Schema Form Builder

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Or use the installer:

Install!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay