Hi @sdirix
I Have Two Renderer One for Text fields and One for Select Fields I want to render them based on the Json Schema Passed But for now only one Renderer is working another one remains the same as the standard one.
**
TextField Renderer
**
import {
ControlProps,
isStringControl,
RankedTester,
rankWith,
} from ‘@jsonforms/core’;
import { withJsonFormsControlProps } from ‘@jsonforms/react’;
import { FormControl, Grid, InputLabel, TextField } from ‘@mui/material’;
const MyTextFieldControl = (props: ControlProps) => (
{props.label}
<FormControl fullWidth sx={{ m: 0 }}>
<TextField
value={props.data}
onChange={(event) => props.handleChange(props.path, event.target.value)}
error={!!props.errors}
helperText={props.errors || props.description}
disabled={!props.enabled}
/>
);
const muiTextFieldControlTester: RankedTester = rankWith(
2,
isStringControl
);
export const muiTextFieldControlEntry = {
renderer: withJsonFormsControlProps(MyTextFieldControl),
tester: muiTextFieldControlTester,
};
**
Select Field Renderer
**
import {
ControlProps,
isStringControl,
RankedTester,
rankWith,
} from ‘@jsonforms/core’;
import { withJsonFormsControlProps } from ‘@jsonforms/react’;
import {
FormControl,
Grid,
InputLabel,
MenuItem,
Select,
} from ‘@mui/material’;
const MuiSelectFieldControl = (props: ControlProps) => (
{props.label}
<FormControl fullWidth sx={{ m: 0 }}>
<Select
value={props.data}
onChange={(event) =>
props.handleChange(props.path, event.target.value)
}
error={!!props.errors}
disabled={!props.enabled}
>
{props?.schema?.enum?.map((option: string, index: number) => (
{option}
))}
);
const muiSelectFieldControlTester: RankedTester = rankWith(2, isStringControl);
export const muiSelectFieldControlEntry = {
renderer: withJsonFormsControlProps(MuiSelectFieldControl),
tester: muiSelectFieldControlTester,
};
**
Main File App.ts
**
import { Fragment, useState, useMemo } from ‘react’;
import { JsonForms } from ‘@jsonforms/react’;
import Grid from ‘@mui/material/Grid’;
import Button from ‘@mui/material/Button’;
import Typography from ‘@mui/material/Typography’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import schema from ‘./schema.json’;
import uischema from ‘./uischema.json’;
import {
materialCells,
materialRenderers,
} from ‘@jsonforms/material-renderers’;
import RatingControl from ‘./RatingControl’;
import ratingControlTester from ‘./ratingControlTester’;
import { makeStyles } from ‘@mui/styles’;
import { muiTextFieldControlEntry, muiSelectFieldControlEntry } from ‘./CustomRenderer’;
const useStyles = makeStyles({
container: {
padding: ‘1em’,
width: ‘100%’,
},
title: {
textAlign: ‘center’,
padding: ‘0.25em’,
},
dataContent: {
display: ‘flex’,
justifyContent: ‘center’,
borderRadius: ‘0.25em’,
backgroundColor: ‘#cecece’,
marginBottom: ‘1rem’,
},
resetButton: {
margin: ‘auto !important’,
display: ‘block !important’,
},
demoform: {
margin: ‘auto’,
padding: ‘1rem’,
},
});
const initialData = {
name: ‘Send email to Adrian’,
description: ‘Confirm if you have passed the subject\nHereby …’,
done: true,
recurrence: ‘Daily’,
rating: 3,
};
const renderers = [
…materialRenderers,
muiSelectFieldControlEntry,
muiTextFieldControlEntry,
];
const App = () => {
const classes = useStyles();
const [data, setData] = useState(initialData);
const stringifiedData = useMemo(() => JSON.stringify(data, null, 2), [data]);
const clearData = () => {
setData({});
};
return (
Welcome to JSON Forms with React
More Forms. Less Code.
<Grid
container
justifyContent={'center'}
spacing={1}
className={classes.container}
>
<Grid item sm={6}>
<Typography variant={'h4'} className={classes.title}>
Bound data
</Typography>
<div className={classes.dataContent}>
<pre id='boundData'>{stringifiedData}</pre>
</div>
<Button
className={classes.resetButton}
onClick={clearData}
color='primary'
variant='contained'
>
Clear data
</Button>
</Grid>
<Grid item sm={6}>
<Typography variant={'h4'} className={classes.title}>
Rendered form
</Typography>
<div className={classes.demoform}>
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={renderers}
cells={materialCells}
onChange={({ errors, data }) => setData(data)}
/>
</div>
</Grid>
</Grid>
</Fragment>
);
};
export default App;
Is this the correct way to implement the custom renderer or is there another way i am confused.
Actually it works based on which control renders first how to handle it
When The Select Renderer is in the top
When the Text Renderer is in the top