Fluent Commerce Docs

Docs

Search

Help & Feedback

Get Started
Functionality
Learning
Extension
Dev Tooling
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: Creating and Registering a Custom Component

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson demonstrates the process of creating and registering a custom component using the Component SDK. We'll walk through the steps of building a simple React Function Component, leveraging a utility component (Card) provided by the SDK. We'll then register this custom component with the Component Registry, making it available for use within our web application. Finally, we'll show how to integrate the registered component into a page by updating the application's manifest.

Key points

React Function Components (FCs): Fluent components are built as React Function Components, providing a familiar and efficient development model.
Utility Components: The Component SDK provides utility components (like a `Card`) that can be used as building blocks for custom components, simplifying development and ensuring consistency.
Component Registry: Custom components must be registered with the Component Registry before being used in a web app. This makes them discoverable and configurable.
Manifest Integration: Once registered, custom components are added to web app pages by referencing them in the application's manifest file, allowing developers to control the UI dynamically.

First, let's begin by creating a custom component and registering it within the Component Registry.Fluent Components are essentially just simple React `FunctionComponents` (`FC`).In this scenario, you will see how to create a new custom component implementing React `FC` and using a Utility Component provided by the Component SDK called `Card`. To use your component in a web app, the component needs to be registered with the `ComponentRegistry`.

Local references must include a dot slash

Make sure the local references include a dot slash: `'./components/Map';`

Watch the video below for steps on how to create and register your custom component, in this case, a Utility component (`MapCard`), and set the title of the card to "Hello World." Once registered in the Component Registry, it will be ready for configuration through the Mystique manifest in the next lesson.

Hello Component

This video explains how to build a custom component

Need help?

For further guidance, navigate to Registering SDK Components.Now, you are going to take your custom component (derived in the previous step) and add it to the Product Availability page on your Web App.Watch the video below for steps on how to edit the manifest document with your custom component:`{ “component” : “training.card.map” }`

Using Custom Components

This video explains how to use a custom component

Need help?

For further guidance on how to update the manifest, navigate to UX Framework - Configuration Guide > Web App Manifest Guide (section)

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 © 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.