(The current state of) working with barcode and QR code images - #ARCHIVED#

This content has been archived. It may no longer be relevant.  

Working with barcodes and QR codes has improved all kinds of business processes for decades now. As can be read from comments in the PowerApps community, many people expect PowerApps to support working with them.

This blog post is about the current state of working with barcode/QR code images in PowerApps. And yes, working with QR code images has arrived 🙂

Not being able to scan QR codes and certain limitations of the barcode scanner functionality, like the minimum size of a barcode, have limited the usage of the PowerApps mobile app as a scanner solution. As can be read here, the PowerApps team is as we speak redesigning the functionality of scanning barcodes/QR codes, like using the native device’s API’s for detecting barcodes/QR codes.

About two weeks ago, a new (experimental) feature targeted for iOS devices has been introduced which makes it possible to scan QR codes (and Data Matrix codes) too. The PowerApps team aims at September to support Android devices.

Several details about this new scanning functionality need to be formally announced, but I am positive the PowerApps team has listened to the remarks in the community. For instance, being able to use the flashlight is in the specs. On the iPhone 4s I used for testing, I could not use this though.

One of the changes is that a function is used to trigger the usage of the native API’s: ScanBarcode(). Pushing a button is a way to trigger this and it also means that subsequent actions can be set, like navigating to another screen. Using a button is at the moment already the way to go to get the value and navigate to a different screen.

The rest of this blog post gives a more architectural and practical view on working with barcode/QR code images in relation to PowerApps.

Barcodes/QR codes are often used for activities like:

  • Identification
  • Registration
  • Verification
  • Tracking

A barcode/QR code contains 2 parts:

  • An image
  • A value

The value often is a unique number representing an entity like a person, product or event registration, but in practice more representations are possible like a set of choices or an url.

The following activities can happen when working with barcode/QR code images:

  1. The creation of a barcode/QR code image.
  2. The enrichment of an entity with a barcode/QR code image.
  3. Scanning a barcode/QR code image.
  4. Showing a barcode/QR code image.
  5. Printing a barcode/QR code image.

PowerApps supports the third and fourth option, but with the help of Microsoft Flow and other services/software, the other options are possible too. For very specific situations, PowerApps supports the second option too, but these situations are not very likely in my opinion.

From now on, when talking about an image, a barcode/QR code image is meant.

The creation of a barcode/QR code image

SharePoint has an option to show barcodes images. This webpage shows how to enable this. Depending on the solution you want to create, this could be enough. Often, more is needed.

A better solution in my opinion is to use a paid service which creates image files. There are some free services but I would never advice an organization to use a free service when there is no commitment and track record about continuation and without a good fallback plan. Free services are of course very useful for demo/testing purposes.

Some companies already have devices or software which generates images. This is often combined with printing them as well. For them, the second activity which is described in the next section is more important.

Images can be created in real-time or up-front. Which one is useful and/or possible depends on your situation and solution. Creating images up-front could be useful for organizations which use free services.

PowerApps is not really a tool for generating a unique number for an entity on its own. Yes, a guid (or something similar) can be created and when you assume this will be unique, then it is ok. Generating unique values is usually left to the data store the entities are stored in, like SharePoint Online or the Common Data Service.

The enrichment of an entity with a barcode/QR code image

The main reasons to enrich an entity with an image are performance and to be independent of image generation services/software in the future, which could result in additional costs. The reason is not storing the related value. This should be stored in a separate field. Often, an entity does not have to be enriched with an image. Using the related value is enough. Software could also already have the option built-in to show an image based on another field.

PowerApps is very well suited for adding the image related value to an entity after scanning it or adding it manually.

The possibility to add an image to an entity depends on the entity data store. Example: SharePoint has the possibilities to add an image as a list item attachment or within a library. Which option to use depends on the chosen data structure within the data store.

It also depends on the functionalities (controls) of PowerApps. Example: PowerApps can at this moment directly add a stored image as a SharePoint list item attachment using the control “Attachments”. With the usage of Flow, a picture taken with the control “Camera” can be added to several other data stores too. One can even save the image in a “Multiple lines of text” field in SharePoint. The image can then be shown in PowerApps but not in a default SharePoint view/display form.

Often, the image should be a clean image containing only the barcode/QR code, meaning pictures taken are not suitable. PowerApps is not able to generated images as mentioned before. Using a workflow and a service to generate the clean image and enriching the created entity with it is the way to go.

For solutions where the goal is adding a picture taken, PowerApps possibly combined with Flow can be used.

Scanning a barcode/QR code image

Several types of barcodes/QR codes exist. The type of barcodes supported in the past by the control “Barcode” are shown on this webpage.

The types of barcodes/QR codes which will be supported by the new scanning functionality is not yet known. While testing, I could scan QR codes and the following barcode types: UPC, EAN, Code128 and Code39 (so not I2o5 and codebar).

As mentioned, several details about this new scanning functionality need to be formally announced. So we just have to hang on a bit more on this. When you have an iOS device, you can of course already give it a spin.

Showing a barcode/QR code image

Using the control “Image”, an image can be shown in an app. The image could be created in real-time by a service or downloaded from a data store when it has been generated previously. If an image can be shown depends on the service/data store and if PowerApps can access them.

The barcode functionality of SharePoint can also be used to show a barcode. An url like the following must be used https://contoso.sharepoint.com/_layouts/15/barcodeimagefromitem.aspx?ID=1&list=9d451304-f72b-4541-a094-cc45eb4577f2, where “1” is the list item id and “9d451304-f72b-4541-a094-cc45eb4577f2” is the guid of the corresponding list/library.

Identification is one of the reasons to show an image. Example: A company can create an app with PowerApps for one of their events. The app can show a barcode which represents the employee. The app can then be used to register employees when entering the event.

Printing a barcode/QR-code image

PowerApps has no native functionality to print a screen containing a barcode/QR code. The best option in my opinion is to use a workflow which creates a pdf file containing the barcode/QR code (and other relevant information) which can then be printed.

A service outside PowerApps must be used for the pdf generation which is potentially resulting in additional costs or custom development. For enterprises, there is no real alternative. Smaller businesses, or departments within an enterprise, could perhaps work with html files which can be created with Flow. These files then need to be downloaded and printed with the print functionality of the web browser.


[1] Scan a barcode in PowerApps

[2] Barcode scanner control (experimental) in PowerApps

[3] Create a barcode scanning app in minutes!

Related ideas

[1] QR-code scanning

[2] Add ability to navigate to new screen on barcode reading

[3] Barcode Reader Control