How to work with Power Apps Barcode Reader Control

A Power Apps Barcode Reader control allows scans of barcodes, QR codes, and data matrix codes in Android, iOS, and Windows devices.

In this Power Apps Tutorial, we will discuss, what a Power Apps Barcode Reader control is, what are the properties, how to customize this control, and how to use barcode reader control to get values by scanning a barcode. Also, I will show you, how to scan multiple barcodes by using this control.

Recently, we got a requirement to use the Power Apps barcode reader control while working with the Power Apps Canvas app.

Power Apps Barcode Reader Control

Microsoft has developed a Barcode Scanner Control for Power Apps, and it’s a game changer. By using a barcode reader control, we can scan or read barcodes in Power Apps.

With new features including single scan, automated scan, and multi-scan capabilities, embedding barcode reading into your apps is now easier than ever.

The Power Apps Barcode Reader is not supported in desktop browsers, but we can use this control via mobile devices.

While using the barcode control on Windows devices, it will scan automatically; but while using this control within Android or ios devices, it will ask to select a scanning mode such as Automatically scan, Select to scan, and Scan multiple.

The barcode reader control also allows you to change the zoom level and turn on/off the device’s flashlight during scanning.

Add Power Apps Barcode Reader Control to a Canvas App

Follow the steps below to add a Barcode reader control to a screen in a Power Apps canvas app. If you are new to Power Apps, check out an article on how to create a canvas app in Power Apps.

• Open your canvas app and then navigate to a screen where you want to add the barcode, then On the Power Apps screen, navigate to the Insert tab.
• Under Media Control, you can find Barcode Reader Control.
• Select the control to add it on the Power Apps screen.

This will add the barcode reader control to the canvas app screen, now, let us see some of the useful properties of it.

Key Properties of Power Apps Barcode reader control

Once we have added the Barcode scanner control to the Power Apps screen, we might change its properties and configure it to our specifications. Below, I have described some key properties of the Power Apps Barcode reader control such as:

• BarcodeType: It allows the type of code that was scanned. You can target several barcode types by concatenating them. By default the Type is Auto, but you can change the type to Aztec, Codabar, Code 39, Data Matrix, etc.
• BeepOnScan: The barcode reader will play a beep sound while scanning if this option is selected.
• OnCancel: When a barcode scan is canceled by the user, the following actions must be taken.
• OnChange: When a property on the barcode reader control is updated, actions are taken, including output properties.
• OnScan: When a barcode is successfully scanned, the following actions should be taken.
• PreferFrontCamera: If it is activated, the barcode scanner will use the front-facing camera instead of the back-side camera by default.
• ScanningMode: To fit the requirements of your app, choose between SelectToScan (single scan), AutomaticallyScan, and ScanMultiple modes.
• ScanningQuality: The picture quality at which the barcode reader reads. Higher quality is preferable for tiny barcodes, although it may result in slower performance. In Windows, the barcode reader will always scan at the camera quality of the device. By default, it is set to Automatic.
• VibrateOnScan: When a barcode is scanned, the barcode reader will vibrate if this property is enabled.

Power Apps Barcode Reader Example

Now, let me now show you a few examples of how to use a barcode reader in Power Apps.

Single Scan using Barcode reader control

Let’s see how we can do a single scan using Barcode reader control in Power Apps. That is, we will scan a barcode by using this control and display the value as well as the type via Power Apps data table control.

To work with this scenario, the following steps are:

• On the Power Apps screen, add a Barcode reader control and a data table control.
• Insert the below expression on the Power Apps data table’s Items property.

Items = BarcodeReader1.Barcodes

Where BarcodeReader1 is the name of the Power Apps Barcoder control.

• Select the data table, and click on the Fields > Add fields. (i.e., Type and Value)

• Let’s publish and preview the app. We can see that when we click on the Barcode Reader control, it will notify us to open the app in the Power Apps mobile app on a capable device as shown below.

• For this, I have installed Power Apps mobile app on my mobile. Open the Power Apps from the mobile device.
• On the ‘All apps‘, open the app that we have created.
• Click on the Barcode Reader control.

• It will open the device camera and let scan a barcode. (I have scanned a random barcode from the browser).
• Click on Tick. We can see it will display that barcode’s type and value within the data table as shown below:

This is how to use a Power Apps Barcode control to do a single barcode scan and display it in a data table.

Scan multiple barcodes in Power Apps using a barcode reader

In this section, we will see how to scan and record multiple barcodes using Power Apps barcode reader control. And then we will display it in a data table in Power Apps.

Let’s take the above Power Apps Barcode reader control to implement this and the following steps are:

• Select the above Power Apps barcode reader control.
• On the right-side properties panel, set the ScanningMode as ScanMultiple.

Publish the app and open it via mobile device. We can see, it allows you to scan multiple barcodes at once. Click on the Barcode Reader control, scan a barcode, and click on the Tick button.

Similarly, you can scan multiple barcodes as well. I have scanned 4 barcodes and click on the Submit button.

Now, the value will appear on the Power Apps data table control as below:

This is how to scan multiple barcodes using the Power Apps barcode reader control.

Power Apps Barcode Reader control OnScan

In this section, we’ll look at how to use the OnScan property of the PowerApps barcode reader control. That is while scanning multiple barcodes, we will retrieve the first scanned item, its type, and scanning time. Also, we will display that retrieved value within a data table.

To implement this scenario, the following steps are:

• On the Power Apps screen, add a Barcode reader control.
• Select the control, and insert the below expression on the OnScan property of the barcode reader control.

OnScan = Collect(
    CollScannedItems,
    {
        ScannedItem: First(BarcodeReader1.Barcodes).Value,
        ScannedType: First(BarcodeReader1.Barcodes).Type,
        ScannedTime: Now()
    }
)

Where,

• CollScannedItems is the name of the collection to store the scanned item(s).
• ScannedItem, ScannedType, and ScannedTime are the collection headers.

• Add a Power Apps data table control to the screen and connect that data table to the collection.

Let’s publish the app and preview it via mobile device. Let’s scan multiple barcodes and click on the tick icon. We can see that, it will display the first scanned item with the scanned time and type.

This is how to work with the Power Apps Barcode reader control OnScan.

Conclusion

In Power Apps, we saw how to add a barcode reader control to the PowerApps screen, and what are the key properties of a barcode reader control.

Also, we have discussed how to work with a Power Apps barcode reader control, how to scan multiple barcodes by using this control, and how to use the OnScan property within the Power Apps barcode reader control.

You may also like the following Power Apps tutorials:

• Alternate Row Color in Power Apps Gallery
• Customize SharePoint list forms with Power Apps based on conditions
• Power Apps Form field validation on submit
• save camera image to SharePoint list attachment in Power Apps
• How to create multiple tabs form in Power Apps