Scan Barcodes using Power Apps Barcode Reader [Display Product Information]

By using the Power Apps Barcode Reader control, we can read a barcode and collect information about that specific product. In this Power Apps tutorial, we will discuss, how to scan barcodes using Power Apps barcode reader control and get information from a SharePoint list and display this information using the Power Apps display form in a canvas app.

Recently, I got a requirement from a client to scan a display some product information using a Barcode reader. Here I have a product list having the below columns.

Columns Name	Data Type
Product	Single line of text
Purchased Date	Date and Time
Purchased By	Person or Group
Purchased Quantity	Number
Model Image	Thumbnail
Product Color	Choice
Bar Code	Single line of text

And it has a few items like below.

Now, when a user scans a barcode, it will show product information in a display form. Information like:

• Product Image
• Product Name
• Product Color
• Purchased Quantity
• Purchased Date
• Purchased By
• Barcode Code, etc.

Below, I have shown a screenshot, where I scanned a product’s barcode via Power Apps barcode reader. Once it is scanned, the respective product’s information is displaying like below:

Display Information by Scanning Barcodes using Power Apps Barcode Reader

Now, let us build the app.

Make sure to create the SharePoint list with the required columns as shown in the above table.

• Build a blank canvas app and connect the above-mentioned SharePoint list to the canvas app.
• Add a Barcode Reader control to the Power Apps screen and give a text to this control (i.e., Click Here to Scan)

• Next, add a Power Apps Display Form to the Power Apps screen.
• Connect that Display form to the SharePoint data source (i.e., Products Purchased). Go to the right-side Properties Panel > Fileds > Add fields.
• Add all the fields to the Display Form. As a result, the form will appear as shown below:

• By default, I don’t want to display the above data fields when the app will visible. The data fields will visible only when the user scans a valid barcode. To implement this, the following steps are:
• I have created a variable in the Barcode reader’s OnScan property.

OnScan = Set(VarOnScan, true)

Where VarOnScan is the name of the variable name.

• Use this variable on the display form’s Visible property.

Visible = VarOnScan

• Again, insert the below expression on the Screen’s OnVisible control.

OnVisible = FormViewer1.Visible = VarOnScan

• Next, add a Power Apps text label control and place it on the display form and add texts to the label control i.e., “Click On The Scanner and Scan the Barcode To Get The Details“
• Insert the below expression on the label’s Visible property.

Visible = !VarOnScan

• To display the scanned item’s information, insert the below expression on the Display Form’s Item property.

Item = LookUp(
    'Products Purchased',
    'Bar Code' = First(Product_BarcodeReader.Barcodes).Value
)

That’s it! Now, publish the app and run it via Power Apps mobile app. For this, on the Power Apps mobile app, navigate to ‘Home’. Here, you will get all the recent apps as shown below:

Select the canvas app that we have created.

Once the app opens, initially it will appear as shown below:

Hit the ‘Click Here to Scan‘ button to scan a product’s barcode. Suppose, I am going to scan a barcode, whose value is ‘ABC-1234‘. Click on the Tick icon to submit the scanned barcode value.

Now, we can see that the scanner value retrieves the product’s information and it will display that data via the Power Apps Display Form as shown below:

In this way, we can retrieve the product’s information and display it within the Power Apps canvas app.

Display error message if Scanning Barcode is not matched

Here, we will see how to display an error message if the scanning barcode is not matched. That is if the scanned barcode value does not match the stored SharePoint list barcodes or if it is invalid, then it will notify the user via an error message.

Below, I have displayed a screenshot where I tried a random barcode from the browser. As the scanned value is not matched to the data source’s barcode values, it is displaying an error message.

To implement this, the following steps are:

• On the above canvas app, insert the below expression on the Power Apps Barcode Reader Control’s OnScan property.

OnScan = If(
    First(Product_BarcodeReader.Barcodes).Value in 'Products Purchased'.'Bar Code',
    true,
    Notify(
        "Invalid Barcode",
        NotificationType.Error,
        4000
    )
)

That’s it! Now, we can see, while scanning a barcode it will check whether the scanned barcode value is matched or not to the stored barcodes. If it is matched, then it will display the respected product; Otherwise, it will notify an error message.

Conclusion

We saw in Power Apps that we could scan a barcode and extract the corresponding data from a SharePoint Online list by using a barcode reader control. We also saw how to show the retrieved data using a Power Apps Display Form.

We’ve also shown how to provide an error message if the scanned barcode value does not match.

You may like the following Power Apps tutorials:

• How to Add Gallery Data to a Collection in Power Apps
• Power Apps Modern Radio Group Control
• Power Apps Modern Checkbox Control
• Filter Gallery by Current User in Power Apps
• Power Apps Import Package Error: Something went wrong. Please try again later.