PowerApps Barcode Scanner – Detailed tutorial

In this PowerApps tutorial, We will discuss what is a Barcode scanner control in PowerApps and its important properties. How to use PowerApps Barcode Scanner.

Also, We will see what are the Barcode Availability by Device in Powerapps, How to use Powerapps Barcode Scanner Onscan, and Powerapps Barcode Scanner multiple scans.

By taking a simple scenario, We will learn how to store the Powerapps Barcode Scan in the SharePoint List and as well as in the Excel sheet.

Powerapps Barcode Scanner Control

PowerApps Barcode Scanner Control is just like a PowerApps camera control that helps to scan a Barcode, Data-matrix codes, and QR codes on an Android or iOS device.

The only difference between a Camera control and a Barcode Scanner control is, Camera works in continuous capture mode where the barcode scanner detects the QR code in focus mode or view mode.

NOTE:

The Powerapps Barcode Scanner Control does not work in the Web browser. It only supports Android and iOS devices. If you will use this scanner control in any other platform, then it may show any warning message that some features of the app won’t work.

Powerapps Barcode Scanner Properties

Below are some Powerapps Barcode Scanner Proeprties that a user can use:

  • OnScan: When a barcode is scanned successfully, then it shows how the app responds.
  • OnCancel: When a user has canceled the barcode, then it shows how the app responds.
  • Type: It is the output property that contains the type of code that was most recently scanned.
  • Value: It is the output property that contains the text value of code that was most recently scanned.
  • BarcodeType: You need to specify the barcode type to scan. You can target multiple barcode types by concatenating them. Ex. BarcodeType.Code128 & BarcodeType.Code39 Default: Auto
  • FlashlightEnabled: It specifies whether the flashlight is enabled automatically or not when the scanner is opened.
  • PreferFrontCamera: It specifies whether the front-facing camera is enabled or not when a user is using the scanner.

Supported Barcode Types in PowerApps

You can see the below table that represents what type of Powerapps Barcode types supports in Android and as well as in iOS devices.

Barcode Type Android iOS
QR_CODE Yes Yes
DATA_MATRIX Yes Yes
UPC_A Yes Yes
UPC_E Yes Yes
EAN_8 Yes Yes
EAN_13 Yes Yes
CODE_39 Yes Yes
CODE_93 Yes Yes
CODE_128 Yes Yes
CODABAR Yes No
ITF Yes Yes
RSS14 Yes No
PDF_417 Yes Yes
RSS_EXPANDED Yes No
MSI No No
AZTEC Yes Yes

Note:

PDF_417 and AZTEC aren’t supported in Auto mode.

For your reference, I am giving a quick sample image of Powerapps Barcodes:

Supported Barcode Types in Powerapps
Supported Barcode Types in PowerApps

PowerApps Barcode Scanner Onscan

Here, We will see how we can use the barcode scanner control in the Powerapps screen. Follow these below things:

  • Sign in the PowerApps app with your credentials.
  • Create a new Canvas app and choose any one Layout either Tablet or Phone.
  • On the Powerapps Blank screen, Insert a Barcode scanner (Insert -> Media -> Barcode scanner) as like below screenshot:
Powerapps Barcode Scanner
Powerapps Barcode Scanner Control

When you will insert the Barcode scanner, it will appear as a Button with an Auto Border Type.

  • Select and rename the Scan button (optional) and apply this below formula on its OnScan property as:
OnScan = Set(varScan, BarcodeScanner1.Value)

Where,

  • varScan = Variable name
  • BarcodeScanner1 = Barcode Scanner Control Name
Powerapps Barcode Scanner onscan
PowerApps Barcode Scanner Onscan
  • Now I will set the scanner variable in a Label control so that whatever barcode it will scan, the code will display in that specific label.
  • Insert two Labels (Insert -> Label) where one is for Barcode Scan Result (To view the text) and in another label, set the variable on its Text property as:
Text = varScan

Where,

varScan = Variable name which is created in the OnScan property of the Scan button.

Power apps Barcode Scanner
PowerApps Barcode Scanner Onscan
  • If you will preview (F5) the Powerapps Barcode Scanner app and click on the scan button, then you will see an error message as shown below:
Power apps Barcode Scanner onscan
powerapps barcode scanner example

