Building Custom Components with the Component SDK
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson dives into the practical application of the Component SDK, focusing on how to build custom components for OMX Web Apps. We'll explore the different types of custom components you can create, the powerful hooks available for interacting with the Fluent platform, and the utility components that streamline development and ensure consistency. We'll also touch on the crucial concept of component registries.
Key points
- Types of Custom Components: The Component SDK enables the creation of custom view components (for page content) and custom field components (for workflow user actions), allowing developers to tailor interfaces to specific needs.
- Hooks for OMX Integration: Fluent-specific React hooks (e.g., ,
`useAuth`,`useI18n`) provide easy access to platform functionalities like authentication, localization, and API interaction, simplifying complex tasks.`useQuery` - Utility Components for Consistency: The SDK offers utility components (e.g., Card, Loading, Drawers) that serve as building blocks for custom components, ensuring a consistent look and feel, theme responsiveness, and mobile compatibility.
- Component Registries: Custom components must be registered with the appropriate registry (Component, Field, or Template) before they can be used in OMX Web Apps, making them discoverable and usable within the framework.
Custom Components
The Component SDK lets you build new content (or view) components, field components, and template functions for use within the OMX Web Apps.
Fluent-specific custom components include:
- Custom View Component: A component that you can drop onto a page.
- Custom Field Component: A component that you can hook up to a workflow user action to accept new input types, mutations, or list filters.
Custom components, such as cards, form fields, and pages, can be created to fit into existing screens/interfaces.
Hooks
Custom components can easily interact with OMX functionality via the provided hooks.
Hooks are a React feature and are basically an easy way to add functionality to your components (such as making an API call and automatically showing the updates when it finishes) without having to implement it yourself.
Some examples of React hooks include:
- hook handles all of the state management of an object for you
`useState` - hook for handling side effects and managing the component lifecycle
`useEffect`
The Component SDK provides some Fluent-specific hooks to make working with the Fluent platform quicker and simpler.
Some examples include:
- hook provides access to the currently logged-in user context
`useAuth` - hook provides access to the Fluent localization capability
`useI18n` - hook lets you interact with the Fluent GraphQL API
`useQuery`
This means that with a line or two of code, you can make your custom components:
✓ load information from our (authenticated) APIs
✓ use our i18n translation services
✓ show modals or drawers over the top of the page
✓ check a user's roles to show/hide things on the UI
✓ check what actions are currently available for a given entity (Order/Wave/Product, etc) in the workflow and generate buttons and forms to perform these actions (this is what we mean when we say it "adapts to your workflows")
Utility Components
Some utility components are provided to make building custom components easier and more consistent.
The UX Framework provides some "component primitives" that can be used as base components to build more complex components on top. The advantage of this is that these utility components:
✓ provide a consistent look and feel
✓ update according to theme options
✓ enable mobile responsiveness
Examples of utility components include:
- Card
- Children
- DynamicValue
- Loading
- Drawers, Modals, and Toasts
Registries
Before a custom component can be used in an OMX web app, it must be registered with one of the three registries:
- Component Registry - for standard in-page components
- Field Registry - for interactive form field components
- Template Registry - for adding new template helpers
Want to learn more?
Learn more about registering SDK components
