Introduction
One of the features of Power Apps is the Bar Code scanner control that lets you read the data embedded in a barcode using the camera of the mobile. The bar code scanner control works in android or iOS devices. It doesn’t support scanning in the web browser as of now.
With this functionality, with just mobile and power apps, we can build powerful inventory management apps that most often read the bar code labels on the product or items.
In this article, we will see how to leverage the bar code control in a warehouse management app.
Scenario
We have a requirement where we have a warehouse that accepts bulk storage of household items from a customer and store it in the warehouse at a predetermined location for a certain amount of time.
We want to build an app that takes the inventory of the incoming warehouse items and store the data to a SharePoint Lists back end which contains the below columns.
When the customer submits his items, a label with a barcode indicates in which Vertical Tower, Rack Number, and the Associated Shelf Number are stamped onto the storage item. We will be using a Power App to collect the details of the inventory and we will use the bar code scanner to scan the storage location details from the bar code label stamped on the storage item.
Implementation
As the first step, let’s create a list named Warehouse Inventory List with the above columns which will act as the backend for the Power App. Followed by that we will head over to make.powerapps.com and create a canvas app and add a data connection to the SharePoint List
It will ask for the SharePoint site to connect, mention the site name and click on connect.
Finally, select the list which acts as the back end and click on connect to complete the data connection.
Then we will add the fields corresponding to the columns in the SharePoint back end to the Screen of the app.
We have added the Barcode Scanner to the screen so that when we click on it, the camera will open up and the scanned text will be copied to the adjacent text box that will hold the storage location information from the barcode.
In the OnScan property, we will add the below expression which will get the scanned value and assign it to the variable ScanValue
| Set(ScanValue,BarcodeScanner_Scan.Value) |
We will then assign the variable that stores the scanned value of the storage shelf location to the Storage Location Text input so that we can save it back to the SharePoint list.
Save the Data to SharePoint
Finally, let’s save the manually entered data and the scanned bar code data to the SharePoint List using the below patch function
| Patch(‘Warehouse Inventory List’,{‘User ID’:TextInput_UserID.Text,’Number of Boxes’:Int(TextInput_NumberOfBoxes.Text),’Flammable?’:Checkbox_Inflammable.Value,’Corrosive?’:Checkbox_Corrosive.Value,’Fragile?’:Checkbox_Fragile.Value,’Storage Location’:TextInput_StorageLocation.Text}) |
Test the Bar Code Scanner App
Now let’s do a test of the Warehouse management app and see the bar code scanner in action. As we cannot test it from the browser, I am opening it from my mobile using the Power Apps, mobile app.
It has opened the App and we will add the manual data values first
Now we will click on the Scan button of the bar code scanner which opens up the camera app, let’s scan the bar code label
It has extracted the Bar code text and copied it to the Storage Location input box.
Let’s go ahead and click on Save Storage Details which will save the data to the SharePoint back end.
Summary
Thus, we saw how to create a basic warehouse management app that uses a barcode scanner to scan the bar code labels and capture the embedded data and save it to the SharePoint back-end list.
