Basic Knowledge
Essential knowledge articles related to the UK Framework (Mystique)
Users, Roles, and Permissions
Essential knowledgeThe Fluent platform provides a comprehensive user role management system, allowing for the assignment of diverse permissions via roles to regulate platform access and functionalities. Custom roles can be created and fine-tuned, ensuring users only have access to appropriate functionality and data. The system provides flexibility to specify the scope for a role at different context levels, such as Accounts, Retailers, and Locations.- A role can be assigned to multiple users, and a user can be assigned multiple roles.
- Permissions are granular access controls and protect every GraphQL or REST API operations. GraphQL permissions follow specific naming conventions.
- Context plays a pivotal role in access levels, allowing users to have role-based access to data for specific Accounts, Retailers, or Locations.
UX Configuration - Common Concepts
Essential knowledgeSome common types and conventions are used across many component definitions. These items are not directly configurable in the manifest but will often be referenced in other component definitions that use them.- The Mystique manifest configures icons, cards, and template strings. Icons come from React Icons.
- Cards have common fields, and template strings allow dynamic values. Dynamic attributes (standard, image, component) offer flexibility based on conditions.
- A selection of helper functions are also available to control and transform these values as required, for example, number, logic, i18n, array, date, and string functions.
- Additional options like TextOptions and ImageOptions provide styling choices.
Product Description - Fluent Commerce OMS
Essential knowledgeFluent Order Management components are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure. These components operate within the framework to enable the order management experience on the platform.- The main components that comprise the platform architecture are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure.
- Each Module represents a particular business domain and its associated rules and workflows. Core, Inventory, Order and fulfilment are the four Fluent modules.
- These are the web and in-store interfaces used to access module functionality.
Product Description - Fluent Commerce OMS
Essential knowledgeFluent Order Management components are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure. These components operate within the framework to enable the order management experience on the platform.- The main components that comprise the platform architecture are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure.
- Each Module represents a particular business domain and its associated rules and workflows. Core, Inventory, Order and fulfilment are the four Fluent modules.
- These are the web and in-store interfaces used to access module functionality.
Inventory Interface
Essential knowledgeThe Inventory interface of the Fluent Web app provides comprehensive inventory management capabilities:- Inventory visibility
- Inventory allocation
- The total quantity of stock for a specific item (stock on hand(SOH)) and the status of that inventory
- Available to promise inventory levels
- Inventory buffers to reduce overselling of products
- The Fluent Web app's Inventory interface offers a comprehensive suite of capabilities, including inventory visibility, allocation, total stock quantity (stock on hand), inventory status, available-to-promise levels, and strategically implemented buffers to prevent product overselling.
- The interface is equipped with various configurations, such as Inventory Catalogues, Control Groups, Virtual Catalogues, Cross-Catalogue Views, and Location Inventory Views, providing users with versatile tools to tailor their inventory management approach according to specific business needs and scenarios.
Product Description - Fluent Commerce OMS [Superseded - Document Version 1.0]
Essential knowledgeFluent Order Management components are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure. These components operate within the framework to enable the order management experience on the platform.- The main components that comprise the platform architecture are Web Apps, Modules, Order Management Experience (OMX), Orchestration Engine, and Cloud Infrastructure.
- Each Module represents a particular business domain and its associated rules and workflows. Core, Inventory, Order and fulfilment are the four Fluent modules.
- These are the web and in-store interfaces used to access module functionality.
Sources Interface
Essential knowledgeThe Sources interface provides inventory and batch-processing metrics visibility, enabling data ingestion and processing efficiency tracking. It includes:- Sources Dashboard – Monitors inventory updates, failure rates, and processing times.
- BPP Metrics Dashboard – Tracks batch-processing efficiency, showing processed, changed, and unchanged records with a date range filter of up to 31 days.
Both dashboards use structured data, support trend analysis within configurable time frames, and require METRICS_VIEW permission for access.- Sources Dashboard provides real-time tracking of failed updates, update frequency, total received updates, and estimated processing times.
- BPP Metrics Dashboard enhances visibility into batch data ingestion by tracking record modifications.
Extending the UX Framework with the Component SDK
Essential knowledgeThis lesson introduces the Component SDK, a powerful toolkit for extending the UX Framework Component Library. We'll explore the core concepts behind the SDK, covering its purpose, capabilities, and benefits. By the end of this lesson, you'll understand how the Component SDK empowers developers to create custom, OMX-ready components for Fluent Web Apps, streamlining development and ensuring consistent user experiences.- What is the Component SDK? A development kit for building custom components for the UX Framework Component Library using modern, developer-friendly tools like React and TypeScript.
- What can be extended? Developers can create a wide range of components, including content, layout/page, interaction, form field components, and template helpers, significantly expanding the functionality of the standard library.
- Why use the Component SDK? The SDK simplifies custom component creation by handling complex tasks like manifest configuration, authorization, data access, localization, and workflow interaction, allowing developers to focus on component logic and design. It also leverages the Fluent OMX Design System (based on Material-UI) for consistent and high-quality UX.
Setting up the Manifest Document
Essential knowledgeThis lesson introduces the Manifest document, a crucial component in defining the structure and layout of Fluent Web Apps. We'll cover how to set up your development environment with a pre-configured VS Code workspace, understand the key elements of a Manifest document, and learn how to create a new web app by defining an account-level setting. We'll also explore the different types of routes used in Manifests and walk through creating a simple page route. This setup and introduction will prepare you for more advanced Manifest configurations in later lessons.- VS Code Setup: Use the provided VS Code workspace for Manifest editing.
- Manifest Definition: The Manifest defines a Fluent Web App's structure, layout, navigation, and data.
- Account Setting: Manifests are stored as account-level settings.
- Web App Access: Web apps are accessed via URLs based on the Manifest's appName.
- Key Elements (Name, Title, Context, Routes): Manifests define these core elements.
- Route Types: Page, Section, and Reference routes define navigation within the app.
UX Framework - Configuration Guide
Essential knowledgeThe OMX UX Framework delivers configuration-based solution implementation for UIs (Web Apps). Configuration is managed in a JSON document called the OMX Web App Manifest.- The OMX Web App Manifest document is essential for configuring Fluent Platform web apps and is stored in a setting following the convention "fc.mystique.manifest.<appname>". For instance, Fluent Commerce UIs have settings like "fc.mystique.manifest.oms" and "fc.mystique.manifest.store."
- The document, configured in the ACCOUNT context, is a specific JSON structure that includes sections like App-Level Configuration, Route-Level Configuration, and Local Development Options. Each web app defined within an account has a unique URL, and the Manifest guides app development, covering aspects like navigation, screen layouts, data sources, and user actions.
- Manifest updates can be done through Console/settings or directly via the API, with the ability to partition the document for manageability.
Manifest Creation and Customization
Essential knowledgeThis series of lessons guides you through building a feature to manage storage areas within the Fluent Store web app. We'll cover creating a new Manifest fragment, adding it to account settings, and referencing it in the main Manifest. We'll then add a List component to display storage areas, configure a data source for the list using a page query, and create a details page for individual storage areas. Finally, we'll explore working with dynamic values, including date formatting, array access, image rendering, and configuring i18n language translation.- Manifest Fragment Creation: Learn to create and configure a new Manifest fragment for managing storage areas.
- Account Settings Integration: Integrate the new fragment into account settings and reference it in the main Manifest.
- List Component Integration: Use the List Component to display storage area data.
- Data Source Configuration: Use the
`activeLocation` context to configure a page query as a data source for the List Component. - Details Page Creation: Create a details page for individual storage areas with a dedicated page query.
- Dynamic Value Handling: Learn to work with dynamic values using formatters (e.g.,
`dateStringFormatter`), array access, attribute retrieval by name, and image rendering. - i18n Configuration: Configure i18n language translation keys for the web app.
Understanding Manifest Structure
Essential knowledgeThis lesson details the structure of Manifest documents, covering both main web application manifests and fragment manifests. We'll explore the required fields and optional configurations for the main manifest, including context, routes (section, page, and reference), and plugin integration. We'll also examine the simpler structure of fragment manifests and how they contribute to managing complex UI configurations.- Manifest Types: There are two types of Manifests: main and fragment.
- Main Manifest Structure: Required fields include manifestVersion, name, title, context, and routes. Optional fields include homePath.
- Context Configuration: Defines whether the app operates at a LOCATION or RETAILER level and allows role-based access control.
- Routes (Section, Page, Reference): Routes define the navigation menu. Section routes group menu items, Page routes link to specific pages, and Reference routes include fragment manifests.
- Fragment Manifests: Fragment manifests contain only manifestVersion and routes, allowing for modular management of large Manifest configurations.
- Plugin Integration: The Manifest can include references to custom component plugins hosted externally.
Introduction to the Component Library
Essential knowledgeThis lesson introduces the OMX Component Library, a collection of pre-built, configurable UI components designed for use in Fluent Web Apps. Unlike standard UI components, these components are specifically built to interact natively with the Fluent Platform. We'll explore the various categories of components within the library, including Foundation, Content, Layout, Interaction, and Field Components, and understand their distinct roles in building user interfaces.- Fluent Platform Integration: OMX Components seamlessly integrate with the Fluent Platform.
- Component Categories: The library includes Foundation, Content, Layout, Interaction, and Field Components, each with distinct roles.
- Component Hierarchy: Content and Layout components are typically children of Foundation Components.
- Mobile Responsiveness: Components should be designed with mobile responsiveness in mind.
- Interaction Components: These enable user interaction with the application.
- Field Components: Automatically rendered form elements, essential for complex workflow input, are not configured via the manifest.
Getting Started Configuring Fluent Big Inventory Web App
Essential knowledgeThe Fluent Big Inventory Web App is pre-configured with standard functions that provide the interface for managing products, inventory, feeds, and sources and serve as a starting point for your projects.The default UX templates are hosted on the platform, so you don't have to create the manifest settings unless you need to customize the existing baseline configuration.- The Fluent Big Inventory Web App comes with pre-configured standard functions, offering a user-friendly interface for effective management of products, inventory, feeds, and sources.
- Default UX templates are readily available on the platform, eliminating the need to create manifest settings unless customization of the existing baseline configuration is required, streamlining the setup process for a seamless user experience.
UX Framework Overview
Essential knowledgeThe OMX UX Framework, or Mystique, delivers configuration-based solution implementation for UIs (Web Apps) that understand the Fluent Platform. It enables UIs to react to changes within workflows and provides best-in-class user experience and design. Web apps can be built using code-free configuration, utilising a rich library of ready-to-use UI Components. Customising UIs to meet specific business requirements using Component SDKs is also possible. Configuration is managed in a JSON document called the OMX Web App Manifest.
- Dynamic user management experience.
- Configurable left-navigation menu items.
- Dynamic views, labels, and fields based on configuration and GraphQL queries.
- Dynamic and contextual user actions based on workflow configuration.
- Ability to create and edit all entities, including non-workflow entities.
- Customise UIs to meet specific business needs and processes.
- Ability to configure contextual actions based on roles and process states.
- Enables centralised management of orders, products, inventory, fulfillments, and locations.
Escaping / unescaping of values in UX Framework
Essential knowledgeCharacter escaping and unescaping are crucial for data integrity and security in UX frameworks. This document focuses on the Mustache.js templating engine, which escapes HTML by default to prevent XSS attacks. When special characters like ampersands need to be displayed, the framework offers unescaping methods to ensure correct and secure rendering.This overview highlights the significance of proper value escaping and the techniques for accurately rendering special characters within the UX framework.- Mustache.js Templating: The UX framework utilizes mustache.js for templating, which automatically escapes HTML characters. This is important for preventing XSS (Cross-Site Scripting) attacks and ensuring data is displayed as intended.
- Unescaping Variables: To display special characters properly, such as ampersands, you must unescape variables using triple mustaches, e.g.,
`{{{variable}}}`, or the `&` symbol in the variable tag, e.g., `{{&variable}}`. - Correct Display of Values: Escaping or unescaping variables correctly is crucial for the accurate representation of data within the UX. This ensures that special characters are rendered as intended, maintaining the integrity of the information displayed to users.
