Transcript
Welcome back. In this lesson, we are going to create our purchase order page and our purchase order detail page. This involves a two-part ordering process to ensure all the relationships you need are coming through.
Purchase orders allow warehouse managers to buy new inventory. As we discussed earlier, a purchase order has a couple of different statuses, which we can see in our database as a single select field.
By default, when we create a new purchase order, it is set as draft, meaning it is not ready to be sent to a supplier. Once the purchase order is ready, we update the status to sent and actually send it off.
[.blog-callout]
If you want to streamline this manual setup, you can use the AI co-builder to generate your initial pages and database structures. It is a great way to start building project management tools or inventory systems quickly.
[.blog-callout]
You could send purchase orders via different API calls or automations. We are going to set up the event, but we will leave the specific destination configuration open to you depending on your own systems.
Finally, when the purchase order and related items arrive at the warehouse, we update the status to received. We need to give the warehouse manager these abilities via action buttons within Softr to update statuses accordingly.
Let's start building in the Softr studio. We will go over to our purchase orders page, which was initially created for us as a kanban block.
The kanban block is great because you can drag and drop items to update statuses. However, I want to rebuild this page using a table to better handle a large volume of data.
[.blog-callout]
Note from Softr: If a standard table or kanban block doesn't meet your specific design needs, you can use the Vibe-Coding block to prompt for the exact custom component you want, and it will connect to your data seamlessly.
[.blog-callout]
Since we cannot switch the block type directly, we will delete the kanban block. We can then copy a table block from our dashboard page to the purchase order page to give us a headstart.
Next, we update the source to purchase orders. Once the source is updated, we need to configure the content sections, starting with the order date, which we will set as a text field.
We will add the products field as a tag for better visualization. We will also include the supplier name, order count, order cost, and the status, which I also prefer to format as tags.
[.blog-callout]
While this tutorial uses external data, you might find Softr Databases a more convenient, native way to manage your inventory and purchase orders directly within the platform for maximum performance.
[.blog-callout]
Now we need to add the title, search bar, and filters. We will enable the search bar to allow searching by purchase orders, products, and suppliers.
We will add a supplier filter with multi-select capability so you can view orders from multiple vendors at once. We will also add a multi-select filter for the status.
Now let's create a top bar action button. A top bar action button allows us to create a new record, whereas item action buttons are used to edit existing records.
We will set the action to add record and name the button create order. We will include fields for order date, supplier, due date, and a message to the supplier.
We are also going to add a hidden field for the status. By setting the hidden field value to draft, every new purchase order created will automatically start with that status.
[.blog-callout]
Instead of manual logic, Softr Workflows can help you automate status changes and notifications natively, keeping your business logic close to your app design.
[.blog-callout]
You can also set a default value of draft directly within Airtable. Both methods achieve the same result of ensuring your data remains consistent and organized.
We will update the modal to say add new order and set it to open the purchase order details page upon successful creation. This completes the initial setup for this page.
In the next lesson, we will complete the create order process and the detail page experience. We will walk through every step to ensure your ordering workflow is fully functional.
