Build filtered presets to save as custom views

Hello, Tadabase Users! Today, we're excited to showcase a fantastic technique that allows you to create custom views or filtered presets for your database applications. With this functionality, you can build your own links that open up a specific, personalized view of your data table. Let's dive in and explore how to achieve this!

Goal: The goal is to enable users to create customized links that take them to predefined or custom views of a particular data table. Users can apply filters and generate URLs containing specific parameters to open filtered views of the table.

Features to Use:
1. Tadabase Search Component: This component allows you to apply filters to a data table. Unique to this feature is the ability to use URL parameters for filtering.
2. Dynamic Field: This lightweight and fast option helps you build links with URL parameters based on field values or record values.

General Instructions:
1. Start by creating a main page to display your data. Add a table component to show the company data and a search component above it. Link the search component to the data table.
2. Configure the search component's fields for filtering. Include the date field twice (one for "is after" and another for "is before").
3. Define URL parameters for each filter you want to use. Keep them simple and descriptive.
4. Use URL parameters to filter the data on the page by adding them to the end of the page URL. For example, "turnover=low" or "profit=high."
5. Hide the search component, as users will interact with the data only through the URL parameters.
6. To enable users to create their own views, build a new data table with fields for view names, filter options, and user connections.
7. Utilize the dynamic field to create HTML links that contain the necessary URL parameters. These links will represent the custom views.
8. Add pages to allow users to add and edit their custom views.
9. Users can now create and save their custom views, and when they click the corresponding link, it will open a new tab with the filtered data.

This technique combines the power of the database search component, URL parameters, the new dynamic field, and page and data builders to create a seamless experience for building and utilizing custom views. Feel free to experiment with different views and explore the endless possibilities that Tadabase offers for enhancing your applications.

We hope you find this technique as exciting and useful as we do! Remember, there are always new features and combinations to discover, making your Tadabase apps even more amazing. Thank you for joining us in today's episode of Build It with Tim. Until next time, take care and happy building!

Features Discussed:

1. Search Component (Time: 04:40)
   Learn how to use the search component to filter records by setting up URL parameters for various fields, including date fields. For example, learn how to use "is after" and "is before" operators for date fields to dynamically filter search results based on URL inputs.
2. Search Component for Filtering (Time: 08:19)
   Learn how to hide the search component from users, allowing URL parameters to handle filtering in the background. For example, hide the search row using CSS or row visibility settings and use parameters like "profit=high" to filter and display specific data without user interaction with the search component.
3. Dynamic Field (Time: 11:00)
   Learn how to build dynamic links that contain URL parameters by using the Dynamic Field in your data table. This allows users to filter tables based on specific criteria, like turnover, margin, or date range, directly from a generated link. For example, you can filter data to view companies with low profit and high turnover in a particular quarter.
4. User-Specific Custom Data Filtering (Time: 14:24)
   Learn how to create and manage custom views for individual users. This feature allows you to link each custom view to a specific user, providing personalized data filtering. For example, users can create views to see only the data that matters to them, such as companies with specific profit margins.

Transcript Summary

Introduction

Hey everybody, welcome to another episode of Build It with Tadabase. On today's episode, we're going to be learning a really cool technique that allows you to build custom views or filtered presets for your database application.

Overview of the System

When we're done with this build, here's what it's going to look like: We have a page that contains a table component with all of the company data. What you don't see on this page is that there's actually a search component linked to this table component where we've enabled URL parameters and then hidden the entire component. What we can do is create our own links with URL parameters that will open up a preset or customized view of this particular table component.

To show you an example, let's say we want to look at companies with low profit and high turnover for Q2. We select the parameters: high turnover, low profit, and for Q2, after April 1st but before June 30th. Behind the scenes, we're dynamically generating a link with the necessary URL parameters for the hidden search component. When I click on this link, it opens a new tab and filters the table based on those URL parameters.

This technique is really cool and something I never realized was possible until recently, despite many years of building with Tadabase and doing videos. We're going to build some customized views or filtered presets where the user can create customized links that will take them to a predefined or custom view of a particular data table.

Building the Custom Views

Step 1: Setting Up the Data Table

We start with the Tadabase search component, which can apply filters to a data component. These filters can be applied through a URL parameter. Next, we create a second data table with matching fields to the data table we want to filter. This allows the user to create their own custom view. To enable that custom view to function like a link, we'll use the new Dynamic field.

I've already set up the data structure and tables. Here's our company data, which contains 200 records of company information and statistics that we're ranking. We have fields like company name, employee turnover, profit margin, and customer satisfaction, all of which are radio fields with values of low, medium, and high. There's also a date field, which can be renamed simply as "date." This data is what we want to filter.

Step 2: Creating the Main Page

Inside the Page Builder, we'll create the main page to display all our data. I've created a page called "Companies" and will start adding components. First, a table component to display the company data. Above it, I'll add a new row with a search component. This search component is linked to the company data table, and I'll add all the fields we want to filter by.

For the date field, we'll include it twice in the search component—once with the operator "is after" and once with "is before." This allows us to filter within a specific date range.

Step 3: Configuring the Search Component

We link the search component to our table component on the page. For each field, we'll define the operators. Instead of enabling all operators, we'll choose "predefined," select the "is" operator, and then set it to "get value from URL." We'll name the URL parameters to keep them simple and descriptive: "turnover" for employee turnover, "profit" for profit margin, "csat" for customer satisfaction, "after" for "is after" the date, and "before" for "is before" the date.

Now that the page is set up, we can preview it and start testing. We use the search component as it is to filter the records, but we want to focus on using URL parameters. We can hide the search component entirely to clean up the page. To hide it, we'll add a CSS class of "hide" or use row visibility settings.

Step 4: Testing URL Parameters

We can test the URL parameters by manually adding them to the address bar. Starting with a question mark, we add the parameter names followed by an equal sign and the desired value. When we hit enter, the page displays only the records that match the filter criteria.

For example, adding ?turnover=low to the URL will filter the table to show only companies with low employee turnover. We can add multiple parameters using the & sign to filter further.

Step 5: Building the Custom View System

To allow users to create their own views with their own URL parameters, we set up a data table to store these custom views. The table includes a text field for the view name, duplicate fields from the company data table, two date fields for the "is after" and "is before" parameters, and a connection to the users table to make each custom view unique per user.

Step 6: Creating the Dynamic Link

We use the new Dynamic field to build the link with URL parameters. The Dynamic field outputs HTML, so we construct an HTML link that includes the URL parameters needed to filter the table on our companies page. We add the relevant field values to the template, and the link will populate automatically based on the user's input.

Step 7: Testing the Custom Views

We create a test view by setting the filter criteria and see the Dynamic field automatically generating the link. Clicking the link opens a new tab with the filtered data, proving that the system works as intended.

Step 8: Adding and Editing Views

We add pages for users to add and edit their custom views. These pages include a table component of custom views connected to the logged-in user and a form to add new records. We clean up the forms and components for a smooth user experience.

Finally, users can create and manage custom views, generating URL parameter links that load the desired data filters when clicked.

Conclusion

There you have it—a super cool and useful technique for building custom views using table components, search components, URL parameters, and the new Dynamic field. It's a powerful way to combine Tadabase features and make your applications even more amazing.