Enum rendering with custom renderer

General
1

Hi !

I am stuck on a small problem whit a ‘tooltip’ custom renderer which does not works for elements with an enum. Base on the custom renderer exemple we have this:

…
import { Unwrapped } from ‘@jsonforms/material-renderers’;
const { MaterialTextControl } = Unwrapped;

function GetControl(props: ControlProps) {
//how to select the proper renderer ?)
return <MaterialTextControl {…props} />;
}

type uiSchemaWithTooltip = ControlElement & { tooltip: TooltipProperties };

export const TooltipControl = (props: ControlProps & OwnPropsOfEnum) => {
const uischema = props.uischema as uiSchemaWithTooltip;

return (
  <div>
    <Typography variant='h5'>
      {props.label} &nbsp;
      {uischema && <KTooltip data={uischema.tooltip} />}
    </Typography>
  </div>
);

export default withJsonFormsControlProps(TooltipControl);

How can i have the enums displayed as a pick list ?
Works ok with the ‘stock’ renderer but not with our custom one.

I have tried to similarly import MaterialEnumControl but got a run time error for missing ‘options’ (?)
Thanks for any help.

Noël

2

Hi @Noel,

The bindings and the renderer always have to fit together. For most basic renderers withJsonFormsControlProps is sufficient but for example the enum renderers need more specialized bindings. These add the options you are now missing.

The MaterialEnumControl is another specialty as it itself does some sort of mini-dispatching between autocomplete and “normal” (i.e. pick list) variant. See here. If you just want to force pick list you could just use the first variant. Here you can see the appropriate withJsonFormsEnumProps.

3

Thank you Stefan for the super quick and informative reply.
Will check that more tomorrow but looks promising.

4

Hi Stefan.

I can’t figure how to select and return the proper renderer in the GetControl().
This code always returns the TextControl …
Tnx.

Noël

5

Hi @Noel,

There are basically two ways to solve this:

  • Register an own custom renderer for each existing renderer. As you know what you’re wrapping you can just return the appropriate renderer in each case. This is the easy way, it’s just some work to do this for all the renderers.
  • Alternatively you could register a custom renderer which is able to render the tooltip for all elements, no matter which one. This one could internally then use JsonFormsDispatch to delegate to the appropriate renderer again. For this to work you should:
    • Not use a binding for this wrapper element as you can then just pass your props through to JsonFormsDispatch
    • Make sure that you don’t dispatch to yourself in an endless loop. For this you could for example modify the renderers which you hand over to JsonFormsDispatch to exclude this special wrapping renderer. If you need nested wrapping one of your custom renderers will need to add the renderer back.