With build 500 you can build a barcode scanning app that works on all your mobile devices and… in your Chrome browser.
PowerApps community, thank you for providing solid scenarios and further sharing barcodes with us on the Ideas forum. It was key information for us to shape and focus our first version of barcode scanning. Please do keep up this great engagement to help us refine and mature the barcode scanning experience! It this blog post I’ll give you a quick intro on how to:

• Configure the new barcode scanner control
• Consume its outputs in conjunction with a data source (using our Common Data Model in this example)
• Allow the app users to dynamically change key properties.
• Key best practices and how to fine tune the barcode scanner parameters to device specific limitations.

 

How does the barcode scanner work?

As soon as you add a barcode scanner to your canvas you’ll quickly notice it looks a just like the camera control. Since the camera is in continues capture mode, the barcode scanner detects live the barcode in focus. This design makes the barcode scanner handle gracefully batch scanning scenarios.
Here’s couple of key properties to get you familiar with the barcode control before starting our tutorial:

Barcode specific properties

Barcodedetection: Shows a live detection rectangle while searching for barcodes. When a successful scan occurs a red line highlights the barcode being scanned.
BarcodeType: Used to instruct the scanner on the expected barcode type to recognize. Codabar, Code39, Ean, I2of5, Upc. Please refer to the “Barcode types supported” section of the article for more details.
ScanRate: Number of scans per second. By default, this is set to 60 scan per second for fast detection. On phones, this value needs to be lowered between 45 to 35. This is just to accommodate the device memory constraints while still providing a good scanning experience.

Properties controlling the camera quality

Zoom: Works just like the zoom feature of a camera. The default zoom is at 50, you can increase it to 70 or more to allow holding your phone to within the desired distance from the barcode (to accommodate tight spaces, etc)
Brightness: helps add more light into the picture if you need to scan in dark conditions
Camera: Set to the specific value of your device (1,2, 3) that selects the front or the back camera.

Now that you are familiar with the barcode, let’s quickly get an overview of the tutorial steps:

Using a barcode scanner in conjunction with a data source

Step 1: Create an app from data using leveraging Common Data Model.
Step 2: Customize the first screen to filter records based on barcode being scanned.
Step 3: Fine tune the parameters of the barcode and try it out

1: Create an app from data using Common Data Model

Let’s imagine I have an inventory of assets and I’ve labeled them all with Code39 barcodes for internal tracking. To keep the tutorial simple, I’ve stored description of the item is stored along in the very same table.
To create this Entity, I went to web.powerapps.com clicked “New Entity” and named my table Equipment. The entity already has a field named “Title”, so I’ll quickly added “SerialNumber” and InStock fields as follows:

Next I’ve opened it in Excel and added couple of records

With the Equipment entity ready use, I’ve opened Studio and start creating and app from data using Common Data Model as Connection.

Once I got the app generated I’ve switched the layout to have a status bar on the right side. To show inStock/outOfStock status as blue and red respectively, I used an If expression that switches the Fill color accordingly. Next, I’ve configured the fields in the gallery to point to “SerialNumber” and “title” as shown in the next picture:

2: Customize the first screen to filter records based on barcode scanning

Let’s move to our next step of the tutorial where I’ll be adding a barcode scanner control that would filter from list of items to the item scanned. This would make managing the assets so much faster, no need to type in the code anymore!

The barcode control is available under Insert>Media. Once added there is a key step in a successful application/
The scanner is feeding the live image from the camera stream and it is key to size the barcode control to the optimal value for your targeted devices.
As general guidance, a size going below the half of the screen height is likely to provide a too low of an image quality for good barcode detection. Also using a full screen experience can be very costly on the memory consumption, particularly on iOs devices.
Based on my testing, the maximum size iOs can support successfully is at 640x700. In current example the scanner is sized at 640x 501, at the smallest size I could set to get successful scans with my devise (this really depends on the resolution of your camera).

My next step was to configure the barcode scanner to filter out items based on the scanned value. I’ve selected the search edit fields and set it’s “Default” property to the Barcode1 control output. As a best practice, I would always use an editable input control rather than a read only label to show the result of the barcode scan. This gives a good chance to the end user to type in a barcode that can’t be recognized due to label quality/size etc.

 

3: Fine tune the parameters of the barcode

