Barcode Scanner with Microsoft Power App

As starting my Power Apps  learning journey from the last 6 months, I presented a session on Power Apps in Microsoft Ignite Sydney 2019,

In that session, I demonstrated some of the features for Power Apps. One of the features that was interesting to me was Barcode Scanner for web browser available in the Preview features.

In this post, I will show how simple create a Barcode scanner.

So to start to navigate to the Power apps website


2- login with your office365 account

3-then create a blank form for Tablet view, not Phon view

Now in the blank canvas, you need to import two items in the canvas

1- a scanner

2- a text box


to insert the scanner, for the tablet, you need to first enable it as it is a preview feature, means still on test, may some changes happen to it, so it isn’t yet available in tools bar, you need to make it enabled.

to do that navigate to the: File->App Setting then Advanced Settings and under the preview features to search for the “ Web Barcode Scanner” 

Next, back to the canvas, click on the Insert option, then click on the Media and choose the new tool “Web Barcode Scanner”,  there is another Barcode scanner there that is available for both Phone and tablet design, and is not in preview. However, I found the web one a bit easier to use :).

Next, put the web barcode scanner into the canvas, and then

at the top of the page, there is a dropdown list that shows the properties of the Barcode scanner, the default one is ” Barcode Type”, however you able to check another one,

one of the interesting is Camera which accepts number from 0 to as much as the camera is connected to your laptop. as you can see in the above picture it shows back of my camera (table) and the camera value is 1 if I want to change it to from camera I need to change the value to 1.

Next, I am going to insert a text box to show the result of the barcode scanner there, to do that, click on the Insert-> Text Box. Then choose the image attribute as Default Value: Barcode1.Text

as you can in the left panel, we able to see 3 main elements:

1- screen: the page that we create our barcode scanner

2- Textbox to shows the barcode results


next, just click on the file-> save and put a proper name for it.

To test it I use my phone so first, you need to install power apps application in your mobile

you should see the app in the list

Now, click on the application name and you  will see how it workings, scan a barcode

and then scanner able to get the number, however, still this one is in preview and you should make sure to take a clear picture.

I am still waiting for more update on the feature, however, it is so nice and you can use it for your applications


Leila Etaati on LinkedinLeila Etaati on TwitterLeila Etaati on Youtube
Leila Etaati
Trainer, Consultant, Mentor
Leila is the first Microsoft AI MVP in New Zealand and Australia, She has Ph.D. in Information System from the University Of Auckland. She is the Co-director and data scientist in RADACAD Company with more than 100 clients in around the world. She is the co-organizer of Microsoft Business Intelligence and Power BI Use group (meetup) in Auckland with more than 1200 members, She is the co-organizer of three main conferences in Auckland: SQL Saturday Auckland (2015 till now) with more than 400 registrations, Difinity (2017 till now) with more than 200 registrations and Global AI Bootcamp 2018. She is a Data Scientist, BI Consultant, Trainer, and Speaker. She is a well-known International Speakers to many conferences such as Microsoft ignite, SQL pass, Data Platform Summit, SQL Saturday, Power BI world Tour and so forth in Europe, USA, Asia, Australia, and New Zealand. She has over ten years’ experience working with databases and software systems. She was involved in many large-scale projects for big-sized companies. She also AI and Data Platform Microsoft MVP. Leila is an active Technical Microsoft AI blogger for RADACAD.

Leave a Reply