Scan QR and bar codes in Mobile Creatio
Use QR and bar code scanning in Mobile Creatio to retrieve, validate, or populate data from physical labels quickly. This streamlines operations like product identification, document tracking, and service access directly from a mobile device.
To scan QR and bar codes in Mobile Creatio, implement a custom request handler using remote module. Learn more: Custom request handler implemented using remote module in Mobile Creatio. To call the request handler, use one of the following components added to the Freedom UI page in the Mobile Creatio:
- Button component. Since the scanner is closed immediately after scanning, use the component if you need to scan a single QR or bar code. Requires using the
BarcodeScanService
service that initiates the scanner in fullscreen mode and returns scanning result using thescan()
method while implementing a request handler. Learn more: Button, BarcodeScanService service. - BarcodeScanner component. Use the component if you need to scan multiple QR or bar codes. The component lets you embed scanner into page as well as other Freedom UI components and provides abilities to customize a bar code scanning window based on your business goals. Learn more: BarcodeScanner.
QR and bar code scanning functionality provides the following advantages:
- Instant code scanning saves time compared to manual data entry.
- Automatic recognition of QR and bar codes minimizes risk of error occurrence.
- Support for a wide range of code formats commonly used in product labeling, digital services, and other apps.
- Instant access to information.
General procedure
1. Create a TypeScript project
Instructions: Create a TypeScript project.
2. Create a custom request
Instructions: Create a custom request.
3. Create a custom request handler
Instructions: Create a custom request handler.
View the example that uses the BarcodeScanService
service while implementing a request handler below.
/* Import the required functionality from the libraries. */
import {
BaseRequest,
CrtRequest,
BaseRequestHandler,
CrtRequestHandler
} from "@creatio/mobile-common";
/* Add the "CrtRequest" decorator to the "SomeRequestNameRequest" class. */
@CrtRequest({
type: 'usr.SomeRequestNameRequest'
})
export class SomeRequestNameRequest extends BaseRequest {}
/* Add the "CrtRequestHandler" decorator to the "SomeRequestNameHandler" class. */
@CrtRequestHandler({
requestType: 'usr.SomeRequestNameRequest',
type: 'usr.SomeRequestNameHandler',
})
export class SomeRequestNameHandler extends BaseRequestHandler<SomeRequestNameRequest> {
public async handle(request: SomeRequestNameRequest): Promise<unknown> {
const res: BarcodeScanResult = await new BarcodeScanService().scan();
/* Implement a custom business logic to process scanned data. */
...;
return res;
}
}
View the example that implements a request handler below.
/* Import the required functionality from the libraries. */
import {
BaseRequest,
CrtRequest,
BaseRequestHandler,
CrtRequestHandler
} from "@creatio/mobile-common";
/* Add the "CrtRequest" decorator to the "SomeRequestNameRequest" class. */
@CrtRequest({
type: 'usr.SomeRequestNameRequest'
})
export class SomeRequestNameRequest extends BaseRequest {
/* The type and parameter of the request (optional). */
public someParameterName?: someParameterType;
}
/* Add the "CrtRequestHandler" decorator to the "SomeRequestNameHandler" class. */
@CrtRequestHandler({
requestType: 'usr.SomeRequestNameRequest',
type: 'usr.SomeRequestNameHandler',
})
export class SomeRequestNameHandler extends BaseRequestHandler<SomeRequestNameRequest> {
public async handle(request: SomeRequestNameRequest): Promise<unknown> {
/* Implement a custom business logic to process scanned data. */
...;
return this.next?.handle(request);
}
}
4. Add the custom request handler to the Freedom UI page
-
Repeat steps 1-9 of the procedure to add the custom request handler to the Freedom UI page.
-
Configure the Freedom UI component.
- Configure the Button component that calls the request handler implemented using remote module if you need to scan a single QR or bar code. Instructions: Configure the Freedom UI component.
- Configure the BarcodeScanner component that calls the request handler implemented using remote module if you need to scan multiple QR or bar codes. Instructions: Configure the Freedom UI component.
-
Repeat steps 10-15 of the procedure to add the custom request handler to the Freedom UI page.
As a result, Mobile Creatio will be able to scan the following:
- a single QR or bar code if you use the Button component
- multiple QR or bar codes if you use the BarcodeScanner component
When you process scan results, we recommend following these recommendations:
- To display and modify scanned values, use the Field component. Learn more: Field.
- To trigger actions based on scanned data, use the Button component. Learn more: Button.
Supported QR and bar code types
Mobile Creatio supports the QR and bar code types listed in the table below.
Name | Description | Example | ISO/IEC certification | Common usage |
---|---|---|---|---|
One-dimensional (1D) bar codes / linear bar codes | ||||
Code 39 | Lines that have two different widths | ISO/IEC 16388 | Industrial | |
Code 93 | Lines that have different widths | ISO/IEC 15417 | Industrial | |
EAN (European Article Number) | Lines that have different widths | ISO/IEC 15420 | Retail | |
Code 128 | Lines that have different widths | ISO/IEC 15417 | All industries | |
ITF (Interleaved 2 of 5) | Lines that have different widths | ISO/IEC 16390 | Industrial, | |
UPC-E | Lines that have different widths | ISO/IEC 15420 | Retail, | |
Two-dimensional (2D) bar codes / matrix codes | ||||
Aztec code | Pixel matrix that has a marker in the center | ISO/IEC 24778 | Transportation, | |
Data Matrix | Pixel matrix that has an L-shaped border as a marker | ISO/IEC 16022 | Aerospace, | |
QR code | Pixel matrix that has markers in the corners | ISO/IEC 18004 | Marketing, | |
PDF417 | Stacked lines that have different widths | ISO/IEC 15438 | Transportation, |
See also
Custom request handler implemented using remote module in Mobile Creatio