Fluent Commerce Docs

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

Content in this track:

Introduction to the Fluent OMX: Configure - UX Framework

Introduction to the Component Library

Setting up the Manifest Document

Understanding Manifest Structure

Manifest Creation and Customization

End Of Track

Content in this track: Understanding Manifest Structure

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

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.

Key points

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.

Top Level Manifest Structure

There are two types of manifest document formats. The primary type is the main web application manifest, and the second type is a fragment that can be referenced from the main Manifest document.The main manifest document structure is as follows:

1{
2     "manifestVersion": "2.0",
3     "name": "store",
4     "title": "Fluent Store",
5     "context": {
6         "level": "location"
7     },
8     "routes": MystiqueRoute[]
9 }

The required fields include:

manifestVersion
name
title
context
routes

Additionally, a main manifest can also set the homePath, which is the default path to load on login.The Context configuration defines whether the app operates at a LOCATION or a RETAILER level. You can also declare that a user should have a specific role assigned in that context to be allowed access to the App.Routes drive the Navigation menu drawer. The simplest type of Route is a Section route, which defines the navigation group header. For example, you may want to group a number of top-level menu items under a section called "Admin," "Customer Service," or "Inventory Management." No alt provided

The primary Route type is a page route. This defines a specific page to display when the user clicks on the navigation item. No alt provided

Finally, there are Reference routes, which provide manifest fragmentation capability, so that you do not need to manage the whole UI configuration in a single (and very large) JSON document.`{`
` "type": "reference",`
` "settingName": "fc.mystique.manifest.servicepoint.fragment.pickandpack"`
`}`The structure of a fragment Manifest is as follows:`{`
` "manifestVersion": "2.0",`
` "routes": MystiqueRoutes[]`
`}`Finally, the Manifest document can also be configured to read custom plugins containing custom components referenced within the Manifest.`"plugins": [{`
` "name": "Example",`
` "src": "https://example.com/bundle.js"`
`}]`The Configuration Guide provides more information and instructions on configuring each part of the Manifest document.