Have you ever had a need to scan inventory in and out of a data source? Familiar with Power Apps? Well… guess what… we can put those two things together! In this post I’m going to show you how to make use of the very simple barcode control in Canvas Apps! I’m also going to show you how to take advantage the Select() function to make your barcode scanner button look 10x better!
Using the barcode scanner
So! How do we use the barcode scanner. Well, chances are you might find testing a little tricky whilst developing your app that utilises this control as the control is only supported on mobile devices that operate a camera.
Anyway, very simply you’re going to want to add the barcode scanner control to a screen in your app, then using the OnScan property we can retrieve the value we use our camera to scan, for anything we wish to do in our app!
Simply set a variable with a name of your choice using [The name of your barcode scanner control].Value in the OnScan property so that when you scan something, it takes the scanned value and stores it in that variable.
Now that we have the value of the scanned barcode stored in a variable, we can do whatever we want with it! You could follow the variable setting with a lookup of a record in a table which then gets stored in another variable or collected into a table. You choose! You could even do this prior to setting a variable and just to the lookup directly using the value of the barcode scanner!
It’s that simple!
Making the button pretty 👀
So you’ll notice that the barcode scanner doesn’t quite work like a normal button. We don’t have the option of an OnSelect where we then get the option to open our barcode scanner and scan something. Rather we simply click the button and take advantage of the OnScan property to carry out the actions we want to once we’ve scanned something.
This means we can’t style our button by making a lovely component with some gorgeous HTML which might include some gradient fill and some box-shadow…. oh WAIT… we can! 👀
If you want to take advantage of a gorgeous component driven button like the ones in Kristine Kolodziejski’s UI kit or Luise Freese and Robin Rosengrun’s UI kit… this is super simple!
We’re able to select our barcode scanner control by using the Select() function. Simply pop one of those gorgeous component buttons on your screen where you’d like it, then in the OnSelect property of the component or the equivalent of, you can use Select([your barcode scanner control name]) to select your barcode scanner!
Now you’ve got two buttons on your screen, so just hide the ugly looking one using the Visible property and you’re good to go with a gorgeous looking button that opens up a really easy to setup barcode scanner!
I hope this simple post was helpful, if you’ve got any questions about using the barcode scanner control, pop them in the comments below! ✨