There’s a number fine tunings to make on the barcode scanner depending on the scanning scenario being targeted (size of the barcodes, distance desired for scanning, types of devices to be used, etc)

First, I’ve changed the default barcode type to be Code39 instead of UPC. Next I’ve set the Zoom level to 70 to get a little zooming effect/ makes it easy to scan when you have labels with multiple barcodes next to each other. The most important setting to do is to have the BarcodeDetection (the ShowLiveBarcodeDetection) on. Some of the older devices might struggle/ have performance issues with this setting on. If your device handles this gracefully I would highly recommend enabling it as it gives live feedback to the user weather a barcode is recognized by showing a yellow rectangle. Further on a red line across would show as soon as the barcode recognition has successfully identified all characters/digits in the barcode under focus. 

Now is time to test it out! The barcode gets recognized as the live camera sets focus on it and further on as soon as the value is available the search field gets populated. This would trigger of course the filtered search on the Equipment entity to find the item with this barcode. You can grow the app further on here by navigating to the “add new equipment” form at the point the search result returns zero items and pass in the new barcode value.

 

Does your app need to be configurable at runtime?

Do you need to scan multiple types of barcodes (like UPC and EAN) or camera setting such as zoom?  The following steps will walk you through how to enable zoom and also enable scanning multiple barcode types.

Choosing between two barcode types while running the app

Let’s add a radio group to be used as a way for user to choose between two barcode types.
After adding the radio control to the canvas, I’ve select the Items property and set it to BarcodeType.Barcode and BarcodeType.Code39 as show below. The radios are going to automatically display the description of the barcode types (Barcode and Code39). Next step was to select the barcode control and set its BarcodeScanner.BarcodeType to the selected value of the radio (type Radio1.Selected.Value to wire in the interaction).
With these steps app users are now able to switch between the two barcode type when running the app.

 

Adding zoom in/out capability at runtime

First I’ve added a slider from the Insert>controls menu. Next, with slider being selected I went into the content menu tab and set its min value to 50 and its max value to 200.  I’ve further changed the layout from Horizontal to Vertical under the “Slider” tab. As a last step select the Barcode and set its Zoom property to point to Slider1. Now is time to move the slider up and down to test it out!

To make the best of barcode scanning experience, there’s couple of functional aspects to learn about. Let’s further get into the details of couple of functional aspects:
- The types of barcodes supported
- A few known limitations and best practices to use the camera capabilities from your device to its very best.

Barcode types supported

This very first version is focused around 1D barcode such as
- Product number labeling: UPC, EAN
- Serial numbers for various hardware: CodeBar, Code39
- I2O5 for its printed tolerances are sufficient for the highly variable printing techniques used for corrugated cardboard
Here’s a quick sample of the barcode types supported, just to have them handy:

 

Best practices and scanning constraints

1.Ensure a distance of 7-10 inch and slowly move the device in this range to speed up the scan rates
2.Need to hold the phone in the locked orientation (portrait) to scan successfully.
3.Barcode labels need a min height of 1inch and min width of 1.5 inch to ensure high success rates.

Known limitations

1.The app needs to lock down a certain barcode type or expose to the user the option to choose the type before scanning.
2.On mobile players (Android, iOs) the camera preview has a locked ratio (does not stretch to full width available).
3.Long barcodes (15+ characters like I2O5) with low quality labels can give trimmed/erroneous scan values while scanning from a different distance/light conditions, etc.
4.The barcode control needs to have a height of 500x 700 or higher. Further on, iOS has lower success rates than Android devices due to memory limitations. Please set the scanner width and height to 640x700 or lower and scan rate of 30 to avoid such errors.
5.Scan rate needs to be set at 35 rather than 60 (the default) to ensure an optimal memory utilization.
6.When running the app long time/ locking unlocking the scanner can freeze sporadically, need to restart the app to recover.

Next steps

As next investments there’s couple of exciting areas to gather your thoughts and feedback on:
- Enable multi-barcode type simultaneous recognition
- Recognize 2D labels like QR and driving licenses.
- Move to a native camera stream experience (would work as a full screen pop-up that captures one barcode at a time)
- Support multi-barcode labels (such as product labels combining the product code and the unique serial number)
What is the very next feature that your barcode scanning app needs the most? Looking forward to your comments under the article section or our PowerApps forum.