Docs
Authors:
Randy Chan, Anita Gu
Changed on:
21 May 2025
What to ExpectThis is a tutorial on how to create a list page on OMS. It also contains some code templates that can be used for future reference. Here are the steps to create an OMS list page:
Step 1: Build the GraphQL query and make sure it returns a result1POST: {{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 
Step 2: Creating a new empty pageBelow is a template for creating 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}The next step is to 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}Next, go to the Language Setting and change the values accordingly.
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. The `fc.list` setup can be found here.
Except as otherwise stated in the Extend Knowledge Content site policy, the content on this page is licensed under the Creative Commons Attribution 4.0 Licence, and any code samples that appear on this page are licensed under the Apache 2.0 Licence, unless any code sample forms part of the Fluent Order Management Platform code. Neither of these licences apply to any content on any other page that can be reached via a link on this page unless otherwise specified on that other page. If you wish to use any of the Extend Knowledge Content, you must do so in compliance with the licenses referred to above and the Extend Knowledge Content site policy, including attribution in the manner set out on this page.
Copyright © 2024-2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.
