Fluent Commerce Logo
Docs
Help & Feedback

Content in this track:

Extending the UX Framework with the Component SDK

1

Building Custom Components with the Component SDK

2

Setting Up Your Component SDK Project

3

Client Scenario: Building a Product Availability Map

4

Creating and Registering a Custom Component

5

Configuring Custom Components via the Manifest

6

Accessing User and Location Context with the useAuth Hook

7

Integrating a Third-Party Map Component

8

Adding Nested (Child) Components

9

Accessing Page Query Data

10

Style and Theme Your Component

11

Make Your Component Interactive

12

Configuring Components with Settings

13

Configuring Components with Dynamic Attributes

14

Extending Forms with Custom Field Components

15

Implementing a Custom Form Field

16

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

17

Fetching Data with the useQuery Hook

18

Completing the Custom Form Field: Outputting the Result

19

Creating Custom Template Helpers

20

Unit Testing Custom Components

21

Deploying a Custom Component Plugin

22

End Of Track

23

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:
Cille Schliebitz
Anita Gu

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
    • Building Blocks
    Building Blocks
    Packages & Modules
    All UI Components
    Workflows
    Settings
    Interface Contracts
    All Rules
    By Type
    All Types
    Knowledge Tracks
    Extend Knowledge
    Glossary
    All How-to Guides
    Sitemap
    Topics
    Use Cases
    Helpful Resources
    Platform Limits
    Support Policy
    Service Level Agreement (SLA) - Enterprise
    Deprecation Policy
    Extend Knowledge Content – Terms and Conditions
    System and Organization Controls (SOC) 3 Report
    Data Privacy Addendum
    Security Policy
    Quick Links
    For Partners
    Customer Resources
    Webinars and Events
    Certifications
    Training Resources
    Knowledge Tracks
    Builders Portal
    Product Update Newsletter
    Industry Blogs & Events Newsletter
    Trust Center Portal

    Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.

    Fluent Logo