Transcript
If you're building a client portal or a business dashboard, Softr is easily one of the best tools on the market right now. It connects to Airtable, Google Sheets, PostgreSQL, Supabase, or wherever your business data lives. And the design is beautiful right out of the box.
[.blog-callout]
Note from Softr: While Softr integrates beautifully with 17+ external data sources like the ones mentioned here, exploring Softr Databases is a powerful, native way to manage data directly within Softr for maximum performance. If you are building client portals, native databases help streamline your tech stack.
[.blog-callout]
But if you've actually tried to build a serious dashboard with Softr, you've probably hit a massive wall with date filters. Softr's native list lets you filter by categories, or you can add conditional filters to a table to see data relevant to a specific date range. However, if you want to dynamically say, show me the sales from this date to that date, that's not natively available out of the box.
[.blog-callout]
Note from Softr: If a native block doesn't quite fit your advanced requirements, try using the Vibe-Coding block. You can simply prompt for the exact custom component you want—like a dynamic date range filter—and it will generate it and connect to your database seamlessly.
[.blog-callout]
And for a business owner, a dashboard without date ranges is basically useless. So in this video, I'm going to show you a workaround we use at our agency to build date range filters in Softr. This allows you to keep that beautiful interface and the low price point without sacrificing the data visibility that you actually need and use.
Real quick, why does this matter? A lot of our clients are moving away from native Airtable interfaces or expensive custom portals because the pricing for Softr, especially when combined with a backend like Supabase or PostgreSQL, is unbeatable for scalability. You can have thousands of records without breaking the bank.
And the only trade-off are complex features like date filters, but with the method I'm about to show you, we can bridge that gap. So this is a quick dashboard that we built to show attendance in a facility for a client for a specific date. It gives how many employees were there, what department had the most number of employees working, which contractor provided that facility, and in which shift they were working.
There were also insights about what proportion of employees were supplied by which contractor, department, and in what shift. We have a quick pie chart and a table to show in which processes the employees were employed. Now, my client wants to interactively choose the date that they want to visualize these insights.
The data that goes into this dashboard is this table. For every date in a specific month, we have the number of employees who were working for a specific contractor in a department, in a shift, and in a process. And this is the table we are visualizing in different ways.
By the way, we are using a Postgres database hosted on Supabase for this particular project. But of course, for your business use case and your scalability, you would choose the right tools. First things first, let's add a date picker.
I'm going to choose the right column in the top block. I'm going to choose the static block for that and select custom code. In this custom code block, there is already a default set of code that appears.
Just remove that and paste the code that I have here. All that we are doing here is inserting a date picker. Whatever date is getting picked by the user, it will get stored in a value called selectedDate.
And that's all we need to know at this point. Let's actually preview this to see how that looks. As you can see, 31st December is now getting picked and it's getting displayed.
Once you click on that, you do have a calendar view over here and you can quickly select different dates. However, even though I'm selecting different dates, these data points are not really changing. We haven't included that functionality yet, so the data is not getting refreshed.
Let's work on that. For this, there's a neat little trick where we need to create a new table in our database. Let's go back to my Supabase and create a new table.
I'm just going to call it date list. You don't have to do this in Supabase, you can just do it in any database source that you have, like Excel, Google Sheets, or Airtable. In this date list table, all that we have is a single column called date, which has unique values of all of the dates.
For this particular demo, we have all the dates from December. Now, here's the trick part. Add a new block to your Softr interface and click on the item details block.
In the item details block, you want to select the date list table as your data source. Let's do that. I'm going to select the date list that we just created.
The primary field is ID, which is fine. Now, once you have this block, add a conditional filter. I'm going to say, if the date is on, and in the end value, I'm going to enter a custom value within flower brackets that says URL param is selectedDate.
All this means is that we are exposing the URL parameter called selectedDate, which is the date we picked in the date picker. Once you add that, you're going to see the selected date in a format like this, which means the selected date is now exposed as a URL parameter. Once you have this URL parameter exposed, the rest is pretty simple.
If you go to another block over here, this is the KPI metrics block or the summary metrics card block that we have. We were showing data that was specifically for an exact date called 31st December. However, we need to change that now.
Instead of saying the date is on an exact date, we are going to say current record and in the current record, choose date. Once you do that, it's going to pick the URL parameter date that we exposed. Do the same thing for the rest of the blocks or however many visualizations you have.
For example, in this particular bar plot that we have, we originally had an exact date of 31st of December, but I'm going to change that to the current record date. I'm going to change all of the rest of the conditional filters similarly to the current record date. We will do the same thing for our pie chart and the table that we have.
This way you can display data relevant to a specific date for your tables, visualizations, and any other kind of blocks that you're using. Let's quickly check how this looks. By default, we have 31st December selected.
Let's see what happens if I select some other date, let's say 17th December. It's going to take a few seconds to refresh this. The 17th December that's chosen is reflected here, and now your numbers have also been refreshed.
Now let's try 6th December. Once we have that, these numbers will take a couple of seconds to refresh. Even though 6th December is reflected quickly over here, all of the mandays, departments, and everything else is getting updated.
This will update all of the charts you have, and you will see the numbers change in your table. But finally, what happens is that the list items we added for the date list table gets displayed here, and we really don't want that. This is just a hacky thing and we don't want this to be displayed on the page.
What I'd suggest is to select this block, go to your pages, and in the specific page settings, navigate to custom code. Paste the style called display is none, which is important, and then just click on save. Once you do that, you can now see in the preview that the item list we added is not visible anymore.
You now have the functionality to pick a date, which refreshes across your blocks, visualizations, and tables. You have a very interactive dashboard. Now, as a business owner, you can see what happened exactly on a specific date without digging through massive spreadsheets.
What's great about this is that it works dynamically. If you're building this for a client, they just get a clean functional dashboard. I hope Softr publishes its own date picker very soon.
But until then, your business doesn't need to wait, and you can use this workaround. Of course, instead of picking a specific date, if you want a date range filter, use the same CSS code to have two of them and expose two URL params called start date and end date. If you use it as a conditional filter in all of your other blocks, it will work exactly the same way.
