Pick List Component

UI Component

Changed on:

12 Feb 2024

Overview

The Pick list field allows for extra information to be displayed for each item within the picking step of the Wave Wizard. The purpose of this field is to enable more complex and efficient picking by providing users with more information about the item.

The Pick list provides an expandable table that can be configured to display information in any order.
Additional components can be added to an expandable row that is accessed on click.
The quantity selector can be configured to start with either 0 or the maximum amount required.

Alias

fc.action.field.wavepick

Detailed technical description

Sample Query

1query ($waveId: ID!) {
2  waveById(id: $waveId) {
3      items(first: 1000) {
4          edges {
5             node {
6                 quantity
7                product {
8                   name
9                   ... on StandardProduct {
10                      ref
11                     gtin
12                      catalogue {
13                        ref
14                      }
15                      attributes {
16                       name
17                       value
18                    }
19                     categories(first: 1) {
20                        edges {
21                          node {
22                            name
23                          }
24                       }
25                     }
26                    }
27                   ... on GroupProduct {
28                      ref
29                      catalogue {
30                        ref
31                      }
32                      attributes {
33                        name
34                        value
35                      }
36                      categories(first: 1) {
37                        edges {
38                          node {
39                           name
40                          }
41                       }
42                     }
43                   }
44                   ... on VariantProduct {
45                     ref
46                     gtin
47                     catalogue {
48                       ref
49                     }
50                     attributes {
51                       name
52                       value
53                     }
54                     categories(first: 1) {
55                       edges {
56                         node {
57                           name
58                         }
59                       }
60                     }
61                   }
62                 }
63             }
64         }
65     }
66 }
67}

Language: graphqlschema

Name: Sample Query

Description:

[Warning: empty required content area]

The Graphql query supplied must have at minimum the following fields.
Additional fields may be added to this query to fetch additional data.
As the query is specified in a setting it must be defined without line breaks.

Properties

Setting Structure

Note

Enabling this setting will overwrite the default pick list screen in the UI

Name	fc.mystique.fields.picklist
Value type	JSON
JSON value	<.. Your JSON here..>
Context	`RETAILER`
Context ID	<RetailerID>

Note

More information about the

`fc.card.attributes.grid`

component can be found in the Grid Component section

Data Dictionary

Name	Required	Type	Description
query	no	string	Used to override the GQL query the pick list table uses. For specific use cases where our current query does not fetch the - relevant data. Sample query provided at the end of this table.
dataSource	yes if query is set, otherwise no	string	Specifies which path in the response data to display in the Pick List.
startQuantityAtMax	no	boolean	Configuration option to determine the behaviour of the quantity selector on the pick list. When set to `true` , the quantity selector will start at maximum requested quantity for each item. When set to `false` or not defined at all the quantity selector will start at 0 for each item.
attributes	yes	array	Defined as dynamic attributes
attributes.sortBy	yes	string	The pick component adds an extension to the standard Dynamic Attribute definition. - This allows sorting of the table column.
scanner	no	`object`	Enables barcode scanning and filtering of items. Configuration details are contained in the Scanner configuration table.
rowExpansion	no	`MystiqueComponentInstance[]`	Responsible for defining the component to be displayed when a row is expanded. Will accept a MystiqueComponentInstance array so that any component(s) can be used in a row expansion. When defined, automatically prepends a drop down button component to the first column of the table. Upon on-click action it will open the row expansion and show - the supplied mystique component(s). Specifically the root `dataSource` for any components put here will be the object that represents that particular row of the table. As shown in the above working example, the row expander will show the product attributes taken from the query defined in the pick component.

Scanner Configuration

Name

Type

Required

Default

Description

`scannerFields`

`string[]`

`["node.product.gtin"]`

Specify the fields that upon scan, the item field searches against. Successful scans will attempt to increment the associated item quantity.
Example:

`product.attributes.byName.barcode`

`filterFields`

`string[]`

`["node.product.gtin", "node.product.name"]`

Specify the fields that the filter will look against when attempting to find an item.

`rowId`

`string`

`node.ref`

The unique key that is used to identify the relevant row on successful scan. This is used to determine upon scan which row to bring into view.

`scanTimeout`

`number`

`200`

The timeout time in milliseconds before the scanner will execute after receiving input. This is used to ensure all input values are captured before searching for a result.

`incrementBy`

`number`

`1`

The quantity to increment the found order item by.

`toastTimeout`

`number`

`2000`

The timeout time in milliseconds before a toast message will disappear.

`highlightDuration`

`number`

`300`

Time in milliseconds that a row will remain highlighted after being interacted with on scan.

`enableCameraScanner`

`boolean`

`false`

This allows to enable the phone’s camera for scanning.

`camera`

`object`

This object covers all camera relative properties. Details can be found in the table below.

Mobile Camera Scanner Configuration

Name	Type	Required	Default	Description
`frequency`	`number`	No	10	Frequency is the number of scan attempts per second. The frequency is an integer ranging from 1 to 10, and its default setting is 10. Opting for a higher frequency enhances scanning accuracy but also leads to greater utilization of the phone battery. To preserve the phone's battery life, it is advisable to choose a lower value.
`decoders`	`array`	No	`[code_128_reader,ean_reader]`	The decoder in the barcode scanner specifies what kind of barcode it's searching for. It has a list (array) of possible barcode types that it checks one by one, in the order given. The decoding process stops at the first successful result. The array can include multiple barcode types, but performance decreases with each additional type. The scanner reads the entire barcode, including leading and ending zeros, without trimming it. Possible values are: `"code_128_reader", "ean_reader", "ean_5_reader", "ean_2_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader", "2of5_reader", "code_93_reader", "code_32_reader", "qr_reader"`
`disableFeedback`	boolean OR `{ success: boolean, fail: boolean }`	No	true	Disable the audio and haptic feedback on scan. You can configure the success and failure haptic feedback responses individually, or you can configure them together. The value is either true OR { success: boolean; fail: boolean}. This way, you can globally disable feedback by passing true or selectively disable feedback by passing { success: true }, { failure: true }, or { success: true; fail: true}. Note: Haptic feedback isn't available on iOS because of Safari constraints. On Android, a successful scan produces a single vibration, while an unsuccessful one results in two vibrations.
`confidence`	`float`	No	0.9	The confidence value ranges between 0 and 1, with precision up to two decimal points. Confidence serves as a trade-off between accuracy and error margin. A higher confidence level corresponds to a reduced margin for error, especially in scenarios where the camera quality may not be excellent.

Configuration example

1{
2    "startQuantityAtMax": true,
3    "scanner": {
4       "enableCameraScanner": true
5    },
6    "attributes": [
7        {
8            "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.productName.heading",
9            "value": "{{img product.attributes.byName.imageUrl product.attributes.byName.imageUrlRef alt='alt' width=50 margin='0.5em'}} {{product.name}}",
10            "sortBy": "product.name"
11        },
12        {
13            "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.attributes.heading",
14            "value": "{{keyValue (bold '<ATTRIBUTE_1_NAME>: ') product.attributes.byName.<ATTRIBUTE_1_NAME>  (bold '<ATTRIBUTE_2_NAME>: ') product.attributes.byName.<ATTRIBUTE_2_NAME>}}",
15            "sortBy": "product.attributes.byName.<ATTRIBUTE_TO_SORT_BY>"
16        },
17        {
18            "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.sku.heading",
19            "value": "{{product.ref}}",
20            "sortBy": "product.ref"
21        }
22    ],
23    "rowExpansion":[
24        {
25            "component": "fc.card.attributes.grid",
26            "dataSource": "product.attributes",
27            "props": {
28                "exclude": ["imageUrl", "imageUrlRef"]
29            }
30        } 
31    ]
32}

Language: json

Version History

2023-08-17

v0.0.0

version 0

Recommended Placement

None