Step 3: 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
Recap of Previous Videos: I recap the previous steps from the last video (get free access to full series here), including importing a client list and allowing clients to view their profile and deliverables.
Allowing Clients to Update Information: The main focus is on empowering clients to update their own information within the portal.
Updating Deliverable Notes: Clients can update notes related to deliverables, with changes being saved automatically.
Editing Client Profiles: Clients can edit their profiles, including the website, description, and profile image. I show how to add an 'Edit Profile' button and configure it for easy use.
Field Requirements and Validation: Fields are made required, ensuring that clients cannot leave essential information blank.
Client Requests for Deliverables: I introduce a feature for clients to request new deliverables. I demonstrate how to add an 'Add' button, allowing clients to input their requests.
Automation and Validation: The process is automated, with the current user's email automatically associated with new deliverables. Validation ensures that all required fields are filled.
Filtering Deliverables: Clients can filter their deliverables based on status, helping them to navigate through a potentially long list of items.
Final Thoughts and Next Steps: The video concludes with me noting the importance of enabling interaction between the company owner and clients within the app, hinting at the focus of the next video.
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, so just a recap of what we've done over the past two videos: we have imported a list of our clients, and we have given them the ability for whenever they log in with their email to view their profile and then also view the deliverables, the things that we have created for them and are giving to them. They can click on them and go to the link, and you can add in whatever other specific information associated with that deliverable that you would need in your project.
So now what we want to do in this video, the next step that I suggest you add in, is giving your clients the ability to update information. So, I'm going to go through a few different things that you can that you might want them to be able to do. So the first one is actually already done, and you'll notice this if we go to one of our deliverables, you can see they can actually update this note. So you can say, 'I am updating...' I spelled that wrong, 'updating this note,' and that automatically just gets saved there. So now when I open this again, that's there, and if we go to the deliverable inside of the data, you can see that that note is already updated. So this is a text, just a general text entry field, and it's open for everyone. So this is not like editing and saving; this is just open for everything.
So one thing you might want to allow them to do is edit something specific inside of their profile. So here we can see all the data associated with their profile: they have their website, they have their description, we have some other things here. And what I want to do is let's give them the ability to update their website and their description. For that, we can go to... I'm just going to add another button here called 'edit.' So that's within this title component over here. And then we have our actions associated with this title component. So I'll just add an action, I can click on it and say 'edit.'
And then right now, if I click on it, it just shows this general generic success message because that's the action associated with it. But what I want to do is I want to change this to show the edit screen. What that does is now I'm going to click on it, it opens up the screen where they can edit all this information associated with their profile. So let me actually, I'm going to rename that. I want to be a little bit more specific, and I'll just say 'edit profile.' And then I think I want their edit profile button to be here, and then website to be on the left, that's what I think. So now we click on that, it's going to show this edit screen. Let's go ahead and change the title here to 'edit profile,' and then whenever they click submit, whenever they save this information, I just want to give them some confirmation. So that's what we can do with this on-submit action. So I'm going to add in a notification and we'll just say 'saved' so they know that their information was saved.
And so I haven't changed anything yet, but now if I click on submit, it says 'saved.' Oh, wrong button. Alright, let's go back to edit profile. And I don't want them to be able to edit their email, particularly because we are using their email in other places inside of the app. So if they need to update that, I want them to reach out to me so I can make sure that that email is updated everywhere. So I'm going to remove that from being edited. Name, heck, let's give them the ability to update their name. And then their image, if we're they can update their name, they can also update their image. You might want them to update their profile image. Instead of a text entry field for that, I'm going to add in an image picker. That way they can pick an image from their computer. There we go. And then this is just saying you're editing the image in two places, you don't need to do that. We'll say image there. The website, they can update. And I think, oh, that's good. Description, they can update. And then this, the rest of this information, I don't want them to be able to update.
And then one more thing, we'll go ahead and do, is I want to make all of these fields required. So they can't like clear out their name and it be empty. They have to upload an image, they have to have a website, and then they have to have a description. So what that does is if they were to remove their name, they're not able to submit it. And then if we like exit out of this, it actually doesn't save any of the changes. So their website right here is glideapps.com. Let's go ahead and change this to docs.glideapps.com, submit. Let's see if that actually went through. So the website now points to Glides documentation. Sweet. So that edit is now uh working. So that gives them the the ability to edit their profile. They have the, you can do something similar on this screen or for the co, for these items here if you want them to be able to edit something. You can go to collection, go to actions, and then similarly how we have this open link, you can also add in an edit button here that would give them the ability to edit an item or whenever you click on this, you could just open up an edit screen. You can do that again in the actions instead of showing the detail screen for this item, you could show the edit screen. Those are two different screens that allow you to configure them separately. I'll let you work on that. You can do that specific to yours. You should have those tools in your tool belt now. But let's go ahead and do one more thing, one more kind of data entry thing that you might want them to be able to do. And that is to add in requests for deliverables.
So they have a list of deliverables here. What I want to do is give them a button to add. And that's really straightforward. You just click on this collection here, and we come to automate basically automatically associate this new item to their account. We basically want the current user's email to go into that user email because they're gonna if they're adding one to their profile they're going to be logged in. What we can do is add in what's called a special value. So if you just search for special values and special values are just unique things so like the user's email address it's currently logged in. So I'm going to click on that and then you can see here that this is mapping to the user's email address. The link to the deliverable that's something that we're going to add so they don't need to add that. The status likely we would want to default to something. We'll add that in a second and then notes we want them to be able to add notes. And then status we want to make a default value. Now there's no way right now in Glide to default a value easily so one trick that I have is if you want all new deliverables to be a certain type what I typically do is you can look at, you can see here we have values from screen we have values from user profile so what we can do is just like a this is a little bit of a hacky way to do this is to add a new template column and I would just call this idea default and then I'll just put in the idea text. And so now for whenever somebody's logged in they now have access to this generic column that just says idea in it. And so now if we come over here you can see we have this idea default value and I can point this to be the status. And so now whenever they create something the status is going to start out with an idea. So that's just like a simple way to default it. And so Glide adds an easier way to do that in the future.
Alright and then the last thing we want to do is let's make these required we want them to add another title we want them to add in notes. And then maybe we just even rename this instead of title just call it idea so deliverable that I'm creating. I want a new color for my website and then we'll say notes please consult the sun because the sun is fun. Alright then we submit that and boom now we have this new this new deliverable down here that is an idea it's an idea status we have our note in there and now year in can add in their own idea my awesome idea notes please do this submit and they have their own. Now one beef I had with I have with glide at the moment is I just spent all this time creating this idea form and they if there's no collection items here this button does not show. So if I go over to opentec there's no way for this user to add their own deliverables now likely this scenario will never come up because if I add them as a client like they would likely have at least a first project but I would love to have that add value be available even though there's no collection items so that they can add their own. In the meantime if you do need to do this you can just create a new button have that button show a form screen and then configure this similar to how we did the other one. And a quick way to speed up that process if you didn't know in Glide is if you go to a form or any anything you can click on a property and copy all so that allows you to copy and paste components. So that's a quick way to to get that roll in if you need to do that.
And then I'll leave you with one last tidbit of awesome is in this list it will likely get long if they're a long-term client. You can add in in addition to searching here like we can search for idea that would just show that one, you can also add in filters. So if you come over to options you can add a show filter here and let's just say we want to filter on status. What that allows us to do is if we go to, I guess all of these, so then here we see all of these different statuses and I can just show ones that are in progress, I can show ones that are done and this is something that the client can easily look through all right.
So I think that's where I'm going to end it for this video. We now have this awesome portal where our clients can see their profile, they can see the things we're giving to them, and they can start to edit and interact with this information with us. And that's actually what we're missing is the 'with us' part. There's no way for me as the company owner here to interact and view all this data within the app. I haven't been given like a profile, I haven't been given a way to view all these different clients, and that's exactly what we're going to work on 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.
