Enable Phone Camera scanning in Fluent STORE Picking
Author:
Randy Chan
Changed on:
4 Feb 2025
Key Points
- A step-by-step guide to enable phone camera scanning for product picking.
- Configuration
Steps
Configure setting: fc.mystique.fields.picklist
The full details of the picklist setting can be found here.
1{
2 "query": "query ($waveId: ID!) { pickwave:waveById(id: $waveId) { items(first: 100) { edges { node { quantity product { name ... on VariantProduct { __typename ref gtin stdProduct:product{ ... on StandardProduct{ __typename ref attributes{ name value } } } catalogue { ref } attributes { name value } categories(first: 1) { edges { node { name } } } } } } } } }}",
3 "startQuantityAtMax": false,
4 "dataSource": "pickwave.items",
5 "attributes": [
6 {
7 "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.productName.heading",
8 "value": "{{img product.attributes.byName.imageUrl product.attributes.byName.imageUrlRef alt='alt' width=50 margin='0.5em'}} {{product.name}}",
9 "sortBy": "product.name"
10 },
11 {
12 "label": "Barcode",
13 "value": "{{product.gtin}}",
14 "sortBy": "product.gtin"
15 },
16 {
17 "label": "brandname",
18 "value": "{{product.stdProduct.attributes.byName.imageUrl}}",
19 "sortBy": "product.stdProduct.attributes.byName.imageUrl"
20 },
21 {
22 "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.sku.heading",
23 "value": "{{product.ref}}",
24 "sortBy": "product.ref"
25 }
26 ],
27 "scanner": {
28 "enableCameraScanner": true,
29 "scannerFields": [
30 "product.gtin",
31 "product.ref",
32 "product.name",
33 "product.attributes.byName.BARCODE1",
34 "product.attributes.byName.BARCODE2",
35 "product.attributes.byName.BARCODE3"
36 ],
37 "filterFields": [
38 "product.gtin",
39 "product.ref",
40 "product.name",
41 "product.attributes.byName.BARCODE1",
42 "product.attributes.byName.BARCODE2",
43 "product.attributes.byName.BARCODE3"
44 ],
45 "rowId": "product.ref",
46 "scanTimeout": 200,
47 "incrementBy": 1,
48 "toastTimeout": 2000,
49 "highlightDuration": 300,
50 "camera": {
51 "decoders": [
52 "code_128_reader",
53 "qr_reader"
54 ]
55 }
56 },
57 "rowExpansion": [
58 {
59 "component": "fc.card.attributes.grid",
60 "dataSource": "product.attributes",
61 "props": {
62 "exclude": [
63 "imageUrl",
64 "imageUrlRef"
65 ]
66 }
67 }
68 ]
69}
Language: json
Name: fc.mystique.fields.picklist JSON
Description:
Sample JSON that enables scanning code 128 and QR code.
Note that you can declare which
`scannerFields`
Sample Barcode for testing
You can use https://barcode.tec-it.com/en/Code128?data=02020202002 to generate a sample barcode where a barcode is matching with your product's scanner field.
Test scanning with your phone
Here are some of the sample testing:
Pick Scanning by productRef:
Pick Scanning by productRef:
Pick Scanning by GTIN code-128:
Pick Scanning by GTIN code-128:
Pick Scanning by QR Code:
Pick Scanning by QR Code:
Item not found:
Item not found: