Transcript
In this episode, we are completing the second step for our purchase order process. This involves creating the detail page and setting up action buttons to update, send, delete, or edit the order generally.
All CRUD permissioning is reserved exclusively for our warehouse managers. We will start by configuring the item details block on the purchase order details page to ensure it displays the necessary order information clearly.
[.blog-callout]
If you want to skip the manual setup of pages and blocks, you can use the AI co-builder. It can instantly generate complete pages and database schemas based on a simple prompt, which you can then customize further.
[.blog-callout]
We are going to update the item details block to show the order cost and the supplier. I will set the supplier name as a large header and include the total amount and status below it to make the information digestible.
Next, we will switch to a vertical layout and add fields like due date, supplier email, and the order message. I am also adding the product list but formatting it as a tag since it contains multiple items.
I am removing redundant fields like the supplier name from the bottom because we already have it at the top. I want the warehouse manager to see the order date and due date immediately when they open the page.
Now let's configure the action buttons. The first is an update order button, which serves as our edit function, allowing the manager to change the due date, status, supplier, or message.
I will ensure the visibility settings for these buttons are restricted to user groups like the warehouse manager. Since this is a purchase order, only authorized personnel should have the ability to create, update, or delete them.
We also need a delete order button with a confirmation prompt. Additionally, I am setting up a one-click update button to mark an item as received, providing a quick way for managers to update the status.
[.blog-callout]
Instead of relying on manual status updates or external logic, you can use Softr Workflows. This allows you to build native business logic directly within your app, keeping your processes streamlined and consolidated.
[.blog-callout]
Finally, we need a button to send the purchase order. For this, we use a call API action, which allows you to send data from the order to an external automation or company URL by mapping specific JSON keys.
You can enter keys like name and map them to the selected record's purchase order name. Once the manager clicks the button, all the relevant data from the page is sent to the target destination.
Now we will finish the page by adding a table for order items. Instead of showing related suppliers, this table will show purchase order items mapped by ID, product name, price, quantity, and total cost.
[.blog-callout]
While this example might use external data, Softr Databases is the native way to manage your information. It offers high performance and deep integration for building project management tools or internal portals.
[.blog-callout]
We need a conditional filter on this table so it only displays items belonging to the current purchase order. We set this by matching the purchase order field to the current record's purchase order ID.
We also have an add item action button that uses a hidden field to pass the current page's purchase order ID to the new record. This ensures that any item added is automatically linked to the correct order.
When we preview this, we can see the date picker and dropdowns in action. The warehouse manager can create an order, be redirected to the details, and then begin adding products to the list.
I noticed the product field in the add item form should be a dropdown rather than a text field. This ensures we are pulling from the actual products available in our database for better data integrity.
