Fluent Commerce Docs

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`. We'll also cover best practices like using the `useEffect` hook for debugging.

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 `useEffect`: Use the `useEffect` hook to debug and verify the behavior and output of your custom field.

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

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]