Cameron Johns

Senior Technical Consultant in Engineering

I authored

articles. I write about:

Platform flexibility

UI Component SDK

Component

UX framework

Configuration manifest

Field components

Hook

Implementation

Template

Product List Page (PLP)

Product Detail Page (PDP)

Reservation

Component categories

Interaction components

Content components

Layout components

Foundation components

Web Apps

Shared attributes

Webhook

Authentication API

Active user

Location

User management

Roles and Permissions

Retailer

External mappings

Docs I have written

Accessing Page Query Data

Edited 42 days ago

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.

Adding Nested (Child) Components

Edited 42 days ago

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.

Creating Custom Template Helpers

Edited 42 days ago

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`

and its utility methods for generating formatted HTML.

Creating and Registering a Custom Component

Edited 42 days ago

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.

Implementing a Custom Form Field

Edited 42 days ago

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`

and

`quantity`

and outputs a JSON object structured as required by the Ruleset. The lesson covers configuring the user action button, creating the custom field component using React Function Components and the

`FormFieldProps`

interface, registering the field, and updating the workflow definition to use the new custom field type.

Client Scenario: Building a Product Availability Map

Edited 42 days ago

This lesson introduces a practical client scenario: visualizing product availability on a map. Building upon the foundation laid in the UX Framework course, we'll enhance the Fluent Store app's Product Availability screen by adding a map that displays nearby store locations and stock information for a selected product variant. This hands-on lab will guide you through configuring the product lookup and detail availability pages, setting the stage for creating custom components in subsequent lessons.

Building Custom Components with the Component SDK

Edited 42 days ago

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.

Configuring Components with Settings

Edited 42 days ago

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

`useSettings`

hook provided by the Component SDK to retrieve configuration values from platform settings. This approach makes components more configurable and reusable across different clients and environments, simplifying maintenance and updates.

Manifest Creation and Customization

Edited 42 days ago

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.

Configuring Custom Components via the Manifest

Edited 42 days ago

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`

interface with properties like

`title`

and

`width`

, and then configure these properties within the Manifest to dynamically control the component's appearance and behavior.

Deploying a Custom Component Plugin

Edited 42 days ago

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.

Setting Up Your Component SDK Project

Edited 42 days ago

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.

Extending Forms with Custom Field Components

Edited 42 days ago

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`

and

`quantity`

Introduction to the Component Library

Edited 42 days ago

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.

Introduction to the Fluent OMX: Configure - UX Framework

Edited 42 days ago

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.

Extending the UX Framework with the Component SDK

Edited 42 days ago

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.

Make Your Component Interactive

Edited 42 days ago

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

`useState`

hook to manage the state of pin interactions, specifically clicks. This will enable us to trigger actions when a pin is clicked, making the map more dynamic and responsive.

Completing the Custom Form Field: Outputting the Result

Edited 42 days ago

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`

event provided by the

`FormFieldProps`

to pass the structured data (containing

`locationRef`

and

`quantity`

) back to the form. This ensures that the user's input is included in the data posted when the form is submitted. We'll also demonstrate how to verify the output using browser developer tools.

Fetching Data with the useQuery Hook

Edited 42 days ago

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

`useQuery`

hook. We'll move away from relying on page query data and instead directly query the Fluent GraphQL API to retrieve a list of nearby locations with product stock. This involves defining data structures for query results, storing the query in a constant, and using the

`useQuery`

hook to execute the query with dynamic parameters derived from the form's context and the user's context (via

`useAuth`

). We will then render the results in a selectable list using radio buttons.

Setting up the Manifest Document

Edited 42 days ago

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.

Style and Theme Your Component

Edited 42 days ago

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.

Unit Testing Custom Components

Edited 42 days ago

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.

Understanding Manifest Structure

Edited 42 days ago

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.

Integrating a Third-Party Map Component

Edited 42 days ago

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.

Configuring Components with Dynamic Attributes

Edited 42 days ago

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`

that appears when a map pin is clicked, and how to fully configure the information displayed within it directly from the Manifest using Dynamic Attributes. This approach allows for flexible and data-driven component content.

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Edited 42 days ago

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`

. We'll also cover best practices like using the

`useEffect`

hook for debugging.

Accessing User and Location Context with the useAuth Hook

Edited 42 days ago

This lesson explores the

`useAuth`

hook provided by the Component SDK, which grants access to crucial information about the currently logged-in user. We'll learn how to retrieve user details, including roles/permissions and the current location/retailer context. Specifically for location-context web apps like Fluent Store, we'll focus on using this hook to access the currently selected store's information, such as longitude and latitude coordinates, which will be essential for our map implementation.