Create a simple list page in OMS Webapp under 10 minutes

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

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}

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},

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}

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}

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",

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}

Click here for more details on configuring a page manifest and the `fc.list` setup can be found here.

Randy Chan

Fluent Commerce - Expert Services

More from this author

Randy Chan

Fluent OMS webapp UI: get orders by product status

Imagine that you have a business use case where the user would like to see all orders that contain a particular product (e.g. the product is in INACTIVE or RECALLED status) on the web app. This would be possible with the new release feature, which allows us to search by product order with the filter panel UI component.

With the above features, the developer can now achieve the outcome by just configuring the UX manifest without any custom components or custom rules.

8 May 2025

25 min read

Randy Chan

How to enable location store user to update the location store hours with custom UI Component

At a high level, each location has an opening hours setup that can be used for store activities. One example is during the fulfilment allocation phase, the OMS will calculate the fulfilment expiry time for the store, and the store staff will have sufficient time to process the fulfilment before it expires.
So, in the real world, the opening hours can change week by week, so one of the features that can be added to the OMS Store is to allow the Store Manager to update the opening Schedule hours directly in OMS via the Fluent STORE app.
This guide makes it easier for the store user to update the opening schedule for a location.

20 May 2025

15 min read