Custom fields
There are two ways to add custom components:
- controls
- components
Controls
Controls are custom components whose input properties are customizable.
import Pie from "<location>";
<MuiForms
...
controls={{
"piechart": <Pie {...props} />
}}
...
/>Properties
| Property | Description |
|---|---|
| form | A map of all form fields and their values |
| field | Properties of the current field |
Basic example
A custom score chart
Steps
- Create a custom react component. For example:
<Pie /> - Add a name of the component as
displayTypeinside schema.json. For example:piechart
{
"name": "custom_field",
"meta": {
"displayType": "piechart"
}
}- Add your custom component as
controlsinside MuiForms
<MuiForms
...
controls={{
"piechart": <Pie />
}}
...
/>Schema
{}
fields]
:
[[
…
][
…
][
…
]Usage
import MuiForms from "mui-forms";
import schema from "<schema_location.json>";
import Pie from "<my_pie_chart_location>";
import Bar from "<my_bar_chart_location>";
<MuiForms
name="myForm"
controls={{
piechart: <Pie />
}}
schema={schema}
onSubmit={(formData) => {
// handle form submission
}}
/>;Note:
- Following charting library is used here: https://react-chartjs-2.js.org/examples/pie-chart (opens in a new tab)