Step 4: 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:
Importing Team Members:
Picking up from the last video (get free access to full series here), I explain the process of importing a list of team members to the client portal. This involves exporting the existing client table and then adding the team members' details like email, name, and role.
Setting Up Team Member Roles:
I assign the role of 'admin' to team members to differentiate them from clients within the system.
Visibility and Access Control:
I demonstrate how to set visibility conditions to ensure that only administrators can view certain screens, specifically a list of clients.
Creating an Administrator Page:
I create an administrator page where team members can view a list of clients. I guide through the process of filtering this list to show only client profiles.
Configuring Client Detail Screens:
I explain how to set up detailed screens for clients that administrators can view and edit. This includes copying and modifying existing client profile screens for administrator access.
Editing and Adding Deliverables:
I give administrators the ability to edit and add new deliverables for clients. This is facilitated by creating an edit screen where administrators can update deliverable details.
Adding New Clients:
I show how to add a feature that allows administrators to add new clients to the portal, including setting up required fields for new client profiles.
Default Values for New Entries:
I share a technique for setting default values in forms, such as defaulting the role field to 'client' for new client entries.
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.
Alright, we are really close to getting to where we're ready to deliver this client portal. Over the last three videos, we've imported our existing clients, we've given them a way to log in and see their information and the things we're delivering to them. We've even given them the way to start to edit and interact with this information, so they don't have to call us when they want to change something or they don't have to call us to talk about a new idea, they can just add it here. But what I want to do now is give you, as the company owner, and give me as the company owner, the ability to view all these different clients within the app. And so I want to be able to log in and view my clients and view this information for each one of my clients. And so this fourth step in my client's portal process is to add your team as administrators.
So you might be, you might have a large team, and so I want to start with the assumption that it's going to be more than just you. So I have this dummy data list of team members here, and we're going to use this, and I'll show you how I would go about importing a larger list of information. And this link to this dummy data if you want, if you are following along, is down in the description, I'll remind you of that.
Let me go ahead and duplicate this and I'll rename this to my team to import. So what we're going to end up doing is with this one, we imported it as a CSV. What I'm going to do for this one since we want to add these users, basically we want to add them at the bottom here, so we want to have all of our clients and then all of our team members. And the reason we do that is we can only have one table with users in it, users that can log in. And since both, we want both our clients and ourselves to log in, we need to have them in one table. What does that mean? One thing that means is we need to have all of these fields defined. What I've done in the past for this is export the existing table with all of the columns that are in it.
So, I'm going to export that and that will come in handy in just a second. And then here we can look at all of our columns here. So we have name, we have title, number, email, so I know I'm going to need email, I know I'm going to name, title probably not important, start date not important for this application because we're just talking about giving them the ability to view things, phone number was not important, photo we do want photo, and then we will be using a role, and then about me not important.
Alright, and then the role actually is just going to be all the same thing, but we can get into that in a second. And so now we need, you can see here we have four columns, but in our table, we have a lot more, and we need to space these out because right now if I were to copy this and then paste it in here, oopsies, then just paste all these here, and you can see like the website is not aligned. And so what I need to do actually, this is pretty simple, is to you see our company, company type here, this is what I was going to use for the role. Let me go and actually change the name of this to roll.
And so I'm actually not going to use this export now. So I just need to insert one, two, three, four columns, and then admin would go right here. I'm going to insert one, two, three, four columns, and then now I can add in all of my team members. And just for simplicity's sake, I'm not going to add in all of these people, let's just add in three, and I'm going to call these this roll admin, but you could import all these at once, it's no big deal, I've imported hundreds of rows at the same time.
So we copy that, we come over to Glide, and then we make sure we have three blank rows including this one. Let me add that, and so now what should happen is I click Ctrl+V to paste, and now we can see emails, names, storage, or sorry, image for their profile image, and then we have their role here for admin. And so now these team members can log in.
So let's see what it looks like as a team member. So as a team member, when I log in, it's viewing their profile because we do have this profile screen. But as a team member, as an administrator on your company side, this is essentially the exact same view as we have when we go to view profile. So this view is pointless because there's not all this other information associated with your profile so I only want to show this profile screen to my clients. So when a client logs in, what I'll do for this is I'll click on the tab here, I'll go to options, and I'm going to change the visibility, just means is this tab going to show or not. Click on add a condition, and then I only want to show this if the user that's logged in, the user profile role, is called which is client. Apply in, and then here, since my this user's role if we click on data here is an admin, we can't see the screen. If we were to change this to client, he could see this screen, but Bobby here is an administrator.
So now let's go back and just to double-check, let's log in as a client like Open Lane. This is what we saw before. So here we can see this, but if we go as one of our team members, they cannot see this. That's perfect. That's what we want. What we want our team members to be able to do is to see a list of our clients and then click into that list and view more information. To do that, I'll need to add in another screen. And let's see what we want to add here. I'll do a new page from our users' table, cool. And then we'll just call this instead of users, since only admins will see this, let's rename this to clients. And then you can see here we have our different clients here. But you can also see like Bobby can see himself in here, and Bobby is an administrator.
So we need to change this as well. So we'll go to this collection here, and we can filter this list. So I'll go to collection, go to options, and we can filter this. We only want to show profiles where the, or users where the role is clients. Awesome. So now we see our six clients here. And let's just clean this up a little bit. So I'm going to change this to be a, let's use a table here. We can use the image that we have for the client. That is really dang small. Let me actually change to... yeah, let's use this list view. It's a little bit better. So we have the image of the, the image if we have the name and then we'll do the email. So now that looks a lot better. Images are showing. Let's switch this just because it's really hard to see all those. I like this. I always just click around to find something I like. Medium, okay. I think this is decent enough for now. You can play around with it, like I said, with everything, play around with it until you find something that you like. And so right out of the box what we have here is now we have this list of clients. I need to make sure... so you can see here I'm viewing as Open Lane right now, so I actually should not see the screen that we're looking at because this is only going to be visible to the administrators. So let me add in that visibility condition where the user role is admin. So these are our team members, if you recall. So user role is admin. So now Open Lane only sees the profile, and then if we go to Bobby here, he cannot see the profile but he can see clients. Perfect.
And so now we can click, let's see what all is going on in this list here. I see we have this little hover button. What is that doing? That says edit. I think we take that off because we're gonna allow editing within. So, totally your preference here. So, I'm gonna add, I'm gonna turn off editing, but I'll leave on adding. I think that's, that's cool. So, we can have that within the app here. And we'll get to that in a second. So, what the goal here is to is add your team as administrator so you can do everything that you need to be able to do. So, if I click into a client here, what you'll notice is that this entire screen is blank, and that's because we haven't defined the what is called the details screen for a client. You can see here if we go to actions, and we go to advanced actions, whenever we click on an item, we're going to detail screen. So, we haven't configured that yet.
What we built here, if you click on profile, remember this was a custom screen, it was not the detail screen. But what we can do is we can, remember what I showed you in the last video, I told you you could copy all, so that would copy all of these components, and then if we go to clients here, and come click on a client, now I can, let me delete this one, and then I should be able to paste all. And so now you can see here it pastes in what we had on that other screen. I'm just going to drag in the breadcrumbs here so it's inside. So now I can click out of clients, click on another client, and then we see all their stuff and then so on so forth.
So that's just a really quick way to define the detail screen by copying and pasting what you have already built. And what this should be able to do, let's go ahead and check everything. We should be able to update the profile, so I can call this company Open Lane Inc and then submit that. So we're as an administrator we're able to update all that profile information. We should be able to add a new deliverable, so we can call this fun project, and then say N/A for notes, submit. So we've created a new delivery, but what you'll notice here is it didn't show up. So let's go ahead and fix that because that would definitely be an issue.
What I know what happened, but I'll show you what happened. If we go to deliverable, you can see here in user email, it should have shown that open should have stored that open lane email because remember this is how we're showing all of those. But for here, it stored the current user email because that's how we set it up. If we go to our ad form here, the user's email address is getting sorted, the current user that's logged in. What we actually want to do is instead of storing the current user email address, we want to get the email from the screen that we're on. So values from screen instead of the current user's email address.
So I'm going to click on that, that's going to bring the email in there. Let me delete that email that was where the current user's email was populating that, and let me switch this over to be the user email. So this is the email, the screen that we're on. And so now if I say new idea test, we should be able to add this. So now you can see that shows up there because now we're populating this email instead of our own email as the administrator. So we're able to add, we're able to view.
The other thing we will need to do on this screen is to be able to edit a deliverable. We want to update the status, and we will want to update like the link to deliverable. So one cool thing that we can do is actually let's change what opens up. Remember I talked about an edit form before. Let's change what shows up whenever we click on this as an administrator. So if we go to our collection, and we go to actions, let's actually change this to be a custom action. So we'll create a new action and we'll say open deliverable.
And we'll say if the user that's logged in, if it is a client actually let's do admin just in case we had other roles in the future. If it is an admin, then we want to show the edit screen. So let's type in edit and a small overlay else we will show the detail screen. So if it's an admin, we'll show the edit screen, if it's a client or something else, we'll show the detail screen. And save that.
And so now whenever I click on this, we see we have this edit screen. And so it's, it looks different from what we had on the deliverable side. So I'm going to say edit deliverable. And then here we can define everything we want to be able to edit.
So we want to edit the name, we will want to edit the link – actually, we need this to be a text entry field since we want to edit it – so we'll call this the link to deliverable. We want to be able to edit the status and the notes. So I'll add in again text entry for notes, and we'll make that bigger, and this needs to be 0.2 notes. And then for the status, we can do just a generic text entry and put in the status here. And so you could type in the status and save it, but what that does, you see here, is it saves that, which is what we wanted.
But we actually, we probably have a few statuses we want to move all these projects through, and it's a defined list. And so the way we can do that in Glide is to create a new table, and we'll call it choices. And we can call it – we're basically going to create a list of statuses. So I'll create, rename this column to be statuses, and then we'll say the statuses that we have are idea, we have to do, we have in progress, and then we have done. So those are our four statuses. What this allows us to do is now for this status field, we can replace that text entry with what's called a choice component.
So put that up there, and then now we have choices that we can pick from. So we need to define these parameters. So what we're changing here, what we're writing to, is the status. We're changing the status, and the list, this is the content of this dropdown, the list of statuses, we're going to get from the choices table, and then the values are going to be statuses. Now you can see all these different statuses here, and then we can change this to be chips, so we can easily click through all of these. And then I want all of these fields to be required.
As an admin, I need to make sure that all of these are populated, so that means we can't unclick a status, we always have to have one, and then we can't clear out some notes. And so let's go ahead and switch this back to the idea, or whatever it was before, and now we can change the status, change the names, put in an emoji there, and that gets updated. So now is it as an administrator, you're able to edit this information. But then if we go back again as a client, they're still seeing the regular old detail screen, or yeah, details right there. And then the final thing you might want to do just to, you know, kick things off, is to be able to add new clients as an administrator.
So if we go back to our client screen, you can see here they already have this add button here. So I'll click on that, and we'll call this a new client, and then we'll just save. And the things we want to require for a new client – um, is an email, make sure that's required. We'll have a name that's required. The image can be an image upload, image, image picker – yeah, image picker. Update the image. Define a website, that's required. A description, that's required. Yeah, all this, we're just going to make required for now. And then the role, since we're adding a new client, we want that to be defaulted to clients.
And so I showed you this trick in an earlier video that I use, because I haven't figured out a way that I know of where you can default these values through a form. What I do is in the users table, I create a brand new template column, and we'll call this client default, and we'll just call this client. And all this does is give us this generic piece of text that we can apply whenever we want to default a value. And so here, I can now click on client default from which the user profile, and then that's going to go into the role. And so what that allows us to do is we'll just say new, new@example.com, we'll go and fill all this out, new client, we can add in an image for our client, give it a website, newclient.com, description awesomeness, check small for the size, and then we can click on submit.
And now we have this new client showing here, we can click on their profile, they can see that, we can also have that new client log in as themselves, they can view their profile, update their information, and literally, like everything works because we've already outlined everything. But we can continue to add new clients and all that good stuff. And just to show you in the users table, this client got that real client, which is what we wanted. And yeah, there we go.
So now, what you've done is you've imported all of your team members where they can log in as administrators and add and manage your clients. In the next video, we'll cap this off with onboarding your team and your clients.
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.
