Fluent Commerce Docs

Docs

Search

Help & Feedback

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Content in this track: Completing the Custom Form Field: Outputting the Result

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson completes the custom form field component by implementing the crucial step of outputting the captured data to the form's submitted payload. We'll learn how to use the

`onChange`

event provided by the

`FormFieldProps`

to pass the structured data (containing

`locationRef`

and

`quantity`

) back to the form. This ensures that the user's input is included in the data posted when the form is submitted. We'll also demonstrate how to verify the output using browser developer tools.

Key points

Outputting Data: Custom form fields must output their captured data to be included in the form's submitted payload.
```
`onChange`
```
Event: The onChange event of FormFieldProps is used to pass the data back to the form.
```
`StockReservationPayload`
```
: The output data is structured according to the StockReservationPayload interface, containing
```
`locationRef`
```
and
```
`quantity`
```
.
Conditional
```
`onChange`
```
Call: The
```
`onChange`
```
event is called only when a valid location is selected.
Verification: The lesson demonstrates how to use browser developer tools (Network tab) to inspect the posted event data and verify that the custom field's output is correctly included in the
```
`reservationDetails`
```
attribute.

In this lesson, you will complete the custom form field component by producing the result from the field back to the form, which will be posted when you submit it.

A form field must produce a result to be added to the post-payload of a form submit action.

Refer to the video below to complete the following steps:

First, you must update the
```
`useEffect`
```
hook and call the
```
`onChange`
```
event defined on the
```
`FormFieldProps`
```
component.
Since we typed the
```
`FormFieldProps`
```
to use the
```
`StockReservationPayload`
```
interface, this expects a
```
`locationRef`
```
and a
```
`quantity`
```
as part of the complex object value.
Additionally,
```
`onChange`
```
should only be called if a valid value is selected for the location state variable.
Since this is a form for a User Action, you can view the event posted to the transition API in the Network tab of your browser developer tools.
Finally, locate the
```
`reservationDetails`
```
event attribute to see the result.

Producing a Custom Value

This video explains how to reuse the result from the field back in the form

Cameron Johns

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.