Guidance on modifying existing array renderer

General
1

I am trying to modify the existing array renderer so that I can write an additional property to data when an array item is added (I want to automatically add an ID property that is generated based on array index).

I have followed the guidance on modifying existing renders but don’t seem to be having much luck with array renderers.

import { rankWith, scopeEndsWith } from "@jsonforms/core";
import { Unwrapped } from "@jsonforms/material-renderers";
import { withJsonFormsControlProps } from "@jsonforms/react";;

const { MaterialArrayControlRenderer } = Unwrapped;

export const ArrayWithIdControl = (props) => {

    return (
        <MaterialArrayControlRenderer {...props}/>
    )
}

export const arrayWithIdControlTester = rankWith(
    3,
    scopeEndsWith('testArray')
  );

export default withJsonFormsControlProps(ArrayWithIdControl);

At this point I’d just like to see the array layout appear on the UI (and I’ll apply modified logic later) but I just get an error:
Cannot read properties of undefined (reading 'deleteDialogAccept')

Any ideas or helpful docs you can point me at?

Note I have also tried using the MaterialArrayLayout render but this also gives me an error:
Cannot read properties of undefined (reading 'addTooltip')f

Thanks

2

Hi @simonmellows,

withJsonFormsControlProps is a basic binding which we offer. However specialized use cases, like handling arrays, will get more and/or different props injected. So when overriden/rewrapping a renderer, you need to use the binding associated with that renderer, e.g. see the withJsonFormsArrayLayoutProps

3

Thank you, Stefan.

That’s done it :+1:

1 Like