Hi Community,
Our customer has requested a bar code scanner inside Creatio, so they can scan products and check its information.
We have multiple ways of doing this:
- WebApp (Custom Component) that opens the smartphone camera;
- WebApp (Custom Component) that establishes a connection to a scanner device (for example a Zebra Scanner);
-
Bar code scanner in the mobile app, which we will be able to configure as described here https://academy.creatio.com/docs/8.x/resources/release-notes/8-2-1-energy-release-notes#title-2782-13.
For our use case, we will be using the first option, since option three is not available at the moment.
After some digging, we discovered that there are multiple libraries that could help us implement this use case. However, we decided to post this question to know if someone has already implemented something similar, or at least tried to. So, we can share the know-how behind it.
Thank you.
Like
Have not tried, also looking forward to some knowhow. Not just to scan, but also to generate for event registrations for example.
I have integrated a barcode scanner with Creatio. We've used a simple bluetooth barcode scanner connected to the device (in our case it was a tablet with full Creatio open in the browser). Most barcode scanners work just like a connected keyboard. When a barcode is scanned it sends the "text" value of the barcode to as input, just as if it were typed in. In my solution, we had a page that opened and we set focus to a text/input field on the page and dislayed some message about "waiting for barcode" for the user. Then, once scanned, the text value of the barcode scanned triggered a change event for the text/input field and we then did the action needed for the barcode (which in our case the barcode was a vehicle VIN, so we then used an API to get the vehicle details for the scanned VIN). All really simple to be honest. Using this approach, thinking of the barcode scanner as text entered by an input device, just like a keyboard, it all turned out to be really easy to work with.
Hope this helps.
Ryan.
Ryan Farley,
Hello, Looks like the barcode scan functionality has been released for Mobile version 8.2.4. Here is what Creatio sent us. Did anyone from community get a chance to try this?
BarcodeScanService is a service used to initiate the barcode scanner and retrieve the scan result using scan() method. Supported barcode types:
- Aztec: ISO/IEC 24778 — 2D matrix barcode, compact, high data capacity, no quiet zone needed.
- Code 39: ISO/IEC 16388 — Variable-length, alphanumeric, widely used in logistics and inventory.
- Code 93: ISO/IEC 15417 — Higher density and reliability version of Code 39, supports more characters.
- EAN: ISO/IEC 15420 — 1D barcode for retail products, encodes 12-13 digits, globally standardized.
- Code 128: ISO/IEC 15417 — High-density 1D barcode, supports ASCII 128, used in shipping and logistics.
- Data Matrix: ISO/IEC 16022 — 2D barcode, supports large data storage, error correction included.
- QR: ISO/IEC 18004 — 2D matrix code, fast scanning, supports URLs, text, and more, error correction built-in.
- ITF (Interleaved 2 of 5): ISO/IEC 16390 — Numeric-only, compact, used for cartons and packaging.
- UPCE: ISO/IEC 15420 — Compressed version of UPC, for small products, 6-digit format.
- PDF417: ISO/IEC 15438 — 2D stacked linear barcode, supports large data, used in documents and IDs.
Return data
type - Indicates the result type: barcode, error, or cancelled.
rawContent - The scanned barcode content; null if the scan is canceled or an error occurs.
errorMessage - Describes the error if an error occurs; null otherwise.
format - Specifies the barcode format (one of the supported types or unknown); null in case of an error.
Usage:
@CrtRequest({
type: 'crt.TestBarcodeScanRequest',
})
export class TestBarcodeScanRequest extends BaseRequest { }
@CrtRequestHandler({
requestType: 'crt.TestBarcodeScanRequest',
type: 'usr.TestBarcodeScanRequest',
scopes: ['MobileContact_ListPage']
})
export class TestCaseScanBarcodeRequestHandler extends BaseRequestHandler<TestBarcodeScanRequest> {
public async handle(request: BaseRequest): Promise<unknown> {
const res: BarcodeScanResult = await new BarcodeScanService().scan();
Logger.console('___ Result type: ' + res.type);
Logger.console('___ Content: ' + res.rawContent);
Logger.console('___ Error: ' + res.errorMessage);
Logger.console('___ Scanned code format: ' + res.format);
return res;
}
}