Transcript
Welcome back. In this lesson, we are going to build our supplier page. Our supplier page is where warehouse managers can go in and add the vendors that this warehouse purchases from and the product that they buy from those vendors.
We will create the listing and also the ability for warehouse managers only to create new suppliers. We will also create the detail page for suppliers. So let's get started.
First things first is we are going to go over to our pages area. Then we're going to go all the way down to suppliers. Softr has already intelligently pre-built this page for us using a lot of stuff that we like already.
We can see that we have this list block here that is already built and set up for our suppliers. That's looking really good. But we're going to go and just customize some of these things.
We're going to make this a little smaller and change some of the content we use. We're going to get rid of some of these action buttons here and then we will configure our actual add supplier action button as well.
[.blog-callout]
Note from Softr: Instead of building pages and blocks manually, you can use the AI co-builder to generate entire pages or database schemas instantly by simply describing what you need.
[.blog-callout]
Starting with that, let's go to content. I want to change the way that the logo is appearing. I think right now it's just a little bit too big, so instead of cover, let's try contain.
Now I am going to go down to the name area right here. That looks good. Let's go and add another field for email.
Then also let's add the products that they carry. We will go up here and we will say products carried. This is formatted as a tag right now, and I like the tag formatting when there's multiple items.
For the contact name, I'm actually just going to remove the label that we see here. I think that might look nicer. So we have the supplier name, our contact at that company, their email, and the products that they carry.
Let's go into actions and remove our item buttons here. I am also going to go back to content and just make these medium. We have been going with medium width for this overall.
Now I am going to close this out because we already have that detail page created. I will add an adjustment here. Right now this is center-aligned, but I want to make it left-aligned.
In order to do this block style alignment, I'm going to go into styles and I'm going to go to title and subtitle and I'm going to make it a left align there. That looks much better for the app I am building.
I am going to go into the add record and I'm going to update it to add supplier. This is where we are going to allow the warehouse manager to add a new supplier.
We will choose which fields we want them to input when they are adding a new supplier to the system. We want their name, email, logo, phone number, and the products carried.
We will adjust the way the modal looks. Right now it reads add new record, but let's say add new supplier. We will also set a success message: new supplier added successfully.
When you create a new supplier, let's have it bring us to the supplier detail page. That page was already built for us because when we connected Softr to our supplier database, it pre-built the listing and details page for us.
[.blog-callout]
Note from Softr: While you can connect to external apps, Softr Databases is a powerful native way to manage your data directly within Softr for better performance and a unified experience.
[.blog-callout]
Let's just go and double check our search to see what it is searching by. Name and contact look good. If you wanted to add any more filters for products, you could do products carried so the data from your data source is synced.
Before we create a detail page, let's go and test the add supplier button. I am going to go to preview. Oh, we forgot to make visibility just for the warehouse manager.
Right now the button is visible to the sales manager. Let's go back and go to button visibility. We will set it to logged-in user, warehouse manager only.
Now if we go back to our preview, we can be sure that only the warehouse manager can create a new supplier. We are logged in as Olivia, our sales manager, and she cannot add any new suppliers.
But if we go in as Ethan, our warehouse manager, he will be able to add the supplier. Softr has already created this for us. This is looking good.
Now let's click on one of these and see what is happening on the detail page so far. It doesn't look terrible, but I would like to have a better looking detail page. Let's build it together.
We are going to change some of these things. I am going to make this vertical and update some of the information we're showing here. We are going to update the buttons.
The biggest thing here is we are going to have a linked table instead of a linked list. In order to get this table, I am actually going to copy and paste it from another page, bring it in here, and then update the source.
Let's go into our supplier detail page and start to configure this item details block. It is set up for suppliers, which is good. We can go to content now.
I want to add some more fields. I want the contact name, the phone number, and we will do orders and products carried. I want that vertically stacked.
Let's go and configure our buttons. We want two buttons here: update and delete for warehouse managers only. First, let's go into visibility settings so we do not forget again.
We will set these for the warehouse manager. The permissions are now configured. Let's go into edit record and double check that we have all the fields we want.
We will add phone number. We will edit the details for the suppliers and update the modal information to say update supplier. These little details really make it nice.
Now over to delete. Let's go to delete supplier and configure that. We will ask, are you sure you want to delete this supplier? Both edit and delete are now configured.
Before we change the list, let's look at the conditional filter. Remember that this is a linked list. We only want to show the purchase orders that relate to this specific supplier we are viewing.
In order to do that, we use a conditional filter to say: if the supplier includes any of the related supplier's name, show it here. This keeps the data relevant to the page.
[.blog-callout]
Note from Softr: If you need a fully custom layout for your supplier details that isn't available in standard blocks, you can use the Vibe-Coding block to prompt for the exact component you want.
[.blog-callout]
This is a list block. Let's go over and change it to a table block. That came together pretty well. We will go to content and get rid of the search bar, the filters, and the history.
We will set up the purchase order columns. We will have purchase order ID, due date, status, item count, and order cost. We will remap these to the correct fields in the database.
I am also going to put the related supplier on here just for our own visual sake. I am moving this up to make sure only that supplier is coming through.
Just one last thing: let's make the table background consistent to keep our styles professional. We will go to styles, column header, and change the background color right there.
Now let's preview the app page. We click on a supplier and it brings us here. We see the supplier information and the related purchase orders.
Blue Sky Electric is the only one showing for this page. So the linked list is only showing the purchase orders that have the same supplier. That is a really intelligent way to do it.
We can actually go and remove that visual check now. Our conditional filters are coming through the right way. This is looking good to go.
Ethan is logged in as a warehouse manager and his supplier view looks good. If we switch over to Olivia, the buttons are not there. Everything is working correctly.
[.blog-callout]
Note from Softr: You can explore App templates like the ERP template to see more examples of how to manage supplier and inventory data effectively.
[.blog-callout]
We are cruising, but we have some more things to build. I will see you in the next lesson and we will keep on building. See you there.
