Transcript
In this lesson, we're going to create our dashboard page and we're going to do a lot of building. We'll use all three of our blocks, dynamic, static, and container, and we'll even add in graphs, lists, and other things. Let's start on our dashboard page.
I want to reference the original application that we're looking to create. We have this beautiful application that is using a static block to display a banner. We're using a block to show data for the welcome back message, and then this string of text will say the logged-in user's name.
On the front end, when the user sees it, it will say welcome back, JJ. Then we have our quick links blocks here, and this will direct our user to each of the core areas around your application. For that, it's inventory, sales, purchase orders, and suppliers.
[.blog-callout]
Note from Softr: While setting up these links manually allows for great precision, another great option is to simply open the AI co-builder and prompt for what you want. It builds complete apps, pages, or database schemas instantly, while still letting you tweak things manually later.
[.blog-callout]
Finally, we'll use a container block. Within the container block, we'll set up a table block containing all of our inventory. Then we'll go over to orders and we'll set up another table block for all of our sales orders.
Then we'll go to reporting and we'll build some graphs together. We'll build graphs that show revenue by customer, inventory levels, and then a graph that shows all the revenue by sales rep. This will be only visible to our warehouse managers because it's sensitive data and we want admin-like permissions to only see this data.
Let's make it happen. The first thing I'm going to do is actually delete this block here. From there, I'm going to add a new block by going to static and selecting the hero call to action.
From there, we're going to get rid of all this data, including the image and the button. Then we're going to add a background image. This banner set up for our block can be reused on many different pages.
Let me show you how to quickly do that now because it's so easy. We're going to go to copy and go through and copy it to all of the pages. I'm going to go to products, details, and order items.
This just makes it so that we have a consistent header for all of our pages to keep everything looking nice and neat. Now we don't have to worry about building that block ever again. Now, let's go to our quick links.
Quick links is another static block. If you click on the content area, you can choose a variety of methods to showcase this data. For the first thing, I want to make these vertical cards with the image above.
Once I've set up the vertical cards, I can go in and configure the links. You can see the links for projects, clients, invoices, and files. We are going to keep four of them, but I'm going to change them for my needs.
Inventory is going to be inventory. I'm going to click on the icon to see a list and add a subtitle that says view all of your inventory. For the next one, I'm going to update clients to sales.
We'll find a money icon and change the subtitle to view all of your recent sales. We will change this to open the page and we'll go to our sales page. We'll start with our sales orders right there.
Beyond that, let's update invoices to purchase orders. We will add the subtitle to view your recent purchase orders and update the icon. This is really arbitrary and can be anything you think might be best for your application.
Finally, we're going to turn files into suppliers. I'm going to add a note that says vendors we order from. I'll search for a truck icon and link it to the search suppliers page.
I'll make sure purchase orders and inventory are also linked to their proper pages. In this case, products is the page name currently for inventory. We now have our quick links going to each of these pages and a really nice structure.
[.blog-callout]
Note from Softr: If you're building out project management or portals view, Softr Databases is the powerful, native way to manage data directly within Softr for maximum performance and easier linking.
[.blog-callout]
The next thing up is we need to add our container block so we can start housing all the relevant information. Our dashboard is the main place that we send all of our users to after they sign up or log in. We want this to be a key place to navigate users very quickly.
I'm going to add a tab container block. At the tab container level, I'm going to go in and start to customize these containers. It's going to be inventory, sales, and reporting, using a graph icon for the latter.
Now we have our container set up. Let's go back to inventory and create a new dynamic block because we have to show all of the data from our inventory table in the database. We want to use a table block here.
I'm going to bring the table block in. Right away it does its best to auto map as much as possible, but we are going to have to go through and change this for our own styles. It comes with the ability to add new records, search, and filter.
In this case, we don't actually want any of that functionality right now. We're going to simplify it and just offer the table itself. Before we map this data, we need to map it to the proper table, which is products.
That's going to start to bring in all of the products. It's auto mapping the fields for us in a smart way. Beyond that, I'm going to go and I'm going to turn off the search bar, turn off the filters, and delete the action button.
[.blog-callout]
Note from Softr: To keep your logic as close to the design as possible, you can use Softr Workflows. This allows you to consolidate tools and reduce reliance on third-party automation platforms when users interact with your Forms or tables.
[.blog-callout]
Now that we have this table configured from a design point of view, let's configure the content. We have all these different fields and you can drag the fields around to change the order seen in the table. I need to make sure I am mapping the data to the proper field types.
The first thing I want to show is the product image. This will be an attachment or a file. I want the image to show there, but it is not coming through exactly how I want.
If I map it as a file, it shows it as a generic file. Since it's really an image, I will change the mapping to picture. It's so important to figure out the proper mapping field because it dictates how data is showcased in Softr.
I'm going to delete an icon here and update this to be labeled product image. Next, I'm going to adjust the width and potentially use the paintbrush icon if I want to change how the image is displayed. We'll also set up a text field for the product name to keep it looking good.
