Government of Alberta - React renderers for JSON Forms based on the design system.
npm install @abgov/jsonforms-componentsThis library was generated with Nx.
Run nx test jsonforms-components to execute the unit tests via Jest.
``
- src
- lib
- Additional
- Cells
- common
- Components
- Controls
- Context
- ErrorHandling
- layouts
- util
`
To use ADSP Forms service UI components add in JSON Forms into your application. You will have to include the following JSX markup and imports into your React components as an example.
``
import { JsonForms } from '@jsonforms/react';
import {
GoARenderers,
} from '@abgov/jsonforms-components';
``
uischema={yourJSONUISchema}
data={data}
validationMode="ValidateAndShow"
renderers={GoARenderers}
onChange={onChange}
/>
UI Schema in the JSON Forms defines the general layout of the forms generated. @abgov/jsonforms-components lib integrates the GoA UI components form components by extending the "options" attribute in the UI Schema. Take GoAInput UI Schema as example:
https://govalta.github.io/adsp-monorepo/tutorials/form-service/building-forms.html
```
{
"type": "Control",
"scope": "#/properties/name",
"options": {
"GoAInput": {
"name": "Name",
"label": "Name",
"testId": ""
...
}
}
}
The presence of the "GoAInput" indicates we are going to use the GoAInput to render the input. The attributes in the "GoAInput" will be passed to the GoAInput as component properties.
For additional information and usage pertaining to the controls, layouts, steppers, please refer to the ADSP Form service guide which provides more in depth information on the usage.
Please refer to the Cheat sheet which contains schema examples for the different types of controls, steppers, layouts, etc that are currently available from ADSP Form service UI components that can used in your UI schema of your application.