콘텐츠 SaaS | JSON 스키마 양식 빌더

Bloomreach Content를 위한 JSON Form Builder 맞춤형 통합을 개발합니다.

최근 Bloomreach Content SaaS는 내장 앱 프레임워크를 사용하여 혁신적인 콘텐츠 유형 필드를 구축할 수 있는 "통합 라이브러리"기능을 출시했습니다. 사용자 지정 통합이 릴리스되면 예를 들어 타사 DAM 시스템, 마크다운 편집기 필드 추가 또는 특정 경우에는 양식 작성기를 통합할 수 있습니다. 자세한 내용은 Integrations Library 전용 설명서 페이지를 참조하십시오.

JSON 스키마 양식은 프런트엔드용 빠른 양식 모델 구축을 위한 잘 알려진 개념입니다. JSON Schema Form Builder 통합을 통해 콘텐츠 편집자는 양식 모델을 원활하게 생성하고 이를 Bloomreach Experience Manager에서 관리하는 웹사이트에 추가할 수 있습니다. 이렇게 하면 시간을 절약하고 향후 더 많은 통합과 함께 Bloomreach Content의 즉시 사용 가능한 통합의 유연성을 입증할 수 있습니다.

데모:



양식 작성기 애플리케이션 URL은 다음 위치에 있습니다.

https://content-forms.bloomreach.works/

일반적으로 다음 라이브러리를 사용하여 프런트엔드 애플리케이션에 양식을 표시합니다.

https://react-jsonschema-form.readthedocs.io/en/latest/

https://jsonforms.io/docs/getting-started

React 양식 구성 요소의 예:

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>
  );
}

JSON Schema Form Builder는 양식 처리를 고려하지 않습니다. 위에 나열된 라이브러리 패키지는 후크를 제공합니다(사이트 방문자가 양식을 제출할 때마다 위의 #onSubmit 참조).

이 통합은 다음에서 제공하는 UI를 기반으로 합니다.

https://ginkgobioworks.github.io/react-json-schema-form-builder/

사용자 지정 통합 대시보드와 함께 JSON 스키마 양식 빌더를 설치합니다.



또는 설치 프로그램을 사용하십시오.

Install!