Power Apps Barcode Reader Control [With Examples]

Have you ever worked with a Barcode scanner control in Power Apps? If Not, No worries!

In this Power Apps tutorial, I will explain everything regarding Power Apps Barcode reader control and its key properties.

Moreover, you will learn what the different types of Power Apps barcode readers are present and many more like:

  • Add a Power Apps Barcode reader control in Canvas app
  • How do you use a Barcode reader in Power Apps with different examples?
  • What are the limitations of Power Apps Barcode Reader?

Power Apps Barcode Reader Control

Power Apps Barcode reader control allows users to barcode scanning capabilities seamlessly into their app.

This control facilitates scanning Barcodes, Data-matrix, and QR codes on Android or iOS devices. The barcode scanner control is not supported in the web browser.

On Android or iOS devices, the user can choose from different scanning modes, including automatic scanning, selective scanning, or scanning multiple barcodes.

Additionally, the Barcode Scanner Control permits users to adjust the zoom level and turn the device’s flashlight on/off during scanning, providing greater control and flexibility in the scanning process.

Power Apps Barcode Scanner Multiple

This is the overview of Power Apps Barcode reader control.

Power Apps Barcode Reader Properties

This section will explain the Power Apps Barcode reader control properties.

Property NameDescription
BarcodeTypeSpecify the type of barcode that needs scanning. If necessary, you can scan multiple barcode types by concatenating them
BeepOnScanThe activation of the barcode reader will prompt an audible beep in case of a successful scan.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DisabledBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
HoverFillColorThis displays the background color of a control when a user hovers the mouse pointer over it.
OnCancelWhen the user cancels the barcode scan, it specifies what action to perform.
OnChangeWhen the user changes a value, it specifies what action to perform.
OnScanWhen the user successfully scans a barcode, it specifies what action to perform.
PreferFrontCameraEnabling the barcode reader automatically switches the camera to front instead of rear-facing mode.
PressedBorderColorThis refers to the color of a control’s border when a user taps or clicks on it.
ScanningModeThree scanning options are available: automatic scanning of the first barcode detected in view, manual selection of which barcode to scan, or scanning multiple barcodes in a single session.
It’s worth noting that on Windows, the barcode reader will always default to automatic scanning.
ScanningQualityThe image quality captured by the barcode reader during scanning is crucial. Optimal performance is achieved when scanning small barcodes that demand higher image quality; however, this could result in slower performance. On Windows, the barcode reader scans at the device’s camera quality by default, with the option for automatic settings.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
TextProvide the text to appear on a button.
VibrateOnScanActivating the barcode reader will vibrate in case of a successful scan.
VisibleHere, we can specify whether the Barcode reader control can be visible

These are the properties of a Power Apps Barcode reader control.

Power Apps Barcode Reader Types

Let me show you the different types of barcodes available using devices here.

Barcode TypeSupported [iOS and Android]Supported on Windows
QR_CODEYESYES
DATA_MATRIXYESNO
AZTECYESNO
CODABARYESYES
CODE_128YESYES
CODE_39YESYES
CODE_93YESNO
EANYESYES
Interleaved 2 of 5 ITFYESNO
PDF_417YESNO
RSS14 Databar 14YESNO
RSS_EXPANDED Databar ExpandedYESNO
UPCYESYES
Micro QR CodeYESNO
GS1-DWCodeNONO
MSINONO

These are the types of barcodes available using devices.

How to Add a Barcode Scanner in Power Apps

This section will explain how to add a Power Apps barcode scanner.

  • Sign into Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Barcode reader control. [Click on +Insert -> Expand Media -> Select Barcode reader].
Barcode reader control in Power Apps
  • The Power Apps Barcode reader control will appear like the screenshot below:
Add Power Apps Barcode reader control
  • By default, the barcode reader control name will be “BarcodeReader1“; you can Rename it using “bar” based on your requirement.
How to add barcode reader in Power Apps

This is how we can insert a Power Apps Barcode reader control.

How to Use Barcode Reader Control in Power Apps

This section will show you how to use a Power Apps barcode reader control with different scenarios.

Display Barcode value in Power Apps

In this example, I will show you how to display the barcode value in Power Apps.

For example, I created a Power Apps canvas app and added a Barcode reader control and Text label. Whenever a user clicks on the barcode control and scans a barcode, that barcode value will be displayed on a text label as shown below:

Power Apps Barcode reader control

Let me show you how to achieve this:

  • On the Power Apps screen, insert a Barcode scanner -> Set it OnScan property to:
Set(
    varBarcodeValue,
    First(bar_Value.Barcodes).Value
)

Where,

  1. varBarcodeValue = Provide the variable name
  2. bar_Value = Barcode reader control name
