Fluent Commerce Logo
Docs
Help & Feedback
Sign In

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

Extending Forms with Custom Field Components

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson introduces the concept of custom form fields within the UX Framework. While standard form fields are automatically generated based on data types, developers can create custom field components to handle more complex data structures or enhance the user experience for specific scenarios, such as workflow user actions, GraphQL mutations, and list filters. In our client scenario, we'll focus on building a custom form field to capture stock reservation details, which requires a JSON object containing 

`locationRef`
and 
`quantity`
.

Key points

  • Form Field Generation: The UX Framework automatically generates forms based on expected data types.
  • Custom Field Components: Developers can create custom field components to handle complex data types or improve UX.
  • Extending Scenarios: Custom field components can be used with workflow user actions, GraphQL mutations, and list filters.
  • JSON Data Capture: This lesson's focus is on creating a custom field component to capture a JSON object for stock reservation details, containing locationRef and quantity fields.
  • Client Scenario: The need for a custom form field arises from the client's requirement to capture stock reservations, which involves a specific JSON structure.

Form fields are the data capture elements in a Web App and are presented on forms to capture user input.  

The UX Framework automatically generates forms based on the expected output of the form.

e.g., A form capturing data for a GraphQL mutation or a Workflow Framework User Action.

Developers can extend several scenarios:

  • Workflow user actions to match the data types expected by custom Rules.
  • GraphQL mutations to improve the UX of previously purely auto-generated forms.
  • List filters to extend the UIs available to select filter options, e.g., doing a customer lookup to provide a customer ID.

Each field in the form is determined by its type, such as a text box for a string field or a date picker for a date-typed field.

The UX Framework provides a number of standard field types, but you can create your own custom field types to handle more complex types using the Component SDK

For example, many user actions require the event attribute to contain a JSON structure. This structure is essentially a composite of other types, such as strings, numbers, and dates, but in a single object.

Let's continue with our client scenario:

In our client scenario, the store assistant needs to capture a stock reservation for another store.

To do this, the user action expects an object containing a 

`locationRef`
and a 
`quantity`
field as a JSON attribute:

`{`

`  "locationRef": "F_NSYD",`

`  "quantity": 1`

`}`

A Workflow may be configured to name the type, such as "StockReservationDetails", and declare this in the user action attribute type definition.

The UX Framework will look for field components registered as "StockReservationDetails" and render them to the form. However, this field component does not yet exist.

So, let's move on to the next lesson, which is to build a custom form field for this special complex type.

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
    UI Components
    Workflows
    Settings
    Interface Contracts
    Rules
    By Type
    All Types
    Knowledge Tracks
    Extend Knowledge
    Glossary
    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
    eLearning

    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.

    Fluent Logo