@abgov/jsonforms-components
v1.43.0
Published
Government of Alberta - React renderers for JSON Forms based on the design system.
Downloads
2,668
Keywords
Readme
jsonforms-components
This library was generated with Nx.
Running unit tests
Run nx test jsonforms-components
to execute the unit tests via Jest.
Folder hierarchy
- src
- lib
- Additional
- Cells
- common
- Components
- Controls
- Context
- ErrorHandling
- layouts
- util
Embedding ADSP Form service UI components in your application
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';
<JsonForms
schema={yourJSONDataSchema}
uischema={yourJSONUISchema}
data={data}
validationMode="ValidateAndShow"
renderers={GoARenderers}
onChange={onChange}
/>
ADSP Form service UI components UI schema
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.