Build an Inventory Counting App, Step by Step

What you will learn

• Connect files and turn them into lookup tables
• Build a workflow with many steps, and a not found lane
• Post a whole count to an API in one request
• Add a PIN login and pair a handheld

Transcript

In this video we build a complete inventory counting app with StepVane. A worker signs in with a PIN, chooses a site, and the app loads that site's stock. Every scan updates the counts, so you can see what has been counted and what has not. At the end, one tap posts the whole count to your own API endpoint. We will go slowly, one step at a time.

This is StepVane Studio. The Apps page lists everything you have built. To start, press New app.

Type a name for the app: Inventory Count. Then press Next, and choose a blank app, because we will build every piece ourselves.

First, the data. Your stock list normally comes from another system, so we connect files that live on the server. Open Data, then Connections, and press Add connection. Choose File. Give the connection a name, Sites file, and type the file name. Studio reads the file straight away and shows the first rows, so you know it works. Then press Done.

Now the same again for the stock file. This one lists, for every site, the items expected there, and how many.

Next, turn each file into a lookup table. A lookup table is a copy of the data that every handheld carries, so scanning works even when there is no signal. Open Lookup tables, add one, and name it Sites. Choose A file on the server, and pick the Sites file. Studio builds the columns for you.

Do the same for Stock. Notice that nothing was typed: the columns come straight from the file.

Now a device table. This is a scratch list that lives on the phone. We will copy the stock for the chosen site into it, and count against it. Name it Count lines. Give it four columns: item, description, expected, and counted. Then make expected and counted numbers.

Now the pages. Open Build. The first page asks which site the worker is at. Add a dropdown, and call it Site.

Set it to read its options from a table, the Sites table. Show the site name, and save the site code. Then rename the button to Load inventory.

Add a second page, and call it Scan items. This is where the counting happens. Add a barcode field for the item.

Add three number fields: items to count, items scanned, and still to scan. Then add a data grid, and point it at the Count lines table, so the worker sees every line and its counted quantity. Finally, remove the default button, because the scan itself will drive this page.

Now the workflows. Open Workflows. The Load inventory button already has a workflow. A workflow is a list of steps that run in order, and you add each one with the plus button. First, remove the default step.

Step one: Remove rows. Choose the Count lines table, and all rows, so every count starts clean.

Step two is a loop: For each row. Choose the Stock table, and add a condition: the site column equals the site the worker chose.

Inside the loop, add a row to Count lines. Press Add a value, choose the item column, and click the item from the stock row in the list on the left. Then press Also set, and do the same for the description, and for the expected quantity. For counted, we do not copy anything: choose the counted column, and type a fixed value of zero, so every line starts with nothing counted. That is four values, and the loop repeats them for every stock row at this site.

Step three: Count rows. Count the lines in Count lines, and put the answer in the items to count field.

Then two Set a field steps. In the first, choose the items scanned field, and give it the fixed value zero. In the second, choose the still to scan field, and give it the total, by clicking items to count in the list on the left. The worker starts with nothing scanned, and everything still to scan.

Finally, Go to a page, and choose Scan items. That is the whole workflow: seven steps, and each one reads as a sentence.

The second workflow runs whenever the Item field is scanned. Press New workflow, choose A field is entered, pick the Item field, and name it Item scanned.

Step one: Find a row. Look in Count lines for the line where the item column equals the item that was just scanned. Click the item field in the list on the left to fill in that value, and call the row Count line.

If nothing matches, the not found lane takes over. Add a beep with the error tone, a message that the item is not on this site's list, a Clear fields step, and Move the cursor, so the worker can simply scan again.

Back on the main path: Change rows. Where the item equals the scanned item, change the counted column. Open the expressions tab, and choose the value plus one option. Then pick which value to add one to: the counted quantity of the Count line we just found. This is the step that makes the count go up each time the same item is scanned.

Now two Count rows steps, which keep the totals honest. First, count the lines in Count lines where the counted quantity is greater than zero, and put the answer in the items scanned field. Choose the table, the field for the result, then a condition: counted, greater than, zero. Second, count the lines where counted equals zero, and put that answer in the still to scan field. Because both numbers are recounted from the list after every scan, they can never drift apart, even if the same item is scanned twice.

Finish with a confirmation message that shows the item, clear the field, and move the cursor, ready for the next scan. That is eight steps, and no code.

Now the endpoint. Under Connections, add a web service connection. Name it Inventory API, and type the base address of your API.

Choose bearer authentication, and enter the token. It is stored encrypted on the server, and the phone never sees it.

Press Test. A green two hundred means the endpoint answered.

Next, Send data. This is where an app writes its data out. Choose a web service, then pick the Inventory API connection. Read the sentence: when Post is pressed, send every line in Count lines. Give the send a name, and type the path, slash api slash counts.

Press Match by name, so each line carries its item, description, expected and counted quantity. Tick send all lines in one request, so the endpoint receives a single batch.

Now press Make a Post button. Studio adds the button to the page, and the workflow behind it.

Open the Send data step. Add two page values: the site, and the signed in operator. They travel with every line.

Now, control exactly what is sent. Most endpoints expect one particular shape. Back in Send data, under Each request sends, choose Build it. Rename the list to lines. Then add a name for each field your endpoint wants, and pick where its value comes from: sku from the item, name from the description, qty from the counted quantity, then the site, who counted, and the time. Names can also be grouped, and lists nested, if your endpoint wants a more complex shape, and a fixed value can be typed in for anything constant. The preview shows the exact request, so you can match your endpoint's documentation.

For the login, open Settings, then Operators. Add each person with a name and a PIN of at least six digits. The PIN is scrambled before it is saved, and nobody can read it back. Every record will carry the name of the person who counted.

Now publish the app. Studio checks it for problems first, and then version one point oh is live on your server.

Then pair a handheld. In Devices, show the pairing code. On the phone, type the server address and the code.

On the handheld, the app asks who is working. Dana picks her name and types her PIN.

She chooses the Dallas site, and taps Load inventory.

The five Dallas items appear, with a total of five, and five still to scan. Now she scans. The gloves are counted once, then a second time, so the count goes to two. The pallet labels are counted. The scanned and remaining numbers change after every scan. An item that is not on this site's list is refused, with a beep and a message.

When the count is done, one tap on Post sends every line at once. The phone confirms it: sent five lines to the Inventory API.

And here is the batch that arrived at the endpoint: one request, shaped exactly as we built it, with every line, the site, who counted, and the bearer token that proves who sent it.

That is a complete inventory app, built with workflows, data connections, a login, and an API post, without writing code.

Related

• Inventory count
• Excel and CSV files
• REST APIs and web services

More guides

• ← Install StepVane and Build Your First Barcode App
• Describe the App You Want and Let the AI Helper Build It →
• All video guides