Customizing Text Inputs in JSON Forms with Material Renderers

General
1

I am using JSON Forms in React along with the material-renderers. I want to override the default Material UI TextInputs with a custom text input for all textfields.

The challenge I am facing is that while I have successfully managed to customize the TextInput for non-array fields (Using a custom renderer), I am struggling to apply these changes to TextInput fields that reside within an array.

Is there a way to override all text inputs?

2

Hi @max12,

With our off-the-shelf React Material renderers we support two different ways of rendering an array: Either as a table or as a list.

The table renderer uses an own simplified renderer set to render the table cells, the cells renderer set. It’s behavior is very similar to the normal renderers, just that the cells are expected to render only an input instead of label, description etc.

So to overwrite the text inputs in the array table you need to hand over a custom cell renderer for them.

3

Hi,

thanks for the response. It is now working. I oversaw that the cell renderers have to get applied to a separat cell prop:

<JsonForms
        renderers={[
          ...materialRenderers,
          {
            tester: dynamicTextInputTester,
            renderer: DynamicTextInput,
          },
        ]}
        cells={[
          ...materialCells,
          {
            tester: dynamicTextCellTester,
            cell: dynamicTextCellInput
          },
        ]}
1 Like