Transcript
In this lesson, we are going to create our inventory page and the ability for warehouse managers to create new inventory products to add to our warehouse. We will get started by going into our studio.
We go to pages and see that this page is currently called products instead of inventory. We will click on products, go to page settings, and update the general name and the page URL to inventory. This means you will access the page via your domain slash inventory.
Softr has already pre-mapped a grid block for us in a smart way, which saves a lot of time. However, there are additional things we want to do. First, we want to make sure that the source matches our products table, which it does.
At any time, if you want to switch the block type, you can change this to a list, a table, or even a calendar. For our content, I am going to select the medium size layout and update the title to inventory.
We have an image field that works well and media tags, but no tag is currently selected. I am going to set up an inventory level tag to show if the level is high, medium, or running low. We can show or hide this by clicking the eyeball button.
[.blog-callout]
Note from Softr: Instead of manually building out these pages and mapping fields, you can use the AI co-builder to generate complete App templates with pre-configured databases and layouts just by describing your needs.
[.blog-callout]
Now we have our inventory levels alerting us if an item is low. I will make the product title an H3 size to keep it clean. Instead of sell price, I want to show units available and units sold.
I can add any of these fields to the display just by toggling them in the content settings. Now I can see clearly that one item is out of inventory with a negative count, which is important for us to know.
Next, we have action buttons. Right now, there are item buttons that allow you to edit or delete a direct item. In our case, I am going to remove those specific buttons to keep the interface clean.
We also have a top-level action button where we will create new products. I will rename this to add product and configure the information the warehouse manager needs to input.
[.blog-callout]
Note from Softr: While this speaker is setting up manual action buttons, you can also use Softr Workflows to trigger specific business logic or notifications automatically whenever a new product is added to your Softr Databases.
[.blog-callout]
We want them to provide an image, description, purchase price, sell price, and the related supplier. I will make the product name and sell price required fields. We are using a number field for the purchase price as structured in our database.
For the suppliers field, we are using a dropdown. Softr makes it easy to bring in sources for your dropdown, but you have to sync with the source first. This pulls in all the suppliers from your database as selectable values.
Once a new product is added, we want to direct the user to the inventory details page. A detail page in Softr allows you to click into an item to see more specific data or related items.
Now we need to set permissions. We only want warehouse managers to be able to create new inventory, not sales managers. We go to button visibility and select logged-in users with the user groups for warehouse managers.
We can also configure the search bar. Currently, it finds results based on product name or sales price, but I am going to change it to search by product name and supplier name instead.
[.blog-callout]
Note from Softr: If you find yourself needing a highly specific search or filtering component that isn't available out of the box, you can use the Vibe-Coding block to prompt for a custom-designed component that fits your exact project management needs.
[.blog-callout]
When we preview as a warehouse manager, we see the add product button. Searching for an item like a battery brings up the correct results immediately. Clicking into a product brings us to the inventory details page.
You will notice a specific record ID in the URL. Softr intelligently appends that record ID so the page knows exactly which item to show. We also have a listing here showing related sales orders.
Back in the studio, we will rename the product detail page to inventory details. On this page, I want to add more fields such as purchase price, units purchased, units available, units sold, and the inventory level.
