Setting up the Manifest Document

Download the VS Code Workspace for configuring Manifests

We've provided a VS Code Workspace project, which comes preconfigured with the Manifest Schemas to enable Auto-Complete in VS Code.

Simply download the attached Zip file, extract it on your computer, and open the workspace file in VS Code.

Once complete, type "Done" into the "Your Response/Notes" form, select "Movyn John OR Randy Chan" as your instructor, and then click "Submit Assignment".

Please Note:
Before you can start following the online course practically, you will need your Fluent Account credentials.

If you have not yet received your credentials, please type "Waiting for Credentials" into the response form, or email learning@fluentcommerce.com to request them.

Please allow up to 48 hours to receive the email with details.

Please download the zip here.

Introduction to the Manifest Document

The Manifest document describes the structure and layout of a Fluent Web App, including the navigation, and all pages within the application.

The manifest document is added as an ACCOUNT level setting.

The name defined in the manifest determines the URL path required to access the Fluent Web App.

For example, a manifest declaring a name or "mywebapp" would be accessible via the following URL:

`https://[ACCOUNTID].sandbox.apps.fluentcommerce.com/mywebapp/`

The manifest also determines the context of the Web App, either "retailer" or "location", and delivers Role based visibility management, so that each Web App and screen can be configured based on each client's unique organisational structure.

The manifest also defines the data to be provided to the page via GraphQL queries.

Watch the video below to see a simple new manifest document structure...

Creating a Web App is as simple as creating an Account level setting with the following naming convention:

`fc.mystique.manifest.[appName]`

...where [appName] is the name of the web app. The Setting should be a JSON type, and store the manifest document in the JSON value. To access the web app, you would use the following URL:

`https://[ACCOUNTID].sandbox.apps.fluentcommerce.com/[appName]/`

Each Fluent Web App should a define Name, a Title, a Context, and a set of Routes.

The Context is the scope of interaction with the Fluent Order Management system.

For example, the Fluent Store Web App is set to a Location Context, since all the actions and data present within the Web App are specific to an individual Store.

A Retailer Context Web App would provide Retailer scoped actions and data management.

Routes are the URL paths that point to Pages or screens.

There are 3 types of Routes that can be configured in a Manifest:

• A Page Route - which is a direct link to a page
• A Section Route - which is a navigation grouping header
• A Reference Route - which is a reference to another manifest document called a fragment, which allows you to split and manage large manifests in separate documents

Watch the video below to see how to create a new app...

To follow along on your own training account, log in to Fluent Admin Console using the FC_FASHION retailer user:

`fc_fashion_admin`

Since this web app was configured to a `

`location`

`F_syd@fcfashion.com.au`

Note: Don't worry about the "error" text displayed - we'll fix this next!

Let's add a simple Page route to the Manifest:

A Page Route should be set to type "page", declare a relative URL path, use a foundation or page based component, and optionally a nav configuration for the main menu.

Once you have your first page, you can now set your web app's home path.

Let's see it in action...

Learn more about configuring the manifest document.