How to impelement custom object renderer

General
1

Hi, I am trying to create a custom object renderer. My use case is to wipe out all the data that is been entered in the object properties if the object itself is not visible on the UI.

import {
  ControlWithDetailProps,
  isObjectControl,
  RankedTester,
  rankWith,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';

export const CustomObjectRenderer = ({
  renderers,
  cells,
  uischemas,
  schema,
  label,
  path,
  visible,
  enabled,
  uischema,
  rootSchema,
  data,
  handleChange,
}: ControlWithDetailProps) => {
  console.log('path is', path);
  console.log('data is', data);
  console.log('handleChange', handleChange);

  return <>this form is rendered</>;
};

export const customObjectControlTester: RankedTester = rankWith(
  3,
  isObjectControl
);

export default withJsonFormsControlProps(CustomObjectRenderer);

But the problem is properties like handleChange, path, data,visible are not passed to CustomObjectRenderer.

I am using jsonforms react version 2.5.1 with material renderers.

2

Hi @pankaj-z,

On a first glance the code looks like it should be working. Please make sure that you are registering the wrapped default export and not the also exported CustomObjectRenderer. Can you post the registering code where you hand over the renderers to JSON Forms?

Note that you should be using withJsonFormsDetailProps instead of withJsonFormsControlProps if you want to use the existing helpers for object rendering.

In general I would recommend switching to JSON Forms 3.0 if possible for you.

3

This is how I register it.

export const renderers = [
  ...materialRenderers,
  { tester: arrayLayoutTester, renderer: ArrayLayout },

  { tester: radioControlTester, renderer: CustomRadioControl },
  {
    tester: customCheckboxControlTester,
    renderer: CustomCheckboxControl
  },
  { tester: customInputControlTester, renderer: CustomInputControl },
  { tester: customZipControlTester, renderer: CustomZipControl },
  { tester: customSsnControlTester, renderer: CustomSsnControl },

  { tester: customSelectControlTester, renderer: CustomSelect },
  {
    tester: customPropertyEnablerTester,
    renderer: CustomPropertyEnablerControl
  },
  {
    tester: customNumberControlTester,
    renderer: CustomNumberControl
  },
  {
    tester: customDatePickerControlTester,
    renderer: CustomDatePickerControl
  },
  **{**
**    tester: customObjectControlTester,**
**    renderer: CustomObjectRenderer**
**  }**
]

And this is how I am passing it to JsonForms

<JsonForms
          schema={schema}
          uischema={uiSchema}
          data={data}
          renderers={formRenderers || []}
          cells={materialCells}
          onChange={({ errors, data }) => {
            handleFormDataChange(data, errors)
          }}
          validationMode={validationMode}
        />
4

Hi @pankaj-z, can you also show how you import the CustomObjectRenderer?