Creating and Registering a Custom Component
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 ) that can be used as building blocks for custom components, simplifying development and ensuring consistency.
`Card` - 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``Card`To use your component in a web app, the component needs to be registered with the
`ComponentRegistry`Watch the video below for steps on how to create and register your custom component, in this case, a Utility component (
`MapCard`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)
