Cameron Johns

This lesson focuses on retrieving data for our map visualization. We'll explore how to access data from the page query defined in the manifest document, rather than making GraphQL queries directly within the component. This approach promotes reusability and configurability. We'll specifically target retrieving a list of locations that stock a given product, a crucial step in displaying product availability on the map.

This lesson combines adding map pins with the concept of nested components. Building on the Google Map integration, we'll show how to dynamically add pins (child components) to the map (parent component). This is crucial for visualizing location data and illustrates building complex, modular UIs using nested components. You'll learn how to place markers representing locations and how this parent-child relationship contributes to organized, reusable UI elements.

This lesson explores the creation and registration of custom template helpers within the Component SDK. Template helpers are powerful utilities that can be used within Manifest documents for tasks like styling, formatting, and calculations. We'll demonstrate how to create a custom template helper, in this case, one that bolds entity references, showcasing how to leverage the

`TemplateRegistry`

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.

This lesson walks through the implementation of a custom form field component for a Stock Reservation user action. We'll build a field that captures

`locationRef`

`quantity`

`FormFieldProps`

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.

This lesson addresses the best practice of avoiding hardcoded values, specifically API keys, within components. We'll explore how to use the

`useSettings`

This 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.

This lesson focuses on configuring custom components using the Manifest file. We'll demonstrate how to define an interface for your component's properties, allowing it to receive data from the Manifest. Specifically, we'll show how to declare a

`MapCardProps`

`title`

`width`

This lesson covers the deployment process for custom component plugins. Unlike server-side plugins, component plugins are frontend JavaScript bundles that can be hosted on any web server. We'll explore the key steps involved in preparing your plugin for production, including versioning, bundling, and deployment, and how to reference the deployed plugin in the manifest document.

This lesson provides a step-by-step guide to downloading, installing, and setting up a new Component SDK project. You'll learn how to prepare your development environment, install necessary dependencies, and run the project locally. We'll also cover the crucial step of referencing your local plugin within your Fluent Web Apps manifest, enabling you to integrate your custom components into your applications.

This lesson introduces the concept of custom form fields within the UX Framework. While standard form fields are automatically generated based on data types, developers can create custom field components to handle more complex data structures or enhance the user experience for specific scenarios, such as workflow user actions, GraphQL mutations, and list filters. In our client scenario, we'll focus on building a custom form field to capture stock reservation details, which requires a JSON object containing

`locationRef`

`quantity`

This 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.

This module provides an introduction to the Fluent OMX UX Framework (Mystique) and its role in building user interfaces for the Fluent Platform. We'll explore the core concepts behind the framework, how it functions, and the basic structure of a Fluent Web App. This foundational knowledge will prepare you for more advanced topics in later modules.

This 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.

This lesson focuses on adding interactivity to the map pins. Building on the previous styling enhancements, we'll use React's

`useState`

This lesson completes the custom form field component by implementing the crucial step of outputting the captured data to the form's submitted payload. We'll learn how to use the

`onChange`

`FormFieldProps`

`locationRef`

`quantity`

This lesson focuses on fetching data within a custom form field using the

`useQuery`

`useQuery`

`useAuth`

This 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.

This lesson focuses on enhancing the visual representation of our map pins through styling. We'll explore how to add color to the map pins, improving their visual appeal and potentially conveying additional information. This styling process will demonstrate how to customize the look and feel of custom components.

This lesson covers the process of unit testing custom components using the tools provided within the Component SDK: Jest and React's test renderer. We'll walk through the steps of creating mock objects for dependencies (authentication, data, attributes), arranging the test environment, acting by rendering the component with the mocks, and asserting the output using snapshot testing. This process ensures the reliability and correctness of your custom components.

This 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.

This lesson demonstrates how to integrate a third-party component, specifically a Google Maps React component, into your custom map card. We'll cover the installation process using Yarn and discuss best practices for selecting third-party components for use in Fluent Web Apps. We'll also explore the option of using the map in development mode without an API key.

This lesson explores the use of Dynamic Attributes within components, a powerful mechanism for making component content configurable. We'll demonstrate how to create a component, in this case an

`InfoBox`

This lesson details how to enhance custom form fields by adding structure, styling, and interactive controls. We'll focus on improving the user experience and data capture capabilities of our custom field component. This involves using Material-UI for styling, organizing the field's layout, and integrating pre-built form controls from the component library, such as the

`QuantitySelector`

`useEffect`

This lesson explores the

`useAuth`