Step 2: How to Create a Client Portal with Glide: A Step-by-Step Guide
Build a Custom Client Portal with Nocode
In this video series, I show you how to create a custom client portal from scratch using Nocode. From importing client data to enabling profile edits and managing deliverables, I’ll show you everything from adding team admins to launching the portal!
Want free access to whole series? Free Download
Take your business to the next level with my complete series on building a custom client portal with Glide.
The Ultimate Guide to Building a Client Portal in Glide
Summary & Key Takeaways
Starting Point: I pick up where the last video left off (get free access to full series here), with clients now able to view their profiles after logging in.
Objective: The goal is to enable clients to see the deliverables that I, as the agency or service provider, am working on for them. These deliverables can be anything from edited photos and shipped items to completed projects.
Creating a Deliverables Table: I show you how to create a new table in Glide named 'Deliverables'. This table will include multiple fields such as the title of the deliverable, a link to it, its status, and notes.
Displaying Deliverables on Client Profiles: The tutorial demonstrates how to display these deliverables on the client's profile page using a table format in Glide.
Filtering Deliverables by Client: I explain three ways to filter deliverables so that each client can only see their specific items. These methods include:
Filtering by user email.
Creating a relation between user emails and deliverable emails.
Using a specific list of deliverables for each user.
Testing the Functionality: It's crucial to always test any updates. I test the portal by logging in as different users to ensure that each can only see their respective deliverables.
Conclusion and Next Steps: I finish the video by mentioning that the next step in the series will revolve around allowing clients to update their information and deliverables. I encourage you to continue following the series for more guidance on creating your client portal.
Full video transcript
Real quick, this video is part of a series where I'm showing you how to create your very own client portal for your business with no code. If you just stumbled across this video, be sure to check out the full playlist. And with that, let's get into this video.
Alrighty, in this video, we are starting from where we already have a data set of our clients, and we've already made it so that when they log in, they can view their profiles. There's a screen where they can view their profile. Now what we want to do is give them the ability to see the stuff that we are working on as the agency or as the person giving them stuff. We want to deliver them stuff through this client portal. So we need to give them the ability to see and interact with our deliverables.
And so, whether you're editing photos for this company or shipping them stuff or some kind of deliverable, you're creating things for them, projects, what have you, we need to give them the ability to see that information. What I'm going to do is I'm just going to make this pretty generic, and you can customize this for whatever you are doing. And so I'm just going to create a new table, and if you need to import from another system, you can do that here, but I'm going to create a new table, and we will call this Deliverables. Super generic.
And all I want to communicate here to you is that you have a single company, and they can have multiple deliverables. And below this section here, we want to give them the ability to see all of the deliverables that you have given them. So to keep this really straightforward, what I want to do is just edit this name, and we'll call this the title of the deliverable. And maybe you have a, we'll call this link to deliverable. Another one that you probably, or you may have, is a status field. So, you know, whether you're working on the deliverable, or it's done. And then the last thing we'll add is a notes section. And this is something that you can interact with, and later on, will allow the client to interact with as well.
Alright, so title, link to the deliverable, status, and notes. So let's go ahead and get started here. And let's just say that this is a new asset. Those assets, uh, yeah, let's use a similar words, new image for website. Alright. And then the link, let's just do canva.com, and you would put in like the actual link to the asset there. Since this is a link, we can change the field type inside of Glide, and then do that before to a URL. The status, we'll say, we'll call this done. And then, for notes, we'll just say, we really like this one.
Cool. So let's go ahead and display this on the, on the client's profile here. Below this container here, I want to have another section, and I'm going to use the table. Yeah, cool. We don't have an image for these, let me take that out. And then also, we're pointing to the deliverables table. So now we have a single deliverable. And then here, we have the title. We want this, whoopsies, we want this to be the title. And then we'll have the statuses. And here, I can define column headers. So let me do the title. And let's actually just, yeah, we'll do title. And then for the description, we can do status. And then over here, we have buttons. Those would be in the action section.
And I think, if we grow this up, edit, I thought we had buttons here at one point. Anyways, so we don't want them to edit items or add items, but I do want to add a collection item for view or open link, and that would open the link itself. So we'll say open link, and then that would open the link to the deliverable. Yeah, so here now, they can open the link directly. And that would go to canva.com right now. But then also, we want them to be able to click on this item itself and then view, view the item.
Right now, it's opening this up in another screen. Since there's not a lot of information on here, what I'll do is open this up in a small overlay. I'm going to open this item. So this opens it up here. I'll remove my breadcrumbs, and this title. And then we can start to add those other elements. So we had a link. Let's see if there's any kind of link or URL. So none of those components. So let's go ahead and use a fields component here. And in this fields component, we can have the link to the deliverable, where they can click on that. And then we can also have the status, where they can view that. And then here, they can see the name of the deliverable.
And then the other thing we wanted to add was a notes section. So we'll do a text entry component. And then this will allow anybody who's viewed this to be able to edit these notes. So I'm going to make this a little bit bigger, just to kind of mimic being notes. And now we can exit out of that. And so I think that's all of the fields that we needed. So we have one, two, three, four. And then if we click on this, we can see one, two, three, four. So yeah, so that's all of the fields that we had.
Alright, you can spruce that up for your design if you want to change some things around. But we'll keep it simple. This is a simple tutorial. Alright, you might be thinking, oh, this is great. But there's some things we have not done. And let's do those now. So remember what, when I said when you log in as different users, we want them to only see their profile and their stuff. But what you'll notice now is as I've switched to somebody else, they're still seeing this deliverable. And when I switch to somebody else, they're still seeing this deliverable.
What we need to do is create a way where they can only see their deliverables. And let me go ahead and put a title, Deliverable. So the way we do this inside of Glide, and most other systems, is you need some way to tie their profile to this list of items. And the way I will do this is through their email. Since we're saying email is their unique identifier, then we can include their email here. So I'm going to add a column, and I'm going to call this a user email. I'll make this field an email type, and click done. And then I think I'll keep it right here. I like having the unique title here, and then we'll have a few rows that have duplicate user emails here.
So now what we can do is we can say this deliverable is for Open Lane. I can paste that in there. And then even though we have the email there, we're still not filtering. We're still not filtering to only show their stuff. What you can do is, I'll show you two ways to do this. You can come to the collection, you can go to options, and then you can filter this list of data. So filtering is, you want to reduce the number of items that are showing based off some condition. What you can do is you can say the user email, so the user email associated with this deliverable is the signed-in user. That's one way to do it. And right now, I'm on Open Tech, so if I switched over to Open Lane, then it would show this because I'm now signed in as Open Lane, and this deliverable belongs to Open Lane.
I'm actually going to show you three ways to do this. Another way to do this is to say the user email associated with this row is the screen's email. So we have Open Lane for this row, and then open lane is on the screen here. And so if I switch over again, it's going to filter that out.
The third way to do this is through the data editor itself. What we can do is create basically have a column that just has like a list of all the deliverables in it. And if this is like confusing you, no worries, but it's helpful sometimes. So we're going to create what's called a relation, which just means I want to create a link between the emails in this table and the emails in my deliverables table. So I'm going to say find all the emails in this table and match those to emails in the deliverables table, and then create a list of those. So there's going to be multiple. So here I can say deliverables, the liver bulls, we'll say done on that. And so this makes it really clear, you can see that this user just has one deliverable, and none of these other people have any right now. And then what we can do on the screen here is for this collection, instead of pointing to the entire deliverables table, I just want to go to that user-specific list of deliverables. So now we're pointing to that user list of the deliverables that we created in our data set, which is defined right here. So we just said they just have a single one. And if we click over to somebody else, they don't have any, you can see the list is empty here, list is empty, but then when we come to this person, we see that they have a deliverable.
So that's three different ways to filter this list based off the screen that you're on, basically, or the user you're logged in as, and they all come in handy. You can use them in different scenarios, and they all have their pros and cons as far as ease of use. So let me make sure I go back to this collection, and we'll clear out that filter because I'm going to stick with using this right here, just so you know, just for sanity sake. It still works even though I removed that filter.
So now, just to drive this home, let me go ahead and add in some more deliverables here. So we'll say, let's just say, Test one, Test two, those are all for Open Lane, and then we'll go ahead and add one for Year In as well. So Year In, first deliverable, and then let me grab their email, paste that over there, and then we can even change the status of them, some of these, to In Progress and To Do. And now what we should see whenever we go test this is Open Lane should have three deliverables, Year In should have one, and then everybody else should have none.
So let's go back and test that. So right now, I'm viewing as anyone, meaning I'm not logged in, you can see the login feature here. So let me click on that, and let's go to GoldX. GoldX has no deliverables, Year In has one deliverable that we can view here, and then Open Lane has three deliverables.
So there you go. Whatever you're doing for your clients, whatever you're delivering to them, you can use this same model to give them unique access to only their deliverables. And so now your clients should be able to log in and view that information. And in my next video, the next step I would have you go through is allowing your clients to update this information as they see fit. So updating their profile, updating deliverables, all that good stuff. And so we'll get into that in the next video. Hey, Darren here. Thanks so much for watching this video. I hope it helps you on your journey to create your very own client portal. If you're not sure what to do next, be sure to check out the next video there on the screen somewhere. And if you'd like to work with me so that I could help you create your very own client portal or some other project, be sure to check out that link down in the description. I'd love to chat. Thanks for watching and happy coding.
