Problem with basic MaterialEnumControl example

General
1

Hi! I’m completely new to JSONForms, and I’m trying to understand how I could implement a “dynamic dropdown”, i.e. a dropdown whose value set is determined by the value of another dropdown.

My approach so far has been to try to adapt this example Custom Renderers - JSON Forms, (which uses a MaterialBooleanControl, along with the react-seed-app) into one that is based on a MaterialEnumControl, in the hope of better understanding how it works.

My test component looks like this so far (note that I had to add some dummy props that I do not fully understand yet, to satisfy TypeScript):

import {
  ControlProps,
  OwnPropsOfEnum,
  RankedTester,
  rankWith,
  scopeEndsWith,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import { Unwrapped } from '@jsonforms/material-renderers';
import { Grid, Typography } from '@mui/material';
const { MaterialEnumControl } = Unwrapped;

export const linkedDropdownControl = (props: ControlProps & OwnPropsOfEnum) => {
  console.log(props);
  return (
    <Grid>
      <Typography>Bla bla bla</Typography>
      <MaterialEnumControl
        {...props}
        label='Test'
        // path={'bla'}
        errors={''}
        t={() => 'toto'}
        locale='en'
        options={[
          { label: 'AA', value: 'AA' },
          { label: 'BB', value: 'BB' },
        ]}
        data={'AA'}
      />
    </Grid>
  );
};

export const linkedDropdownTester: RankedTester = rankWith(
  3,
  scopeEndsWith('dynamic_dropdown')
);

export default withJsonFormsControlProps(linkedDropdownControl);

I also added a corresponding entry in schema.json:

"dynamic_dropdown": {
  "type": "string",
  "enum": ["AA", "BB"]
}

and in uischema.json:

{
  "type": "Control",
  "scope": "#/properties/dynamic_dropdown"
}

I also registered my custom renderer and tester with my <JsonForms>. It seems to “work” (when I change the tester condition I can fall back to the custom enum renderer), but the problem is that I cannot see any MUI input being rendered (just the <Typography> is visible).

I’m quite certain it’s just missing something quite stupid, but I searched a lot, and cannot find any more clues… any help would be much appreciated!

2

Hello @cjauvin ,
based on you description I agree that the tester seems to work fine.

In your custom control, I noticed that you just wrap your control in HOC withJsonFormsControlProps. This does not provide all properties expected for enum controls. This also explains why you had to provided some ‘dummy’ props like t.
You can have a look at MaterialEnumControl.tsx to see the HOC used for enum controls.
Keep in mind that you also need to adapt you control’s prop types when you adapt the HOC.

I hope that helps,
Lucas

3

Thanks a lot @lucas-koehler for your answer. Yes I have noticed that I wasn’t using the right HOC, as is specified in the docs: I changed it to withJsonFormsEnumProps. I was also missing a visible=true props apparently.