How to use Power Apps barcode reader control
  • Insert a Text label -> Set its Text property to:
varBarcodeValue

Where,

  1. varBarcodeValue = Variable name
Power Apps Barcode reader OnScan
  • Once your app is ready, SavePublish, and Preview the app. When we click on a Barcode reader control to scan, we will receive an error message notification: “To read barcodes, open this app in the Power Apps mobile app on a capable device. Click here to view device requirements and learn more.”
How to use barcode reader in Power Apps

To utilize the barcode scanner, you must first install PowerApps on your mobile device.

To access the barcode reader, open your PowerApps app in your mobile browser with your Microsoft credentials and preview the app. This will enable the scanner to function correctly.

  • The text label will display its value once you scan the Power Apps barcode reader.
Power Apps Barcode Reader Control

This is how I displayed the barcode value in Power Apps.

Power Apps Barcode Scanning Mode Dropdown

I will explain using a barcode scanning type to display a barcode value and type in Power Apps.

For example, On my Power Apps screen, I have added a Barcode reader, a Dropdown control, and a Data table. The dropdown control is connected to a barcode scanning mode type:

  • Automatically scan
  • Scan multiple
  • Select to scan

When the user selects a particular value from a dropdown and clicks on a Barcode reader to scan, the scanned type and value will be displayed on a data table as shown below:

Barcode scanner in Power Apps

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Dropdown control -> Set its Items property to:
[
    'BarcodeReader.ScanningMode'.AutomaticallyScan,
    'BarcodeReader.ScanningMode'.ScanMultiple,
    'BarcodeReader.ScanningMode'.SelectToScan
]
Barcode reader Power Apps
  • Insert a Barcode reader -> Set its ScanningMode property to:
drp_ScanningModeType.Selected.Value

Where,

  1. drp_ScanningModeType = Power Apps dropdown control name
How to work with barcode reader in Power Apps
  • Insert a Data table -> Set its Items property to:
bar_ScanningModeType.Barcodes

Where,

  1. bar_ScanningModeType = Power Apps Barcode reader control name
Power Apps barcode scanning mode dropdown
  • SavePublish, and Preview the app on your mobile device. The scanned type and value are shown on a data table when the user clicks on a barcode reader to scan after choosing a certain scanning type from the dropdown menu.
Power Apps Barcode scanner

This is how we can work with a Power Apps barcode scanning mode dropdown.

Scan and Record Multiple Barcodes Using a Collection in Power Apps

In this section, I will explain how to scan and store multiple records of barcodes using a collection in Power Apps

For example, I created a Power Apps canvas app and added a Barcode reader control and a Gallery control. When the user clicks on the barcode reader and scans multiple barcodes, the scanned type and value will be displayed on a gallery as shown below:

Power Apps Barcode Scanner Multiple

To achieve this, follow the below steps:

  • On the Power Apps screen, insert a Barcode reader -> Set its OnScan property to:
Collect(
    multiScanCollect,
    {
        Value: First(bar_MultiScan.Barcodes).Value,
        Type: First(bar_MultiScan.Barcodes).Type
    }
)

Where,

  1. multiScanCollect = Provide the collection name
  2. bar_MultiScan = Power Apps Barcode reader control name
Power Apps Barcode Scan Multiple
  • Insert a Gallery control -> Set its Items property to:
multiScanCollect

Where,

  1. multiScanCollect = Collection name
Using Power Apps barcode reader
  • SavePublish, and Preview the app on your mobile device. When the user scans the barcode reader multiply, the scanned type and value will be displayed on a gallery.
Barcode scanner Power Apps

This is how to scan and store multiple records of barcodes using a collection in Power Apps

Power Apps Barcode Reader Limitation

Here, I will explain the limitations of the Power Apps barcode reader

  • When using desktop browsers, the barcode reader is not supported; we can use the Power Apps for mobile apps.
  • The Select() function cannot be utilized for the barcode reader control. However, there’s a workaround to this limitation. You can set the fill color of the barcode reader to transparent and place it over the control you want to select with the barcode reader.
  • This will create a seamless user experience where selecting the control will trigger the barcode reader, as the user will click on an invisible barcode reader button rather than the actual control.

Conclusion

I hope this Power Apps tutorial gave you complete information on “Barcode reader in Power Apps” and the key properties of a Power Apps Barcode reader control.

Additionally, I have covered the different types of Power Apps barcode readers are present and how to add the Power Apps Barcode reader.

Lastly, you have learned how to use a Barcode reader in Power Apps with different examples and the limitations of the Power Apps Barcode reader.

Also, you may like some more Power Apps tutorials: