Enhance Your Custom Fields: Leveraging Existing Components from the Registry

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 }));

`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

  `quantity`

  property of the 

  `StockReservationPayload`

  —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.
• Add a new state variable to hold the

  `quantity`

  value. [0:28]
• Next, retrieve the

  `QuantitySelector`

  field component from the

  `FieldRegistry`

  using its alias "number". [0:56]
• Now add the

  `QuantitySelector`

  component to the

  `div`

  with the

  `quantitySelectorContainer`

  class, and set the

  `name`

  ,

  `label`

  ,

  `value`

  , and

  `onChange`

  handler. [1:33]
• When developing it's helpful to make use of the web console for debugging and confirming the output. This can be done using the

  `useEffect`

  hook. [2:45]