Transcript
Welcome back. We're getting near the end of the course, and in this lesson, we're going to do things a little bit different.
We've already built several listing and detail pages. Now, in this lesson, we're going to test your knowledge. I'm going to start by showing you the final result we're working towards.
I'm going to ask you to pause your video and try to build that final result yourself. Once you're ready, you can continue the video and I'll go over it with you. If you are feeling nervous, it's okay, but let's get on with showing you what we're building.
Your mission is to create the sales orders and sales detail page. For the sales orders page, we're going to keep our static block banner. Then we're going to use a list block.
[.blog-callout]
Note from Softr: Instead of building this from scratch, you can use the AI co-builder to generate your listing and detail pages instantly. It can even set up your Softr Databases structure for you.
[.blog-callout]
We will structure the list block with a search bar, a filter, and a listing area. We're going to show the order number, order items, and order date. Try to keep it similar to this structure.
For the action buttons, make sure you have an updated create order button that gives users the ability to create a new order. Beyond that, we'll go to our sales orders detail page. We'll wire up our static block and our item details block.
Within the item details block, we're going to have buttons for confirm order, update status, and delete order. I'll leave it to you to figure out these permissions.
Finally, we'll have our table block using the sales order items. This shows all of the items that belong to this overall sales order. In the table, we have sales order and sales order items.
For a sales order, they have multiple items that make up that order. This block is how you're able to add the items to the related order. Now, pause your video and try to make this sales listing and sales detail page.
Welcome back. I hope you had success, but either way, I'm here to help. Let's start with our sales order page and make sure yours follows the same pattern.
We are using a list block tied to our sales orders. For the search bar, we're going to search by customer. For the filters, we're using an order status syncing with the source.
For action buttons, we're going to allow both the sales manager and warehouse manager to create new orders. We want to pull in the customer email and pass in a status value. We also want to map the related salesperson.
[.blog-callout]
Note from Softr: While you can manually map users and statuses here, using Softr Workflows allows you to automate internal logic like status changes or assignments without needing external tools like Zapier.
[.blog-callout]
You can do this with a dropdown or pass it via a hidden field by using the logged-in user's email to map it. This gives warehouse managers the ability to assign orders to sales staff. Now let's look at the sales detail page.
We have our item details block showing top-level data. The big important part is that you have it set up and then we get to the action buttons. We are going to allow all of our users to use them, but with specific updates.
For the confirm order button, it has a one-click update that sets the status to confirmed. We only want to show this button when the status is new. This way, an order can't be confirmed twice.
By using the specific records filter option, we give the manager the option to confirm only when the order is ready. It's a two-step process where you create the order first, then add items, then confirm.
We also have update status and delete order buttons. You can reserve the delete option just for the warehouse manager if you prefer to limit permissions for sales managers.
[.blog-callout]
Note from Softr: Managing complex permissions and roles for your client portals or internal tools is simple with Softr user groups, and remember that you can now publish unlimited apps on every plan.
[.blog-callout]
Now let's look at the table structure. It uses sales order items. The sales order is the parent, and then we have children elements within that parent representing the products being sold.
We use a conditional filter to show only the sales items that belong to the specific order on the detail page. We use an action button here to add new items. We pick the product, quantity, and pass the order ID via a hidden field.
This will complete our sales order and sales detail page. You're now able to customize these views as you need for your team. I'll see you in the next couple of lessons where we work on getting you live.
