Enable bulk order Cancel in the UI by using the action property in the LIST component

How-to Guide

Author:

Fluent Commerce

Changed on:

8 July 2024

Key Points

To enable cancelling orders via the UI the cancel order ruleset needs to be used
Update the mystique manifest to show the list action.

Steps

Check cancel order ruleset in the workflow

Ensure that all of the order workflows contain the `cancelOrder` ruleset. For example:

1{
2    "name": "OrderCancel",
3    "description": "Order is Cancelled from admin console",
4    "type": "ORDER",
5    "subtype": "CC",
6    "eventType": "NORMAL",
7    "rules": [
8        {
9            "name": "{{accountId}}.core.SetState",
10            "props": {
11                "status": "CANCELLED"
12            }
13        },
14        {
15            "name": "{{accountId}}.order.SendEventForAllFulfilments",
16            "props": {
17                "eventName": "CancelFulfilment"
18            }
19        }
20    ],
21    "triggers": [
22        {
23            "status": "CREATED"
24        },
25        {
26            "status": "RECEIVED"
27        },
28        {
29            "status": "BOOKED"
30        }
31    ],
32    "userActions": [
33        {
34            "context": [
35                {
36                    "label": "CANCEL ORDER",
37                    "type": "PRIMARY",
38                    "modules": [
39                        "adminconsole"
40                    ],
41                    "confirm": true
42                }
43            ],
44            "attributes": []
45        }
46    ]
47},

Enable List User Action in the order manifest

1{
2  "component": "fc.list",
3  "props": {
4    "defaultPageSize": 100,
5    "dataSource": "orders",
6    "actions": [
7      {
8        "type": "UserAction",
9        "name": "OrderCancel"
10      }
11    ],
12    "responsiveness": "card",
13    "filter": {
14      "enabled": true,
15      "exclude": [
16        "workflowRef",
17        "workflowVersion",
18        "totalPrice",
19        "totalTaxPrice"
20      ]
21    }
22}

test the change in the UI

As you can see in the ruleset trigger section, Only `CREATED`, `RECEIVED`, or `BOOKED` status will enable the `orderCancel` feature. Therefore, the first record on the list must have the right status to see the checkbox: No alt provided

An example of List that does not show the checkboxes

Here is an example where the first entry in the list is not in `CREATED`, `RECEIVED`, or `BOOKED` status: No alt provided

Filtering the order list result

The user can filter the list by using the status: No alt provided

Test bulk cancel

Select 2 entries and click the CANCEL ORDER button; a confirmation will be displayed. By clicking CONFIRM, both orders will move to `CANCELLED`. No alt provided

Knowledge Tracks Related To This Topic

Getting Started Configuring Fluent OMS Web Apps

Fluent OMS Overview

Getting Started Configuring Fluent OMS (webapps)

Overriding the default manifest

Settings Creation and Editing Mutations

Create a Simple List Page in OMS Webapp

Enable bulk order Cancel in the UI by using the action property in the LIST component

Webapp User Action visibility by using entity's attribute value

Hide UserAction button via OMS Manifest

Configure a drawer via manifest

Using the Setting Form Component

Adding Header Components to an OMX Web App (Store, OMS, Inventory etc)

Configure UI for Mixed Baskets

Building Better Filters: From Reusable Components to Customer Search

Customizing Create/Edit Location Drawer via Manifest

Check cancel order ruleset in the workflow

Ensure that all of the order workflows contain the `cancelOrder` ruleset. For example:

1{
2    "name": "OrderCancel",
3    "description": "Order is Cancelled from admin console",
4    "type": "ORDER",
5    "subtype": "CC",
6    "eventType": "NORMAL",
7    "rules": [
8        {
9            "name": "{{accountId}}.core.SetState",
10            "props": {
11                "status": "CANCELLED"
12            }
13        },
14        {
15            "name": "{{accountId}}.order.SendEventForAllFulfilments",
16            "props": {
17                "eventName": "CancelFulfilment"
18            }
19        }
20    ],
21    "triggers": [
22        {
23            "status": "CREATED"
24        },
25        {
26            "status": "RECEIVED"
27        },
28        {
29            "status": "BOOKED"
30        }
31    ],
32    "userActions": [
33        {
34            "context": [
35                {
36                    "label": "CANCEL ORDER",
37                    "type": "PRIMARY",
38                    "modules": [
39                        "adminconsole"
40                    ],
41                    "confirm": true
42                }
43            ],
44            "attributes": []
45        }
46    ]
47},

Enable bulk order Cancel in the UI by using the action property in the LIST component

Key Points

Steps

Check cancel order ruleset in the workflow

Enable List User Action in the order manifest

test the change in the UI

An example of List that does not show the checkboxes

Filtering the order list result

Test bulk cancel

Fluent Commerce

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links

Check cancel order ruleset in the workflow

Enable List User Action in the order manifest

test the change in the UI

An example of List that does not show the checkboxes

Filtering the order list result

Test bulk cancel