Building Custom Components with the Component SDK

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:

• `useState`

  hook handles all of the state management of an object for you

• `useEffect`

  hook for handling side effects and managing the component lifecycle

The Component SDK provides some Fluent-specific hooks to make working with the Fluent platform quicker and simpler. 

Some examples include:

• `useAuth`

  hook provides access to the currently logged-in user context

• `useI18n`

  hook provides access to the Fluent localization capability

• `useQuery`

  hook lets you interact with the Fluent GraphQL API​

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