Fluent Commerce Logo
Community
No alt text provided

Create a simple list page in OMS Webapp under 10 minutes

No alt text provided
Author: Randy Chan

Published: 02-03-2025

10 min read

#Json

Build the GraphQL query and make sure it is returning a result:

1POST: {{fluentApiHost}}/graphql
2
3
4Variables:
5{
6     "catalogue":"PC:MASTER:5000299"
7}
8
9Query:
10query myVariantProducts ($catalogue: String!) 
11    {  myVariantProducts: variantProducts(catalogue: {ref: $catalogue})
12        {        
13            edges{
14                node{
15                    ref
16                    id
17                    gtin
18                    name
19                    status            
20                    }                    
21                }    
22        }
23    }
24

Language: graphqlschema

Name: myVariantProducts query

Description:

sample query on variantProduct

No alt provided

Before we create a new setting, here is a quick template for a new empty page:

1{
2    "manifestVersion": "2.0",
3    "routes": [
4        {
5            "type": "section",
6            "nav": {
7                "label": "{{replace:label}}",
8                "icon": "view_list"
9            },
10            "pages": [
11                {
12                    "path": "{{replace:pathName}}",
13                    "type": "page",
14                    "component": "fc.page",
15                    "nav": {
16                        "label": "{{replace:navlabel}}",
17                        "icon": "MdTab"
18                    },
19                    "props": {
20                        "title": "{{replace:pageTitle}}"
21                    },
22                    "descendants": [
23                        
24                    ]
25                }
26            ]
27        }
28    ]
29}

Language: json

Name: fc.mystique.manifest.oms.fragment.myVariantProducts

Description:

Manifest page template.

For the fc.list, there are two parts to cover.  

1. Page Query 

1"data": {
2    "query": "query myVariantProducts ($catalogue: String!) {  myVariantProducts: variantProducts(catalogue: {ref: $catalogue}){        edges{            node{       attributes { name value type}         ref                id                gtin                name                status            }                    }    }}",
3    "variables": {
4        "catalogue": "PC:MASTER:{{activeRetailer.id}}"
5    }
6},

Language: json

Name: Page query

Description:

Basically to cover the GraphQL query and variable to manifest JSON format.

2. the

`fc.list`
component in the Page's descendants section.

1"component": "fc.list",
2    "props": {
3        "dataSource": "myVariantProducts",
4        "filter": {
5            "enabled": true,
6            "exclude": [
7                "workflowRef",
8                "workflowVersion"
9            ]
10        },
11        "attributes": [
12            {
13                "label": "i18n:fc.myVariantProducts.index.list.column.ref.heading",
14                "template": "{{node.ref}}"
15            },
16            {
17                "label": "i18n:fc.myVariantProducts.index.list.column.name.heading",
18                "template": "{{node.name}}"
19            },
20            {
21                "label": "i18n:fc.myVariantProducts.index.list.column.gtin.heading",
22                "template": "{{node.gtin}}"
23            },
24            {
25                "label": "i18n:fc.myVariantProducts.index.list.column.status.heading",
26                "template": "{{node.status}}"
27            }
28        ]
29    }
30}

Language: json

Name: fc.list component

Description:

the fc.list component the content should be the output of the page query. 

Let's bring all the details and build a new manifest setting: 

Name:

`fc.mystique.manifest.oms.fragment.myVariantProducts`

Context: ACCOUNT

Context ID: 0

Value Type: JSON

JSON Value:

1{
2    "manifestVersion": "2.0",
3    "routes": [
4        {
5            "type": "section",
6            "nav": {
7                "label": "i18n:fc.myVariantProducts.nav",
8                "icon": "view_list"
9            },
10            "pages": [
11                {
12                    "path": "myVariantProducts",
13                    "type": "page",
14                    "component": "fc.page",
15                    "data": {
16                        "query": "query myVariantProducts ($catalogue: String!) {  myVariantProducts: variantProducts(catalogue: {ref: $catalogue}){        edges{            node{       attributes { name value type}         ref                id                gtin                name                status            }                    }    }}",
17                        "variables": {
18                            "catalogue": "PC:MASTER:{{activeRetailer.id}}"
19                        }
20                    },
21                    "nav": {
22                        "label": "i18n:fc.myVariantProducts.index.nav",
23                        "icon": "MdTab"
24                    },
25                    "props": {
26                        "title": "my VariantProducts List"
27                    },
28                    "descendants": [
29                        {
30                            "component": "fc.list",
31                            "props": {
32                                "dataSource": "myVariantProducts",
33                                "filter": {
34                                    "enabled": true,
35                                    "exclude": [
36                                        "workflowRef",
37                                        "workflowVersion"
38                                    ]
39                                },
40                                "attributes": [
41                                    {
42                                        "label": "i18n:fc.myVariantProducts.index.list.column.ref.heading",
43                                        "template": "{{node.ref}}"
44                                    },
45                                    {
46                                        "label": "i18n:fc.myVariantProducts.index.list.column.name.heading",
47                                        "template": "{{node.name}}"
48                                    },
49                                    {
50                                        "label": "i18n:fc.myVariantProducts.index.list.column.gtin.heading",
51                                        "template": "{{node.gtin}}"
52                                    },
53                                    {
54                                        "label": "i18n:fc.myVariantProducts.index.list.column.status.heading",
55                                        "template": "{{node.status}}"
56                                    }
57                                ]
58                            }
59                        }
60                    ]
61                }
62            ]
63        }
64    ]
65}

Language: json

Name: fc.mystique.manifest.oms.fragment.myVariantProducts

Description:

myVariantProducts manifest

Here are the quick steps to form the page manifest JSON:

  • Use the Manifest page template as a starting point of the page manifest, and replace all the variables {{replace* with i18n:*value..etc;
  • Add the "data" section after "component":"fc.page";
  • Add the "component": "fc.list" component inside the Page descendants section.


Next, go to the Language Setting. 

1"fc.myVariantProducts.nav": "myVariantProducts",
2"fc.myVariantProducts.index.nav": "my Variant Products",
3"fc.myVariantProducts.index.title": "my VariantProducts List",
4"fc.myVariantProducts.index.list.column.ref.heading": "ref",
5"fc.myVariantProducts.index.list.column.id.heading": "id",
6"fc.myVariantProducts.index.list.column.gtin.heading": "gtin",
7"fc.myVariantProducts.index.list.column.name.heading": "name",
8"fc.myVariantProducts.index.list.column.status.heading": "status",

Language: json

Name: Label values setup

Description:

Label values


Finally, add a new reference in the manifest route so that users can access this page via the left navigator panel.


1,
2{
3    "type": "reference",
4    "settingName": "fc.mystique.manifest.oms.fragment.myVariantProducts"
5}

Language: json

Name: Add the reference/setting Name to fc.mystique.manifest.oms

Description:

reference link

No alt providedNo alt provided


Click here for more details on configuring a page manifest and the

`fc.list`
setup can be found here.



Randy Chan

Randy Chan

Fluent Commerce - Expert Services

Disclaimer: All information and resources found on community.fluentcommerce.com are based on the opinions of the author (unless otherwise noted). All information is intended to inspire and motivate well thought through technical decisions inline with Fluent Commerce recommended practices and principles.

Copyright © 2025 Fluent Commerce

Fluent Logo