Blog

General - How to display barcodes

Power Apps provides great support for scanning barcodes. How to display barcodes may not be as obvious. In this post, we'll look at a quick and easy way to display barcodes in a canvas app.

Before Power Apps, I worked on warehousing projects that required custom hardware and specific coding to implement barcode scanning functionality.

With the rich data capabilities that Power Apps provides (including a barcode scanner that works on iOS and Android devices) it's astonishing how easy it is to build apps for warehousing, stocktaking, and logistical purposes in a no-code way. For reference, the documentation here provides full details about the barcode scanner control.
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-new-barcode-scanner

Although it's very easy to scan barcodes, it is not so obvious how we display barcodes in an app. Thanks to a tip I picked up from Power Apps expert Randy Hayes, I'll describe simple way to carry out this task.

Overview of technique - use an online barcode generator

It turns out that there are many websites that convert barcode numbers to barcode images. A Google search on the term "free barcode generator" reveals a long list of many.

Many of these sites provide a service where we can specify a web address that includes a reference to a barcode number. The service returns a barcode image that corresponds to the input barcode number.

Here are 3 that I found from a web search, and I've added a summary of the image URLs that we can use. Note that I don't have any specific experience of any of these services and therefore, it's important to carry out your own due diligence on your chosen provider, including any conditions on the commercial use and licensing of the service.

1 - Cognex

Cognex provide a range of barcoding services. Here is the link to the Cognex website.

As with most of these sites, there is the option to generate a wide range of barcode types, including linear, QR, EAN/UPC, and more.



The barcode URL format for Congnex looks like this:

2 - Barcodes Inc

Barcodes Inc is another service. Here is the link to their website.

The barcode URL format for Barcodes Inc looks like this:

3 - Barcodes Tec

Here is the link to another barcoding service - Barcodes Tec. The link to their website is here.

The barcode URL format for Barcodes Tec looks like this:

How to display a barcode on a screen

To display a barcode on a screen, we add an HTML text control, and set the HTMLText property of the control to include an image with an SRC value that points to barcode service.

In the example beneath, I've added a text input control where the user can enter a barcode number. The name of this control is txtBarcode.

We can then set the HTML text property of the HTML control to the following value in order to display from Barcodes Inc, the barcode that corresponds to the input value that the user enters into the text input control.


Conclusion

A quick and simple way to generate a barcode image from a barcode number is to use an online service. In this post, we covered 3 available services.To display a barcode image on a screen, we use an HTML text control and we set the HTML of the control to display the image from the barcoding service.

Previous
Next
Related posts