It is clearing telling that the barcode scanner control is not supported in the web browser. For that, you need to install the Powerapps on your mobile and then you can use it.

Preview the Powerapps Barcode Scanner app on Mobile

If you will open the powerapps in your Mobile browser and preview the app, then it will tell you to install the Power Apps for mobile as shown below. Just click on the Get Power Apps link to install the Powerapps on your Mobile.

powerapps scanner
powerapps barcode scanner example

After Installation, Signin Powerapps with your Microsoft credential (in Phone only) and go to Apps. Click on your Barcode Scanner app as like below.

how to use barcode scanner in powerapps
how to use barcode scanner in powerapps

It will ask you to allow the Camera permission to use the Barcode scanner. Click on the Allow button.

powerapps scanner control
how to use barcode scanner in powerapps

Now you can see the Barcode Scan button with a Text box in your app. When you will click on the Scan button, the camera will open that will help you to scan a barcode.

powerapps bardcode scanner control
how to use barcode scanner in powerapps

Scan a Barcode using the camera as like below screenshot.

power apps bardcode scanner control
qr code scanner powerapps

It will scan the Barcode and store the Barcode value in the Text box (Barcode Scan Result).

powerapps bardcode scanner
qr code scanning powerapps

Scan the Barcode and Open the link in Browser

Suppose, you want to scan the Barcode and at the same time, it will open the Barcode link in the Browser. Then in this case, simply, you can use the Powerapps Launch function on the Barcode scanner OnScan property as:

OnScan = Launch(BarcodeScanner2.Value)
powerapps barcode scanner control
powerapps barcode scanner control

Open the Barcode scanner app on your phone and click on the Scan button (Scan the Barcode and Go).

powerapps barcode scanner example
qr code scanning powerapps

It will scan the Barcode using the Camera and at the same time, the link will open in the browser.

powerapps barcode scanner examples
qr code scanner powerapps

You can refer the below screenshot.

power apps barcode scanner examples
qr code scanning powerapps

Powerapps Barcode Scanner multiple

Here, We will see how to do multiscan using the Powerapps Barcode Scanner and store it in a Gallery control.

Insert a Barcode Scanner and rename it to “Barcode MultiScan“. Select the scan button and apply the below formula on its OnScan property as:

OnScan = Collect(multiScanCollect, {BarcodeValue: BarcodeScanner3.Value, BarcodeType: BarcodeScanner3.Type, ScannedPerson: User().FullName, ScannedTime: Now()})

Where,

  • multiScanCollect = Collection name
  • BarcodeScanner3.Value = It is a barcode scanner control name that will store the scan values.
  • BarcodeScanner3.Type = It will store the Barcode scan type
  • User().FullName = It will get the full name of the person who recently scanned the Barcode.
  • Now() = It is the function which helps to get the Date and Time when the Barcode scans.
Powerapps Barcode Scanner multiple
Powerapps Barcode Scanner multiple

Add a Vertical Gallery Control (Insert -> Gallery -> Vertical) and select the Data source as “multiScanCollect” (that you are created in the Barcode scanner OnScan property).

Select the Layout as Title and Subtitle. Click on Edit from the Fields section (from Properties pane) and select the fields that you want to view in the gallery.

Power apps Barcode Scanner multiple
Powerapps Barcode Scanner multiple scan

Now on your phone, if you will scan the code by using the Barcode Multiscan button, then the barcode value will collect in the vertical gallery as shown below.

Powerapps multiple scanner
qr code scanning powerapps

Powerapps Barcode Scanner Sharepoint List

Normally, People would have a question that, where they can store the recently Barcode Scanned value.

Not only the Barcode value but also they may want to store more details about the Powerapps Barcode Scanner as Barcode Type, the person who recently scanned, Barcode scanner Time, etc.

In this case, SharePoint List or an Excel spreadsheet is a better option where you can store the Powerapps Barcode Scanner details.

I have created a SharePoint List named “Barcode Scans“. This list has below fields with different data types as:

  • Barcode Scanned Value: By default, this is the Title field with a Single Line of Text. I just renamed it. Here, the Barcode Scan value will store.
  • Barcode Type: This is a Single Line of Text column where the type of Barcode will store.
  • Scanned Person: This is also a single line of Text column which will contain the person full name who scanned the Barcode.
  • Scanned Time: This is a Date picker field (including Time) that will store the Date and Time when the Barcode scans.
