Fluent Commerce Logo
Docs
Help & Feedback
Sign In

Configuring Custom Components via the Manifest

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson focuses on configuring custom components using the Manifest file. We'll demonstrate how to define an interface for your component's properties, allowing it to receive data from the Manifest. Specifically, we'll show how to declare a 

`MapCardProps`
interface with properties like 
`title`
and 
`width`
, and then configure these properties within the Manifest to dynamically control the component's appearance and behavior.

Key points

  • Component Properties Interface: Defining an interface (e.g., 
    `MapCardProps`
    ) allows you to specify the data a component can receive, ensuring type safety and clarity.
  • Manifest Configuration: The Manifest file is used to configure the properties of custom components. This allows developers to control how components are displayed and function without modifying the component's code directly.
  • Dynamic Control: By configuring properties in the Manifest, you can easily change a component's behavior or appearance without recompiling or redeploying the component. This provides flexibility and simplifies updates.

In this lesson, you will learn how to configure your component via the Manifest.

Watch the video below for steps to declare the 

`MapCardProps`
interface and make your component receive these properties: 

`title: string;`

`width: CardWidth;`

Finally, see how to configure these properties in the manifest and have your component use them.

Configuring Properties in the Manifest

This video explains how to configure properties in the manifest

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