Creating components
Get started creating new form components for the apps
App structure
When an instance is in a data step, the form defined in the JSON form layout file(s) for that task is rendered. Below you can see a simplified overview of the layers of components that are used to render the form, including some of the most important inputs.
A detailed overview of the app frontend structure and architecture is available here.
Form components
All form components should be presentational components. This means that their only responsibility is to present
something to the DOM, and as such they do not handle any direct interactions with the redux store. This is the
responsibility of the parent component (in most cases GenericComponent
), which will provide the
form components with the data they need to render themselves, as well as any functions to call in the event of a change.
Adding a new form component
Form components are defined in src/components
. Find a relevant folder in the structure, or create a new one if necessary, and implement the component there.
All form components are react components, that are provided with props as input. A list of the props that are provided and can be used:
prop name | type | description | source |
---|---|---|---|
id | string | unique component ID | layout |
text | string | text to be displayed | layout (textResourceBindings.title value) |
formData | any | form data to display (if relevant) | parent component |
language | any | object containing standard language resources | parent component |
shouldFocus | boolean | should component have focus | parentComponent |
handleDataChange | (value: any) => void | function to call in the event of a data change | parent component |
handleFocusUpdate | (value: any) => void | function to handle updating focus | parent component |
getTextResource | (key: string) => string | function to get text resource value | parent component |
isValid | boolean | is component valid | parent component |
In addition, any properties defined on the component in the layout-file will be passed through to the component.
To make a new form component available for use, it needs to be added to the module that exports all the form components for use elsewhere in the application.
This is the src/components/index.tsx
-file. In this file, you will find lists of all the available form components exported. To make your component available, you need
to do the following:
- Import your new component into the file
- Update the
ComponentTypes
enum with your new component type - Add your a new object for your component to one of the component lists (or create a new list if relevant). The list object must have the following structure:
{ name: "<component name>", Tag: <Component tag>, Type: <ComponenType enum for your component>m customProperties: { <any custom properties that the component should be initialized with> } }
Use the existing lists and components as an example for setting this up. Once this is done, the component is ready to use, and can be added to the layout file of an app and used.