Custom Renderer for JsonForms

General
1

Custom Overiding Material Text Component

import React from ‘react’;
import { MaterialTextControl } from ‘@jsonforms/material-renderers’;

const CustomMaterialTextControl = (props) => {
// Override styles
const customStyle = {
border: ‘1px solid #ccc’,
borderRadius: ‘4px’,
padding: ‘8px’,

};

return <MaterialTextControl {…props} style={customStyle} />;
};

export default CustomMaterialTextControl;

Json Forms Overiding

import CustomMaterialTextControl from ‘components/CustomTextfield’;

const JsonForms = () = {
return(
<>

<JsonForms
schema={pg_schema}
uischema={pg_uischema}
data={data}
renderers={[…materialRenderers,{tester:CustomMaterialTextControl,renderer:CustomMaterialTextControl}]}
cells={materialCells}
onChange={({ data }) => handleFieldChange(data)}
values={formikData?.scenario_data}
/>
</>
)
}

I wanted to overide the defaut renderer and set a new renderer to the json form but its not working

2

Hi @AnthonyAkash,

You need to implement an actual tester, you can’t hand over the control as the tester. Also for performance reasons you should make your renderers array stable, otherwise JSON Forms will completely rerender the form for every renderer pass, as the handed over renderers array is a new instance.

See here for an example tester. You will need to hand over one with a higher ranking.