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: Configuring Components with Dynamic Attributes

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson explores the use of Dynamic Attributes within components, a powerful mechanism for making component content configurable. We'll demonstrate how to create a component, in this case an

`InfoBox`

that appears when a map pin is clicked, and how to fully configure the information displayed within it directly from the Manifest using Dynamic Attributes. This approach allows for flexible and data-driven component content.

Key points

Dynamic Content: Learn how Dynamic Attributes enable you to configure the information displayed within a component without modifying its code.
Manifest-Driven Configuration: Understand how to define and configure Dynamic Attributes within the Manifest, controlling the content of components.
InfoBox Example: This lesson uses an InfoBox component that appears on pin click as a practical example of using Dynamic Attributes.
Flexibility and Reusability: Dynamic Attributes make components more flexible and reusable, as their content can be easily adapted through Manifest configuration.

Watch the video below to learn how to use

`DynamicAttributes`

within your components.

`DynamicAttributes`

mean that the information to be displayed in the component is configurable.

For example, the

`fc.card.attribute`

component displays the fields specified in the manifest configuration for that instance of the card. Similarly, the

`fc.list`

component columns are dynamically configured from the manifest.

For this scenario, a small

`InfoBox`

will 'pop up' when a location pin is clicked on the map. The information displayed in this

`InfoBox`

component will be fully configurable from the Manifest by using

`DynamicAttributes`

.

Right-click to download the code for the InfoBox.tsx file here.

To learn more about Dynamic Attributes, see UX Configuration - Common Concepts > Dynamic Attributes section

Using DynamicAttributes Within Components

This video explains how to use

`DynamicAttributes`

within components

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.