Enable bulk order Cancel in the UI by using the action property in the LIST component
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`
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},
Language: json
Name: cancel ruleset in order workflow
Description:
[Warning: empty required content area]
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}
Language: json
Name: Update the mystique manifest
Description:
[Warning: empty required content area]
test the change in the UI
As you can see in the ruleset trigger section, Only
`CREATED`
`RECEIVED`
`BOOKED`
`orderCancel`

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`
`BOOKED`

Filtering the order list result
The user can filter the list by using the status:

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`
