@abgov/jsonforms-components
v1.21.0
Published
Government of Alberta - React renderers for JSON Forms based on the design system.
Downloads
2,111
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
- GoARenders
- <GoAComponent A Reducer>
...
- <GoAComponent B Reducer>
...
GoA UI component JSON Forms 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:
{
"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.
JsonFormContextInstance
To use the package, and the context surrounding it, it's best to import JsonFormContextInstance attach data to it
Here are some sample api endpoints that work currently.
import { JsonFormContextInstance } from '@abgov/jsonforms-components';
useEffect(() => {
JsonFormContextInstance.addDataByUrl('dog-list', 'https://dog.ceo/api/breeds/list/all', processDogs);
JsonFormContextInstance.addDataByUrl(
'basketball-players',
'https://www.balldontlie.io/api/v1/players',
processPlayers
);
JsonFormContextInstance.addDataByUrl(
'car-brands',
'https://parallelum.com.br/fipe/api/v1/carros/marcas',
processCarBrands
);
JsonFormContextInstance.addFormContextData(
'countries',
Countries.map((country) => country.country)
);
}, []);
function processDogs(rawData): string[] {
return Object.keys(rawData.message);
}
function processPlayers(rawData): string[] {
return rawData.data.map((player) => `${player.first_name} ${player.last_name}`);
}
function processCarBrands(rawData): string[] {
return rawData.map((brand) => brand.nome);
}
Once you add them, you can add the following to any UI Schema control to create a dropdown that displays them
"type": "Control",
"scope": "#/properties/carBrands",
"options": {
"enumContext": {
"key": "car-brands",
You also need to add the following to the data schema
"carBrands": {
"type": "string",
"enum": [
""
]
}
Schemas only with no code changes
To access the apis without making any code changes to add an api,
import { JsonFormContextInstance } from '@abgov/jsonforms-components';
const { jsonFormContext, baseEnumerator } = JsonFormContextInstance;
return(
<jsonFormContext.Provider value={baseEnumerator}>
<JsonForms
schema={...}
uischema={...}
...
/>
/>
)
Data Schema
"carBrands": {
"type": "string",
"enum": [
""
]
},
"countries": {
"type": "string",
"enum": [
""
]
},
"dogBreeds": {
"type": "string",
"enum": [
""
]
},
"basketballPlayers": {
"type": "string",
"enum": [
""
]
}
Ui Schema
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/carBrands",
"options": {
"enumContext": {
"key": "car-brands",
"url": "https://parallelum.com.br/fipe/api/v1/carros/marcas",
"values": "nome"
}
}
},
{
"type": "Control",
"scope": "#/properties/dogBreeds",
"options": {
"enumContext": {
"key": "dog-list",
"url": "https://dog.ceo/api/breeds/list/all",
"location": "message",
"type": "keys"
}
}
},
{
"type": "Control",
"scope": "#/properties/basketballPlayers",
"options": {
"enumContext": {
"key": "basketball-players",
"location": "data",
"url": "https://www.balldontlie.io/api/v1/players",
"values": [
"first_name",
"last_name"
]
}
}
},
{
"type": "Control",
"scope": "#/properties/countries",
"options": {
"enumContext": {
"key": "countries"
}
}
}
]
}
Countries in this example comes locally.
import Countries from './countries';
--------
export default [
{ country: 'Russia', land_mass_km2: 17098242 },
{ country: 'Canada', land_mass_km2: 9976140 },
...
]
Another way to add data to ContextProvider (optional)
const animals = {
animals: [
{ name: 'Elephant', type: 'Mammal', habitat: 'Land' },
{ name: 'Penguin', type: 'Bird', habitat: 'Ice' },
{ name: 'Kangaroo', type: 'Mammal', habitat: 'Grasslands' },
{ name: 'Giraffe', type: 'Mammal', habitat: 'Savanna' },
{ name: 'Octopus', type: 'Invertebrate', habitat: 'Ocean' },
{ name: 'Cheetah', type: 'Mammal', habitat: 'Grasslands' },
{ name: 'Koala', type: 'Mammal', habitat: 'Eucalyptus Forest' },
{ name: 'Toucan', type: 'Bird', habitat: 'Rainforest' },
{ name: 'Dolphin', type: 'Mammal', habitat: 'Ocean' },
{ name: 'Arctic Fox', type: 'Mammal', habitat: 'Arctic Tundra' },
],
};
<ContextProvider data={[{ animals }]}
<JsonForms
...
</>
</ContextProvider>