Working with the UX Framework

How-to guides for creating components with the UX Framework

Build a Webhooks Monitoring Dashboard

For Frontend Configurators (JSON) of the Fluent OMX UX Framework with access to a small custom component
Enable a visual Webhooks Monitoring Dashboard in the Fluent OMS (or any other Fluent web app)
How to add a new page to the Insights section
How to query the Event API for Webhook Audit Events
How to use the `devrel.provider.rest` component to display information from the Fluent REST APIs using standard the standard UX Component Library
Access specific attributes by name (even when they contain spaces!)
How to conditionally color code a specific table column
How to display a details drawer from a list
How to display contextual Webhook information on the Order Details screen

This is the use case where users can look up OMS orders using order ID.
Typically, the `orderById` GraphQL query is used to look up an order by ID. However, only one order can be searched at a time, and there is no wildcard search.
This article provides an alternative approach that allows users to search for orders by ID or even with a wildcard, leveraging the new `ref2` field on the order entity included in the Enhanced Order Lookup and Tagging Capabilities release.

A guide to extend Fluent STORE UI capabilities to allow the store users to have a better visibility on the fulfilments by expiry time.
The use case where the store staff would like to see number of fulfilments for the next 2 hours so that they can plan their pick and pack process accordingly.
One of the solutions is by using OOTB component and manifest to display the fulfilments number based on the expiry time. Hence, there are no custom rules nor custom component is required for this solution.
Here are the steps to archive the outcome:
- Create a new screen in fluent Store
- Create dashboard tiles

Each location has an opening hours setup that can be used for store activities. One activity could be during the fulfillment allocation phase, where the fulfillment expiry time for a store is calculated, giving store staff sufficient time to process the order before it expires.
Since opening hours can change week by week, we have created this guide to showcase how you can enable Store Managers to make these changes directly in the Fluent Store Web App.

The CC pack label on the Fluent Store can be customised via an HTML template.
This guide will take you through the setup and fragment changes required to customise the pack label.
The printed pack label can then be attached to the paper bag or parcel ready for customer collection in-store.
Enhancements can be made to the reference label content. For example, the client's logo or an additional barcode for scanning purposes can be included.

This component simplifies the addition of networks to locations by providing an easy to use selector of available networks
The basic principles can be used in other scenarios where complex fields and values may be required

For Frontend (React) Developers who are familiar with using the Fluent OMX Component SDK
Build a REST API Data Provider Component to enable the standard Component Library to render data from the Fluent Platform REST APIs
Learn how to override the data provided to components
Learn how to support template value props for dynamic input
Learn how to decorate the query results for enabling `byName` attributes access in the manifest