USB Barcode Scanner Component
Changed on:
29 July 2024
Overview
An invisible component that accepts input from a USB scanner in HID mode (keyboard simulation) and performs an on a scan. This component activates when nothing on the screen is currently selected and enables efficient scanning of parcel labels to perform various functions, like marking a customer as collected.
Most commonly, the Barcode Scanner component is included in Fluent Store manifests centered around collections.
Plugin Name | Core |
---|
The standard library of components.
v1.0.0
Initial changelog entry.
Alias
fc.barcode.scanner
Detailed technical description
Limitations
This method only allows you to use GraphQLQueries where the variable is at the topmost level. Using it to filter a list of objects by referring to a nested object property may not work as expected.
For example, the below query uses barcode input on the nested items query. However, the `articlesByLocation`
will not be filtered and will instead return all articles, with only the items filtered by the barcode. Since the barcode component requires a single object to be returned, this will not work.
1query ($barcodeInput: [String!]){
2 articlesByLocation {
3 edges {
4 node {
5 items(barcode:$barcodeInput) { ❌
6 edges {
7 node {
8 id
9 }
10 }
11 }
12 }
13 }
14 }
15}
Error Messages
When an error occurs, a toast message will pop up displaying a short message for the user. These messages are aimed at store assistants scanning many items and are short without describing the issue in detail.
Detailed error messages on the other hand are available in the browser console, which can be accessed through a browser’s developer tools.
Worked Example
Example of using the barcode scanner to `navigate`
from the Customer Collections page, to the articles collection page. In this example, the barcode scanned is the ID.
1{
2 "component": "fc.scanner.barcode",
3 "props": {
4 "enableCameraScanner": true,
5 "action": {
6 "type": "navigate",
7 "link": "#/collections/customer/{{id}}"
8 },
9 "query": "query ($barcodeInput: ID!) { articleById(id:$barcodeInput) { id } }"
10 }
11}
Sample Usage
- Put the sample manifest into the Customer Collections Store fragment
- Within Fluent Store, navigate to the collections page
- Scan an Article ID for an article waiting to be collected
- The Article ID is put into the GraphQL query via the
`$barcodeInput`
variable - Then the GraphQL query is executed
- If a result is found the navigation to the relevant Article page is performed
Properties
Name | Type | Required | Default | Description |
Query | String | No | Page level query | It takes a query to execute on a scan. |
Variables | Object | No | A list of entries that maps each variable to its value. | |
| Yes | The config containing the to perform on a scan. | ||
enableCameraScanner | boolean | No | false | Enables the Mobile Barcode Scanner |
camera | camera object | No | N/A | The parent object that captures all of the properties that can be configured in the camera scanner. See below config table "Mobile Barcode Scanner Configuration" for details |
Actions
Upon a successful scan, the component currently supports three types of actions.
User Action
With the type, the name of the is provided in the , and this will be performed on the scanned item.
If the requires additional information, a window will pop up allowing user input before the is performed.
Name | Type | Required | Default | Description |
Type | “userAction” | Yes | The type of to perform. Specify “userAction” to perform a . | |
Name | String | Yes | The name of the to perform. |
Navigation
With the navigate type, a link is provided in the , and the barcode scanner component will navigate to this URL after scanning a barcode. The link may be templated to include information from the data to allow the URL to be dynamically generated based on the barcode.
Name | Type | Required | Default | Description |
Type | “Navigate” | Yes | The type of to perform. Specify “Navigate” to perform a navigate . | |
Link | URL | Yes | The link to navigate to. |
Barcode Test Action
Name | Type | Required | Default | Description |
Type | “Test” | Yes | The type of to perform. Specify “Test” to test the component. With this , the message “Successfully scanned ” will be displayed when a - barcode is scanned on the page. |
Mobile Camera Scanner Configuration
Name | Type | Required | Default | Description |
|
| No | 10 | Frequency is the number of scan attempts per second. The frequency is an integer ranging from 1 to 10, and its default 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. |
|
| No |
| 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 given. The decoding 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:
|
| boolean OR | 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. |
|
| 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 "component": "fc.scanner.barcode",
3 "props": {
4 "action": {
5 "type": "navigate",
6 "link": "#/collections/customer/{{id}}"
7 },
8 "query": "query ($barcodeInput: ID!) { articleById(id:$barcodeInput) { id } }"
9 }
10}
Version History
v23.8.1
v23.8.1
Recommended Placement
None