Version: 8.2

Scan QR and bar codes in Mobile Creatio

Level: beginner

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 the scan() 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

View the example that uses the BarcodeScanService service while implementing a request handler below.

index.ts file
/* 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.

index.ts file
/* 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	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, Distribution
UPC-E	Lines that have different widths	ISO/IEC 15420	Retail, Warehousing, Distribution
Two-dimensional (2D) bar codes / matrix codes
Aztec code	Pixel matrix that has a marker in the center	ISO/IEC 24778	Transportation, Healthcare
Data Matrix	Pixel matrix that has an L-shaped border as a marker	ISO/IEC 16022	Aerospace, Automotive, Electronics
QR code	Pixel matrix that has markers in the corners	ISO/IEC 18004	Marketing, Public transport, Package delivery
PDF417	Stacked lines that have different widths	ISO/IEC 15438	Transportation, Ticketing, Driver’s licenses, Visas, ID cards