How do I hide fields based on User preferences?

In this episode, we'll learn how to build a system for allowing the User to dynamically select which fields in a component they want to hide or show using JavaScript and the Profile Component.

Features Discussed:

1. Table Component (Time: 05:13)
   Learn how to create a checkbox field for users to select which fields to hide,assigning CSS classes to table columns based on field names, and using JavaScript to apply those preferences by toggling the visibility of columns. The approach provides a customizable and user-friendly interface that adapts to individual user settings.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. On today's episode, we are going to build a system inside of a Tadabase app where a user can control what fields they want to hide or show on any given component, on any given page. This is going to be a low-code setup, but it's going to be a pretty easy low-code setup. So stay tuned, follow along, and let's get into it.

Finished Product Overview

Here's what our finished product is going to look like: We're going to have a table component with five fields. We also have a profile component above it that lets the user modify what fields they actually want to see. If I toggle "video name" and "description" to off, which actually hides them, they are no longer visible on this particular component.

Step 1: Setting Up the Selection Field

To start, we're going to head to the Data Builder because we are giving our users the ability to hide and show fields based on a selection. The first thing we need to do is add that selection field inside the user's table so that we can display it to them throughout the live app.

We'll navigate to the Fields tab and select the option menu. For this example, I'm going to choose a checkbox, though a multi-select option can also be used. I'll call this field "Fields to Hide." This name is important because we need to reference it later in some code, so make sure it's something that we will be able to use later.

After adding this field, I'm going to quickly jump over to the videos table to discuss the field names and how we are planning to hide them. I'm going to show a table of all these YouTube videos, and I want to give the user the ability to hide any of these field names through that checkbox field we just created. I'll list out these names—video name, description, budget, planned post date, and stage. I'm not going to worry about the other two fields. For now, five fields will be fine for the example.

I'll take those names and make them options within my checkbox field. Now, when the user checks a box, it means they don't want to see that field, and it will be hidden from the table. If unchecked, the field will remain visible.

Step 2: Setting Up the Page

For step two, we're going to set up our page, which will contain two different components: a table component that shows all of our records, and a profile component that displays that checkbox field to the logged-in user.

In the Page Builder, we note that because the "Fields to Hide" field is on the user record, it's available in the profile component no matter where we are inside the app. By default, there's already a profile page, so users can modify this through their profile. However, to give it more context, we're going to add a second profile component directly on the page.

Let's add a new page and call it "Custom Video Table" because we already have a page called "Videos." We'll add this to our menu and choose the table component. This should work with other components like the list component, but for this example, we're using the table. Next, we'll select the videos data table because it contains the field names we wish to hide.

Before editing the table, I'll add a profile component directly above the table component. We'll edit this profile component to only include the "Fields to Hide" field. Now we have "Fields to Hide," which shows for the logged-in user, giving them the ability to toggle on or off what fields they want to hide or show.

Step 3: Customizing the Table with CSS and JavaScript

Now, moving on to step three, we can start customizing the videos data table that we're showing on this page. We'll set it up in a specific way with CSS classes so that we can target those classes with some JavaScript.

First, I'll open the table to edit it. Personal preference: I'll get rid of the title. Since we are only focusing on the first five fields, I'll delete the other three from this table. Now, we need to add a CSS class to each field that we want to hide. This CSS class is based on the field name.

The JavaScript we're going to use will remove spaces between field names for the CSS class. So, when adding CSS classes here, make sure to delete any spaces in the field names. I'll copy the names and remove any spaces before adding them as CSS classes for the respective columns.

Next, let's discuss the JavaScript and its purpose. The first bit of JavaScript is going to be directly on this custom video table page, inside the JavaScript tab. Here's what that JavaScript looks like:

var classesToHide = '{loggedInUser.fieldsToHide}';
TB.render('componentID', function() {
    setTimeout(function() {
        hideClasses();
    }, 0);
});

We start by setting a variable, classesToHide, populated with the logged-in user's "Fields to Hide" selection. The TB.render function is our JavaScript API that triggers when a particular component is loaded on the page. We use a setTimeout with a delay of 0 milliseconds to ensure that the hideClasses function is executed immediately after the component loads.

To find the component ID for the table, save the page, go back to the content page, and hover over the info icon next to the table component. Copy that component ID and ensure it matches in your JavaScript.

Additionally, we'll add another piece of code for the profile component. This code ensures that whenever the user modifies what fields they want to hide and clicks "Save," the page refreshes so that the table fields are hidden or shown immediately.

Step 4: Adding Global JavaScript in the Footer

The final step is to add some JavaScript in the settings under "Custom Header/Footer" and the "Custom Footer" tab. This JavaScript will run every time any page is loaded.

We need to place the JavaScript inside a script tag. Here's the hideClasses function:

function hideClasses() {
    var classes = classesToHide.split(',');
    classes.forEach(function(fieldClass) {
        fieldClass = fieldClass.replace(/ /g, '');
        $('.' + fieldClass).hide();
    });
}

This function gets the classesToHide variable, splits the values into an array, and removes spaces. The function then hides the corresponding classes on the page. It's important that the CSS classes match the names in the script.

Testing the Application

With everything set up, we can now log in and test it. Go to the custom video table, and start toggling fields on or off. If I hide "video name," the page will refresh, and "video name" is now hidden. You can toggle multiple fields or remove all the toggles to see all the fields as they were originally.

Conclusion

That's it for today's episode of Build It with Tadabase. You can see how just by taking some small snippets of code, we can implement a low-code solution that adds a lot of flexibility and personal user preferences to our live app, making the entire application feel more responsive and enjoyable to use. Thanks so much for watching, everybody. We'll see you next week. Take care!