Enhance Your Custom Fields: Leveraging Existing Components from the Registry
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson details how to enhance custom form fields by adding structure, styling, and interactive controls. We'll focus on improving the user experience and data capture capabilities of our custom field component. This involves using Material-UI for styling, organizing the field's layout, and integrating pre-built form controls from the component library, such as the
`QuantitySelector``useEffect`Key points
- Structure and Layout: Learn how to structure and organize the elements within your custom form field for optimal presentation.
- Styling with Material-UI: Use Material-UI's styling capabilities (e.g., makeStyles) to style your custom field and maintain design consistency.
- Form Control Integration: Integrate pre-built form controls, like the QuantitySelector, to efficiently capture specific data types (e.g., integers for quantity).
- Component Registry Retrieval: Learn how to retrieve and use existing components from the component registry (e.g., the QuantitySelector using its alias "number").
- State Management: Manage the state of form inputs using React's state mechanisms.
- Debugging with : Use the
`useEffect`hook to debug and verify the behavior and output of your custom field.`useEffect`
Now that you've created your custom field, it's time to give it some structure and style and add in the form controls for our complex payload object.
To achieve this, you will need to perform the following steps:
- Add some structure to your custom field
- Add some style to your custom field
- Add in the form controls
Let's begin by adding some structure to your custom field:
Next, add some styles:
1const useStyles = makeStyles((theme) => ({
2 locationWrapper: {
3 display: 'flex',
4 flexDirection: 'column',
5 },
6 radioWrapper: {
7 marginRight: 0,
8 '&:hover': {
9 color: theme.palette.primary.main,
10 },
11 },
12 locationLabelWrapper: {
13 width: '100%',
14 },
15 splitColumns: {
16 display: 'flex',
17 flexDirection: 'row',
18 justifyContent: 'space-between',
19 },
20 availableQty: {
21 color: '#94d096',
22 fontWeight: 'bold',
23 },
24 quantitySelectorContainer: {
25 marginBottom: '20px',
26 },
27 quantityLabel: {
28 marginBottom: '10px',
29 color: '#909090',
30 },
31 }));Language: plain_text
Name: Custom Styles using Material-UI
Description:
This code snippet defines styles for a custom form field component using Material-UI's
`makeStyles`Finally, let's build the field with some form controls — Refer to the video below to complete this step:
- First, we need a control for the property of the
`quantity`—the value should be a positive integer. We have an existing control in the component library for this purpose, so we can use that component within our new field.`StockReservationPayload` - Add a new state variable to hold the value. [0:28]
`quantity` - Next, retrieve the field component from the
`QuantitySelector`using its alias "number". [0:56]`FieldRegistry` - Now add the component to the
`QuantitySelector`with the`div`class, and set the`quantitySelectorContainer`,`name`,`label`, and`value`handler. [1:33]`onChange` - When developing it's helpful to make use of the web console for debugging and confirming the output. This can be done using the hook. [2:45]
`useEffect`
Retrieving Existing Fields From the Registry
This video explains how to retrieve and use existing field components from the registry
