Fluent Commerce Docs

and outputs a JSON object structured as required by the Ruleset. The lesson covers configuring the user action button, creating the custom field component using React Function Components and the

`FormFieldProps`

interface, registering the field, and updating the workflow definition to use the new custom field type.

Key points

User Action Configuration: Enabling user actions in the manifest is a prerequisite for testing the custom field.
```
`StockReservation`
```
Data Structure: The custom field will capture data in a specific JSON format: { "locationRef": "F_NSYD", "quantity": 1 }.
React Function Component: The custom field is implemented as a React Function Component (FC).
```
`FormFieldProps`
```
Interface: The component uses the
```
`FormFieldProps`
```
interface from the UX Framework, typed with the output payload structure.
```
`onChange`
```
Handler: The
```
`onChange`
```
property of
```
`FormFieldProps`
```
is used to capture user input.
Field Registration: The custom field is registered with the
```
`FieldRegistry`
```
using a specific name.
Workflow Update: The workflow user action definition is updated to use the new custom field type.
Testing: The lesson includes steps to verify that the custom field is correctly rendered in the user action form.

In this lesson, you will implement a new custom field component for a Stock Reservation user action.

Training Accounts have been prepared to cater for this use case

We have prepared the Training Accounts to cater for this use case.
The PRODUCT_CATALOGUE MASTER workflow contains a

`StockReservationRequest`

Ruleset with a User Action. It expects an Event Attribute type of

`stockReservation`

, which you will implement a custom field for to support.
This Ruleset will post a SoftReserve event to the INVENTORY_CATALOG DEFAULT workflow, which will create a soft reserve inventory quantity, recalculate Stock on Hand, and set an expiry on the reservation.

The Ruleset expects an Event Attribute named "

`stockReservation`

" containing 2 fields:

`locationRef`

and

`quantity. `

It also expects a JSON value with a similar structure to the one below:

`{`

`  "locationRef": "F_NSYD",`

`  "quantity": 1`

`}`

You will build a field to produce this value for the "

`stockReservation`

" attribute on the posted Event.

To start with, let's simply create a "Hello Field" example:

Before you begin creating your field, let's make sure the User Action button is working on the page. Since you are building upon the screen created in the UX Framework course, it is likely that this User Action is not yet configured to show in the Manifest.

Modify the fragment manifest, and enable User Actions by adding the

`actions`

property to the

`props`

for the Product Availability Detail Page:

`"props": {`

`  "title": "Product Availability",`

`  "actions": {`

`    "enabled": true`

`  }`

`}`

Check that you now see a "RESERVE" button on the top right of the Availability Screen, as per the video below.

The video below shows how the initial user action is configured and the reservationDetails attribute is typed as "STRING".

Create a new
```
`StockReservation.tsx`
```
and define the interface for the outgoing payload. [0:50]
You now need to define the Field component by once again using the
```
`FC`
```
(FunctionComponent) component from React as the base, and typing it to the UX Framework
```
`FormFieldProps`
```
— which in turn requires another generic for the output, in our case we will define it to be our payload structure
```
`StockReservationPayload`
```
. [1:43]
The FormFieldProps provides a number of useful properties — use the
```
`onChange`
```
since this will allow us to capture the user input. [2:36]

Field Components call onChange whenever the field state changes

Field Components should call

`onChange`

whenever the field state changes. This will cause a re-render, so best to wrap it in a

`useEffect`

to avoid undesired infinite loops.

Before you go implement the full function of the component, let's make sure it renders to screen by simply returning a "Hello Form" div. [3:01]
Register the field with the
```
`FieldRegistry`
```
, and take note of the name. This will be used to configure the workflow later. [3:29]
Make sure the local references include a dot slash:
```
`'./fields/StockReservation';`
```
[4:02]
Update the workflow user action definition to change the type from
```
`STRING`
```
to
```
`stockReservation`
```
. [4:13]

Training Account workflows have "stockReservation" references

Training Account workflows already reference "

`stockReservation`

" as the Event Attribute type.

Click the drop down list to see the other Workflow lists

To locate the PRODUCT CATALOGUE workflow, click on the drop down list where it says CONTROL GROUP to see the other Workflow lists, and select PRODUCT CATALOGUE:

Once complete, open the user action form, and you should see the "Hello Form" text, indicating that the UX Framework has successfully mapped your custom field component to the attribute type defined in the workflow.