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.
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.
|Specify the type of barcode that needs scanning. If necessary, you can scan multiple barcode types by concatenating them
|The activation of the barcode reader will prompt an audible beep in case of a successful scan.
|A user can specify the color for a border.
|This property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
|The color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
|Determines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
|This displays the background color of a control when a user hovers the mouse pointer over it.
|When the user cancels the barcode scan, it specifies what action to perform.
|When the user changes a value, it specifies what action to perform.
|When the user successfully scans a barcode, it specifies what action to perform.
|Enabling the barcode reader automatically switches the camera to front instead of rear-facing mode.
|This refers to the color of a control’s border when a user taps or clicks on it.
|Three 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.
|The 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.
|This refers to the keyboard navigation sequence that is related to other controls.
|Provide the text to appear on a button.
|Activating the barcode reader will vibrate in case of a successful scan.
|Here, 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.
|Supported [iOS and Android]
|Supported on Windows
|Interleaved 2 of 5 ITF
|RSS14 Databar 14
|RSS_EXPANDED Databar Expanded
|Micro QR Code
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].
- The Power Apps Barcode reader control will appear like the screenshot below:
- By default, the barcode reader control name will be “BarcodeReader1“; you can Rename it using “bar” based on your requirement.
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:
Let me show you how to achieve this:
- On the Power Apps screen, insert a Barcode scanner -> Set it OnScan property to:
- varBarcodeValue = Provide the variable name
- bar_Value = Barcode reader control name
- Insert a Text label -> Set its Text property to:
- varBarcodeValue = Variable name
- Once your app is ready, Save, Publish, 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.”
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.
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.
- 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:
Follow the below steps to achieve this:
- On the Power Apps screen, insert a Dropdown control -> Set its Items property to:
- Insert a Barcode reader -> Set its ScanningMode property to:
- drp_ScanningModeType = Power Apps dropdown control name
- Insert a Data table -> Set its Items property to:
- bar_ScanningModeType = Power Apps Barcode reader control name
- Save, Publish, 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.
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:
To achieve this, follow the below steps:
- On the Power Apps screen, insert a Barcode reader -> Set its OnScan property to:
- multiScanCollect = Provide the collection name
- bar_MultiScan = Power Apps Barcode reader control name
- Insert a Gallery control -> Set its Items property to:
- multiScanCollect = Collection name
- Save, Publish, 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.
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.
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:
- Power Apps Timer Control
- How to use Power Apps Toggle Control
- Rating Control in Power Apps
- How to Build Calculator in Power Apps
Preeti Sahu is an expert in Power Apps and has more than 6 years of experience working with SharePoint and the Power Platform. As a Power Platform expert for Power BI, Power Apps, Power Automate, Power Virtual Agents, and Power Pages, she is currently employed with TSinfo Technologies. She is the author of the book Microsoft Power Platform A Deep Dive. She also made a big technical contribution to SharePointDotNet.com in the form of articles on the Power Platform. She enjoys traveling and spending time with her family in her spare time.