How do I use Row Visibility?

In this episode, we'll learn how to restrict access to parts of a page using:

• Page Builder
• User Roles
• Row Visibility

Features Discussed:

1. Custom Domain (Time: 2:06)
   Learn how to set up a custom domain for your application, such as configuring a domain like https://yourcompany.io instead of using the standard domain.
2. Row Visibility (Time: 4:22)
   Learn how to control the visibility of rows based on user types (public, non-logged-in, logged-in, and specific logged-in users). For example, set content to be visible only to logged-in users or specific groups, ensuring sensitive information is protected.
3. Link Button (Time: 5:34)
   Learn how to create and configure a link button that can be aligned to the center, left, or right of your component. Additionally, set visibility rules so the button appears only for logged-in users, enhancing functionality and user experience (e.g., a "Join Meeting" button).
4. Filters (Time: 8:56)
   Learn how to apply filters to show specific records based on user attributes and set row visibility accordingly. For example, filter records by color (e.g., red and blue), so a user with the "red" attribute only sees red records, ensuring personalized and secure data presentation.
5. Form Component (Time: 11:48)
   Learn how to configure a form to filter records based on user roles. For instance, in a product creation form, set up a filter so users with the "red" role only see and interact with "red" products.

Transcript Summary

Introduction

This week's episode is going to be a little bit shorter than usual, and we're going to be dealing primarily with fundamental features of the platform, which might be frequently overlooked.

We have functions built into our platform that allow you to restrict access to different parts of a page based on user roles, which can be really helpful in a lot of different use cases. This topic has come up quite frequently, so I wanted to make a video about it to cover how we can implement this.

Next week's episode will be more back to normal with more complex stuff, including larger conceptual workflows. Without further ado, let's get into this video. I'll show you the finished application we're dealing with and then walk you through how to set it up.

Example 1: Restricting Page Access

Here is our social media app, "Database," specifically catered to dad jokes. When we log in, it redirects us to our feed. If I go back to the login page at any time, the login component is now hidden, and we have a button that says "Go to App." This is done using row visibility, where we're telling the system what rows to show based on different criteria.

Let's hop into the Builder to take a look at that. As you can see, we have this application called "Database." It's meant to be like a social media platform. Inside our domain settings, we have a custom domain assigned to this application, so entering "database.app" will take you directly to this application. We set our login page as the home page, so users are always directed to where they can log in or sign up.

When we log in, it redirects us back to the application, which is exactly what we want. But if I close that page and revisit it while still logged in, I'm met with the message "You're already logged in" and a "Log Out" button. The question I frequently get is how to stop this message from showing. The answer lies in row visibility.

When talking about row visibility, I'm referring to how pages are broken down into rows (in green), columns (in orange), and components inside the columns. We can modify the visibility of the row based on a number of different selections. In this case, we want to show the login component only to non-logged in users.

Since I am logged in, if I refresh the page, that login component is now completely invisible. It's not just the component that's hidden, but the entire row. If it's inside that one row with a visibility setting configured, the entire row will be hidden.

Now, we can build something else on this page to guide users to where they need to go. Let's add another row. I'll keep it very simple and add a link button that says "Go to App," which will take us to the "My Feed" page. We'll center align everything within this row.

But what if we log out and try to go to that login page again? The "Go to App" button is still visible, which we don't want because the person is not actually logged in. So, we also need to change the visibility setting of this row. We have two rows with differing visibility settings that balance each other out: the top one with the login component is only visible to non-logged in users, and the bottom row with the "Go to App" button is only visible to logged in users.

Now, if I refresh the page, the "Go to App" button is no longer there. Let's make sure everything is working right. I log in, close the page, revisit it later while still logged in, and I have the button to go to the app.

That's the first example of how we can restrict parts of the page and control what users see and how they navigate through your application using row visibility.

Example 2: User Role-Specific Content

This example comes from our order payments application used in the Stripe Payments episode. We're going to make slight modifications where we sell T-shirts in two colors: red and blue. We want to show red ones to specific user roles and blue ones to others.

Inside the users' table, I've created additional user roles: Red Shirt and Blue Shirt. I've assigned a role to this particular user, i.e., myself. Inside the products table, we need a way to filter the records we're looking for. The idea is to filter a table by red shirts and only show that row to users with the Red Shirt role, and the same for blue.

We add a new field called "Role Filter" with options for Red and Blue. The red shirt is filtered by Red, and the blue shirt is filtered by Blue. In the page builder, when setting up tables, we filter the table where the "Role Filter" is Red for one table and Blue for the other. We then change the row visibility of the red table to specific logged in users with the Red Shirt role, and the blue table to those with the Blue Shirt role.

Now, because I am a Red Shirt role user, I only see red shirts. If I change my role to Blue Shirt, it will hide the row with red shirts and only show me the row with blue shirts.

We can continue with this by building it into our orders table. We could use this with forms as well. For example, if we want to filter a dropdown where users select products based on their role, we could filter the form or row based on the user's role. This way, only the relevant options are shown to them.

I hope you found this useful in understanding how to use row visibility. It's a fundamental feature in controlling how users interact with your page and how you choose to display your data. It's often overlooked, so I wanted to bring it to your attention this week, show you how to use it in a couple of examples, and hopefully, you'll start using it in creative ways.