“Hi, do you have any more of these in stock?”
Sure, let me check my inventory management app!
Hey PowerAddicts! Welcome back to NextStep Creations. This post marks the first of three instalments, in which we’ll guide you through creating a simple, but powerful inventory management application.
First off, let’s look at what you’ll be building over the coming tutorial!
Finished Inventory App
At the end of this series, you’ll have a nice, pretty inventory app, that will allow you to:
- Scan barcodes and enter a product description and quantity
- Save these barcodes, descriptions and quantity to SharePoint or SQL
- Display a list of all your inventory
- Search your inventory and order the results by different criteria
Here’s a screenshot of the finished layout:
<———————–SCREENSHOT OF FINISHED HERE———————–>
Building the inventory front end
Let’s start by creating the basic layout of the application. We’ll have a home screen with 2 buttons, labeled “Enter Item” and “Search Items”.
Straightforward so far. In this part of the project, we’re going to be focusing on creating the Enter Items section.
Building the “Enter Items” screen.
Create a new screen in PowerApps, and set it up like so:
There’s a few little things here that you’ll have to set up.
The “Scan” button is actually a barcode scanner object in PowerApps. You can add this by going to “Media -> Barcode scanner” in the insert menu at the top:
In the “Product Description” text input, set the Mode value to:
In the “Quantity” text input, set the Format value to:
Also set the “VirtualKeyboardMode” to:
Perfect! The rest are just standard buttons and Labels, so lets move on.
Handling barcodes – pulling the scan data (the critical part of inventory management)
Time to get to the fun part. Reading the barcode numbers from your camera.
Note: You will have to use the application on your phone/tablet, as currently PowerApps does not support barcode scanning in the web version.
Alright! Select the “Scan” button we set up before, and find the “OnScan” action. Set the value of it to the following code:
This will set a variable called barcodeNum to the value of the barcode scanner object we inserted before.
Now, the label you have that says “Barcode number: “. Time to append the barcode number to this. Set the “Text” property of this control to:
“Barcode number: ” & barcodeNum
Now go ahead, save your app and give it a test! Remember to add a Navigate() function to your home screen so you can get to the enter items page.
When you click the scan button, you should be presented with the camera on your phone, and a nice green square, like so:
When you hover over a barcode, you’ll hear a “BEEP” and then it’ll take you back to the app. Everything going to plan, you should see your screen with a barcode number on it:
You can fill out the description of the product, and add in the quantity of the product you have.
And that’s it for part 1! In the next part, we’ll look at setting up the back end so that we can save our scanned items to SharePoint or SQL. In part 3, we’ll look at searching the database and adding other cool functionality.
Hopefully by now you can start to see the power of this application, and your mind is racing with ideas. Leave a comment below or reach out to us on twitter at NextStep Aus, we’d love to see what you made!
Check out our other blog posts here: