Scan codes (remote action)

Scan a barcode or QR code and send its data via API

This feature is available with the Advanced and Business add-ons.

This action triggers a scanner when pressing a UI element in your app. Once a code is scanned, a remote action will be executed, allowing you to send the code data via API. This allows you to implement, among others, the following use cases:

• Open a detail page for a specific product stored in your database. (Inventory app)

• Open a restaurant menu by scanning a QR code.

• Museum app, where you can scan a QR code for an artboard and open a description page.

The following code formats are supported. You can consult more information about the different formats here.

Formats supported by Bravo:

'code128'
'code39'
'code93'
'dataMatrix'
'ean13'
'ean8'
'itf14'
'pdf417'
'qr'
'upce'

⚒️ How to set it up

Scan action

To create the scan code action, use the following tag in the UI element that should open the scanner upon pressing it.

[action:remote-scan]

Once you do that, you'll be able to bind a request to send the code data to your backend. In this request, there will be two variables available to use:

• ${scanResult} -> contains the value of the code.

• ${scanFormat} -> contains the format of the code used.

As an example, this is the body of a POST request where both values are sent to the backend:

In the same way as other remote actions, you can specify response actions after the code scan action is executed. For instance, navigate to another app page. In this page, you'd be able to use the data returned by the request executed after scanning the code.

Display codes in the app

You can generate different code formats in the app by using the following tag:

[component:code:format:code_value]

As an example: [component:code:qr:abcdabcd] will generate a QR code with the data abcdabcd.

You can also bind the code data via API. In this case, make sure the data type you return from the API is a string.

📲 Example app

We've created a sample app to see how you can use this feature! This is an app to manage inventory. You can duplicate the Sample App called Scan Codes. Also, you can have a look at the design file below.

https://www.figma.com/community/file/1213056281558081464www.figma.com