Powerapps Barcode Scanner Sharepoint List
Powerapps Barcode Scanner Sharepoint List

In the Powerapps Barcode Scanner app, Connect the Data source as SharePoint. Go to View -> Data sources -> Expand Connectors and select SharePoint -> Add a new connection or existing connection as shown below.

Power apps Barcode Scanner Sharepoint List
qr code scanner powerapps

Connect the SharePoint Site, Choose your SharePoint List (Barcode Scans), and hit the Connect button. Then the SharePoint List will be added into the Powerapps app.

Powerapps Barcode Scanner in Sharepoint List
qr code scanning powerapps

Insert a Barcode Scanner and rename it to “Scan the Barcode to SharePoint List“. Select the scan button and apply the below formula on its OnScan property as:

OnScan = Patch('Barcode Scans', {Title: BarcodeScanner4.Value, BarcodeType: BarcodeScanner4.Type, ScannedPerson: User().FullName, ScannedTime: Now()})

Where,

  • Patch = It is the Powerapps function that helps to create or modify the item in SharePoint List.
  • Barcode Scans = SharePoint List name where you want to store the Barcode scan values.
  • BarcodeScanner4.Value = It is a barcode scanner control name that will store the scan values.
  • BarcodeScanner4.Type = It will store the Barcode scan type.
  • User().FullName = It will get the full name of the person who recently scanned the Barcode.
  • Now() = It is the function which helps to get the Date and Time when the Barcode scans.
Powerapps Barcode Scanner in Sharepoint
how to use barcode scanner PowerApps

If you are new to Powerapps Patch function, then you can refer this link: PowerApps Patch Function with examples

Now in your phone, open the scanner app and click on the “Scan the Barcode to SharePoint List” button. It will catch the Barcode and store the details into the SharePoint List as below screenshot.

Power apps Barcode Scanner in Sharepoint
how to use barcode scanner PowerApps

PowerApps Barcode Scanner to Excel

This is almost similar to the SharePoint List. The only difference is, Instead of a SharePoint List, you will use a Excel spreadsheet.

Similarly, In the Powerapps app, you will connect the Data source connector as “Import from Excel” and choose your Excel spreadsheet name.

Example:

  • Suppose, you have an Excel spreadsheet named “BarcodeScanInfo” and it will have the same columns as above the SharePoint List columns (BarcodeScannedValue, BarcodeType, ScannedPerson, and ScannedTime).
  • In the Powerapps app, Connect the Excel to Powerapps and choose the Excel sheet name as BarcodeScanInfo.
  • Insert a Barcode Scanner and apply this below formula on its OnScan property as:
OnScan = Patch(
BarcodeScanInfo,
Defaults(BarcodeScanInfo),
{
BarcodeScannedValue: BarcodeScanner1.Value,
BarcodeType: BarcodeScanner1.Type, 
ScannedPerson: User().FullName,
ScannedTime: Now()
})

Where,

  • Patch =It is the Powerapps function that helps to create or modify the item in the Excel spreadsheet.
  • BarcodeScanInfo = Excel spreadsheet name
  • Defaults(BarcodeScanInfo) = This Default function will help you to create a new record in the Excel sheet.

Now in your phone, open the scanner app and click on the scan button. It will catch the Barcode and store the details into an Excel spreadsheet.

Also, you may like these below Powerapps Tutorials:

In this PowerApps tutorial, We learned about the Powerapps Barcode scanner control, its important properties, and how to use barcode scanner PowerApps.

Also, We saw all the supported Barcode Types in Powerapps, How to use Powerapps Barcode Scanner Onscan, and Powerapps Barcode Scanner multiple scans.

We learned how to store the Powerapps Barcode Scan in the SharePoint List and as well as in the Excel sheet.

  • Hi, great guide thank you. I have a weird problem though. I created a tablet app first and it worked OK but looked weird on an iphone – obviously 🙂 I then created a phone app and every time I hit the scan button it just says “The barcode scanner is not configured to scan a valid barcode type.” at the top of the screen. It doesn’t matter what I set for barcode type, including leaving it on auto. All I ever get is the same error. And this is all on the same device? Any idea?

  • >