Docs
Changed on:
3 June 2024
FULFILMENT_IDS
The Fulfilment List Field Component displays a list of Fulfilments and lets the user filter, search and select them. Once selected, they will appear in a summary that provides useful summary statistics about the selected Fulfilments.
Users have the ability to define custom filters for searching fulfilments by specific custom attributes, customer details, and products. They can then choose to either bulk select the filtered fulfillments or pick them individually. Once selections are made, they will be dynamically displayed in the summary. This summary can be tailored to include useful aggregate information about the fulfillments.
In the reference solution, this field component is used in conjunction with the CreateWaveByFulfilmentIds rule to allow users to select Fulfilments to add to a Wave.
The Fulfilment List Field Component is configurable via the
`fc.mystique.fields.fulfilmentlist`The setting has two primary sections. The Fulfilments table and the summary:
Name | fc.mystique.fields.fulfilmentlist |
Value type | |
JSON value | See Configuration Example below |
Context | |
Name | Type | Value |
fulfilmentIds | Array of Integers | The ID of each selected row, defined by |
1{
2 "name": "CreateWaveByUserSelection",
3 "entityType": "LOCATION",
4 "entityId": "1",
5 "entityRef": "F_SYD",
6 "entitySubtype": "STORE",
7 "rootEntityType": "LOCATION",
8 "retailerId": "1",
9 "attributes":
10 {
11 "fulfilmentIds":
12 [
13 5003098,
14 5003097
15 ]
16 }
17}Language: plain_text
Name: Example Event
Description:
[Warning: empty required content area]Key | Type | Required | Default | Notes |
summary | | no | - | Optional overrides for the summary component |
fulfilmentTable | | no | - | Optional overrides for the fulfilment table component |
Key | Type | Required | Default | Notes |
attributes | | no | Label: Number of Fulfilments Label: Total Number of Items | Overrides the summary information about the Fulfilments selected to be added to the Wave. For example, in the defaults, the total number of items across all of the selected Fulfilments is presented to allow Store Associates to gauge whether or not they will be able to retrieve all of these items in one Wave Note: both |
listColumns | | no | Label: Fulfilment Label: Number of Items | Overrides for the summary table columns that displays the selected Fulfilments to be added to the Wave. This provides high-level data on the currently selected fulfillments. |
title | | no | Select Fulfillments | Can be overridden through this config or via the i18n key |
Key | Type | Required | Default | Notes |
pathToId | | no | | Defines the JsonPath of the value that is sent to the user action for a selected row. Most likely does not need to be touched unless adding custom rules to create waves. |
path | | no | | Override to target the values/data to pass to the table. Only needed in some cases when the default query is changed. |
query | | no | See below in the Default Query section | Override the default query. Note, the component automatically paginates up to 1000 items. |
variables | | no | | Overrides for variables to be passed to the query. |
listColumns | | no | See below Configuration Sample section for defaults | Determines the column header and values of the fulfilment table. Access data starting from the value defined in the For example: |
filters | | no | See below Configuration Sample section for defaults. | Determines the filters that can be used to filter the fulfilment list.
See Filtering below for more details. |
pageSize | | no | 30 | Controls the number of items that is initially displayed. |
This component allows you to define your own filters to filter the list of available fulfilments. This can be done using the
`fulfilmentTable.filters`To add your own filter, you need a name for the filter, the type of filter and a comparison function.
The type will be used to determine what filter component will be used when the user tries to filter using the filter they selected. Some out of the box examples for type include:
Type | The filter field that will be used |
| String Field |
| Quantity Selector Field |
| Number Field |
The comparison function determines which rows fulfil the criteria for matching your filter. It uses handlebar template logic to compare a value extracted from the graphql response to the value inputted by the user. The user input is represented with the variable value.
`{{eq (arraySum node.items.edges "node.requestedQuantity") value}} ``{{eq node.order.customer.firstName value}}``{{eq node.attributes.byName.FulfilmentType value}}``{{anyMatch "node.order.attributes.byName.customerType" "VIP" "like"}}``{{anyMatch "node.items.edges.node.orderItem.attributes.byName.itemSize" value}}`1query ($status: [String]!, $locationRef: String!) {
2 fulfilments(
3 first: 100
4 status: $status
5 fromLocation: { ref: $locationRef }
6 ) {
7 pageInfo {
8 hasNextPage
9 }
10 edges {
11 cursor
12 node {
13 id
14 ref
15 status
16 fulfilmentChoiceRef
17 attributes {
18 name
19 type
20 value
21 }
22 deliveryType
23 eta
24 expiryTime
25 order {
26 ref
27 type
28 createdOn
29 updatedOn
30 customer {
31 attributes {
32 name
33 type
34 value
35 }
36 firstName
37 lastName
38 username
39 }
40 attributes {
41 name
42 type
43 value
44 }
45 }
46 items {
47 edges {
48 node {
49 requestedQuantity
50 orderItem {
51 fulfilmentChoice {
52 ref
53 type
54 deliveryType
55 deliverAfter
56 deliverBefore
57 dispatchOn
58 attributes {
59 name
60 type
61 value
62 }
63 }
64 attributes {
65 name
66 type
67 value
68 }
69 product {
70 ref
71 type
72 attributes {
73 name
74 type
75 value
76 }
77 }
78 }
79 }
80 }
81 }
82 }
83 }
84 }
85}
86Language: plain_text
Name: Default query
Description:
[Warning: empty required content area]1{
2 "summary": {
3 "attributes": [
4 {
5 "label": "fc.sf.ui.wave.createWave.summary.field.numFulfilments",
6 "labelFallback": "Number of Fulfilments",
7 "value": "{{selectedFulfilments.length}}"
8 },
9 {
10 "label": "fc.sf.ui.wave.createWave.summary.field.numItems",
11 "labelFallback": "Total Number of Items",
12 "value": "{{2dArraySum selectedFulfilments \"items.edges\" \"node.requestedQuantity\"}}"
13 }
14 ],
15 "listColumns": [
16 {
17 "label": "fc.sf.ui.wave.createWave.summary.table.header.fulfilmentRef",
18 "labelFallback": "Fulfilment",
19 "value": "{{fulfilment.order.ref}}-{{fulfilment.id}}"
20 },
21 {
22 "label": "LastName",
23 "labelFallback": "LastName",
24 "value": "{{fulfilment.order.customer.lastName}}"
25 },
26 {
27 "label": "fc.sf.ui.wave.createWave.summary.table.header.numItems",
28 "labelFallback": "Total Number of Items",
29 "value": "{{arraySum fulfilment.items.edges \"node.requestedQuantity\"}}",
30 "align": "left"
31 }
32 ]
33 },
34 "fulfilmentTable": {
35 "query": "query ($status: [String]!, $locationRef: String!, $after: String) { fulfilments(first: 100, status: $status, fromLocation: {ref: $locationRef}, after: $after) { pageInfo { hasNextPage } edges { cursor node { id ref status fulfilmentChoiceRef attributes { name type value } deliveryType eta expiryTime order { ref type createdOn updatedOn customer { attributes { name type value } firstName lastName username } attributes { name type value } } items: items { edges { node { requestedQuantity orderItem { fulfilmentChoice { ref type deliveryType deliverAfter deliverBefore dispatchOn attributes { name type value } } attributes { name type value } product { ref type attributes { name type value } } } } } } } } } }",
36 "variables": {
37 "status": [
38 "AWAITING_WAVE"
39 ],
40 "locationRef": "{{activeLocation.ref}}"
41 },
42 "filters": [
43 {
44 "template": "{{anyMatch \"node.order.ref\" value \"like\"}}",
45 "label": "Order",
46 "type": "text"
47 },
48 {
49 "template": "{{partialStringMatch value node.order.customer.firstName node.order.customer.lastName (concat node.order.customer.firstName node.order.customer.lastName)}}",
50 "label": "Customer",
51 "type": "text"
52 },
53 {
54 "template": "{{lte (arraySum node.items.edges \"node.requestedQuantity\") value}}",
55 "label": "Min item quantity",
56 "type": "number"
57 },
58 {
59 "template": "{{gte (arraySum node.items.edges \"node.requestedQuantity\") value}}",
60 "label": "Max item quantity",
61 "type": "number"
62 },
63 {
64 "template": "{{partialStringMatch value node.order.type (i18n \"fc.sf.ui.wave.createWave.list.values.deliveryType.\" node.order.type)}}",
65 "label": "Delivery type",
66 "type": "text"
67 }
68 ],
69 "listColumns": [
70 {
71 "label": "Order",
72 "value": "{{node.order.ref}}"
73 },
74 {
75 "label": "Customer",
76 "value": "{{node.order.customer.firstName}} {{node.order.customer.lastName}}"
77 },
78 {
79 "label": "Items",
80 "value": "{{arraySum node.items.edges \"node.requestedQuantity\"}}"
81 },
82 {
83 "label": "Order type",
84 "value": "{{node.order.type}}"
85 },
86 {
87 "label": "Expiry time",
88 "value": "{{relativeDateFromNow node.expiryTime}}"
89 }
90 ]
91 }
92}Language: json
First version - created the component
None
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
