How To Create Multiple User Roles In Bubble.io (And Restrict Features)

if you're building an app that requires users to have different roles and permissions then this is the tutorial for you within this video I'll start by teaching you how to properly structure your database to support different role types I'll then explain how you can restrict certain features within your app to users with a specific level of access and then finally I'm going to go on to explain how you can create a set of workflows that allow admins in your app to update the level of roles and access that the users have within it look there's just so much that I need to cover within this tutorial today so let's grab our bubble editor and we can dive right into it before I jump right into my tutorial today I just wanted to take a brief moment to highlight what exactly it is I'm going to be creating so that way you can take a moment to see if this is also what you're looking to replicate inside of your own bubble app so today I've created almost like a team dashboard so on this page you can see a long list of all of my team members in my database now as you might notice each of these team members has a dedicated role and right now this user here who I'm logged in as is the admin of this team so because Simone here is the admin she has the ability to also update the role permissions for the rest of her team so she can make them a coordinator a manager or an admin the other thing Simone has access to is at the bottom of our page we have this sales data here now in my opinion only those who are admins or managers should be able to view this data now if I was to jump into my database and log in as another user that is not an admin so if I head to my app data here scroll on down and run a preview as this user here who is just a coordinator not an admin what you'll see is that over in this person's account they don't have the ability to update the roles of any of their team members and if we scroll on down to the bottom of our page they also don't have permission to view that sales data and so for our tutorial today when it comes to creating roles we're essentially just creating a hierarchy of a Kind So within our app we're going to allocate roles to certain users and of course we're going to restrict features based on the permission that each user has now this is perfect for things like internal tools project management tools or even things like marketplaces so if you're building a product like uber which is a two-sided Marketplace you're going to want to restrict certain features for those users who are Riders and those users who are drivers so they're almost going to see two different types of apps now throughout our tutorial today the first thing that I want to do is just take the time to highlight how you should set up your database when it comes to creating user roles and permissions now throughout my tutorial today I've just created a list of everything we're going to cover within this checklist here now I personally just use a tool called notion which allows me to create a checklist like this and if you'd like access to this checklist so that way you can follow along throughout this tutorial I'll be sure to include a link to this in the description of the video but as I mentioned the first thing that we need to do within our tutorial right now is take the time to set up our database so that way it can power our user roll feature so if we jump over into my bubble editor and open up my data types what you'll see is that in my example today I have two simple data types there's my user data type and of course this is going to house all of the information for each of my team members and inside of this I have some pretty basic fields and there's one particular field I'll show you in a moment which is the roll permission here but the other data type I have is this data type known as sales now this isn't really relevant to our tutorial today but this is just where I'm storing and pulling all of the data for that chart you saw on my dashboard page but look this isn't really relevant to our tutorial today the main thing I wanted to highlight when it comes to my data types here is that you'll notice that I don't have a separate data type for each type of user role now this is a mistake I see time and time again that people make when they are brand new to bubble and look I've been down that road before as well it's easy to think that when you need to create a new type of user role that it should be its own data type so in my example today I have three different types of user roles there's a coordin coordinator a manager and then there's an admin now typically if you are brand new to Bubble I completely understand why you might think that you need to create three separate data types so the coordinator the manager and the admin but look that couldn't be any further from the truth the thing about creating separate data types is that they won't be able to replicate the user data type the user data type in Bubble is very special it's the only data type that allows users to actually log in or register an account so if you were to create let's say another data type for a coordinator a manager or an admin those users wouldn't be able to log in through those data types they can only do it through your user data type so under no circumstances should you ever create a separate data type as a means of registering a different type of user all of this will be under the one user data type and instead what you're going to do is create a data field which allows you to determine which type of user each person should be within your app and so what I'm going to do today is actually delete the this data field and I'm going to rebuild this from scratch so under your user data type I'd recommend creating a field known as something like the roll or in my case today I'm going to call this the roll permission because this is going to determine what type of permission someone's going to have within my team dashboard now for this field type this is where things are going to get interesting I'm actually just going to digress and cancel this for the time being and the reason for that is because I quickly just need to divert and explain how we can create this in the most optimal way possible so if you've used bubble for a little bit of time you might be familiar with the concept of option sets and if you're brand new to Bubble I'm here to explain everything you need to know today option sets are kind of like a data type only unlike a data type which is something that your users inside of your app create an option set is something that only you as the owner of your app can create so your end users can't create or edit option sets and so this means that as the owner of your app you have complete control over all of this data you're going to pre-store in your database and this is perfect for a feature like user permissions or roles so as you'll see here today I've created an option set known as the roll and in fact I might recreate this from scratch so you can see exactly how I did it so if I was to create a new Option set I'd call this the roll and inside of this I'm going to create my three different types of rols Now by all means if you want to add more different types of roles feel free to do that but for our tutorial today I'm going to keep this pretty straightforward so inside of this list I need to add all of my different types of users so there's going to be the coordinator there's going to be the manager and then finally there's going to be an admin and now the beautiful thing about option sets is that a user can only select from one of these three options here so it's not like they can type in that they should be a super admin or they think they should be a manager they can only choose from one of the three options that we've pre-created which just helps create a lot more governance and control over the different types of roles inside of your app now once we've created this list we can jump back to our data types and if we now create that data field under our user data type I'm going to once again call this the roll permission and for the type of data we're going to store in this we're going to link this to that option set list that we just created so this is our role now I'm not going to tick that this should be a list with multiple entries because in my example today a user should only have one type of rle they shouldn't have access to multiple options but look there will be some scenarios where you might want to allow someone to have a list of different roles but for my example today I'm going to keep things nice and simple so I'm going to choose to create this field here and what I'm also going to do while I'm in my database is set a default value on this data field and so a default value if you're not familiar is just a pre-stored value that's going to sit under your user data type every single time someone creates an account so whenever someone registers for my app what I'd like to do is by default give them the role as a coordinator so that means they're going to have the most basic level of permission possible now once we've learned how we can set up and configure our database to support all of these different types of roles now we can get into the fun part what I want to do right now is explain how we can limit certain features to users that have a specific type of role or permission and so what I've done is I've created a separate page inside of my bubble editor and this page is essentially the exact same dashboard that I'd shown you before but at this point in time I haven't set any of the restrictions to the features based on a user's role and so what I might quickly do is just highlight how I've structured this page so on this page I have a repeating group here that's just searching for a list of users that's super straightforward then inside of each repeating group I just have a group that stores some elements displaying information about each user and one of these fields is a text field that will display the type of role that a user has now because this was linked to my previous data field that I deleted I'm going to need to reconfigure this so in this case what I'd like to do is reference the parent groups user their role permission and I'm going to need to reference the display text because this was linked to my option set list so if I want to display what type of role they are I just need to reference the display text it's super straightforward now as it currently stands if I was to run a preview of this page logged in as someone who's a coordinator they would currently see the ability to edit all of the users information as well as view this sales data so I might show you what that looks like if I head to my data tab open up my app data here and scroll on down what I'm going to do is head to my second user here and if I select this little pencil icon I'm going to update their roll permission here to be a coordinator now as I mentioned before by default when someone registers an account they should automatically be a coordinator but look because I've already created this account in the past that default value has not applied so I'm just going to need to add this manually here and look while I'm here this is also a great time to explain how you as the owner of your app app can also manually edit the permissions of each individual user so as you can see right now we can make any changes to the data fields that this user has and when it comes to the role permission you could set them to be a coordinator a manager or an admin so you as the owner have the ability to manually change these values now I'm going to choose to save this user as a coordinator then if I run a preview of my page logged in as this user what you're going to see is that even though I only have the role of a coordinator I still have access to edit the role of any other user inside of my team and look if I scroll down I also have access to view all of the sales data and now none of this should be the case I want to make sure that only my managers and my admins have the ability to view the sales data and I also want to make sure that only my admins have the ability to make changes to each team member so how can we do this let's jump back into our bubble editor open up our design Tab and all we need to do in order to restrict certain featur features from users is hide them on our page and then create a condition that only allows them to be shown when a user has a certain role type so if I select on my edit button here what we're going to do is jump over to our layout tab now within our layout tab I can see by default this element is visible on page load so that means that every single time this page is loaded anyone can see this element and obviously we don't want that to be the case so what I'm going to do is uncheck that this element should be visible on page load and I'm also going to tick this option to collapse this when it's hidden now what that means is that when this element is not being shown it's not going to take up any empty space on our page it's truly going to disappear then from here because this element is currently invisible to every single user we just need to head over to our conditional Tab and Define a condition that's going to recognize when this button should be displayed to which particular user so if I Define a condition I'm just going to recognize when the current user now the current user is the the person who would be logged in viewing this dashboard page and so when the current user when their roll permission is in fact an admin I'm going to say that this element should be visible and I'm going to tick that this should be true so now if I was to jump back into the preview of my page and refresh this what you'll see is that when I'm logged in as this user who is only a coordinator they no longer have the ability to view that edit button and if I was to jump into my database and set this user to be an admin they would have access to view this so I'm going to jump back into bubble open up my data Tab and scroll right down to the bottom of my database under all my users and for the first user here I'll click on my little pencil icon and set their roll permission to be an admin I can then save this and then from here I can choose to run a preview of this page logged in as the admin user and of course because this user is an admin we now have the ability to edit the roles of any any other user inside of our app and when it comes to that feature I'm going to explain how we can do that in a moment but there's one last feature we need to restrict on this page and that is our sales data here so as I mentioned I only want this to be visible to users who are either an admin or a manager but not users who are a coordinator so if we jump back into my bubble editor I'm just going to double click on this group which contains both my heading as well as my chart element and in order to restrict this feature we're going to need to replicate a very very similar process that we just added to our edit button so the first thing we'll need to do is make sure that this element is not visible on page load so it should be hidden to all users by default so if I select my layout tab here I'm going to scroll on down and just uncheck that this should be visible on page load I'm also going to take this option to collapse this element when it's hidden then I'll need to jump over to my conditional Tab and Define a new condition now within this condition similar to before I'm just going to recognize when the current user when their rooll permission is in fact an admin but if you remember I also mentioned that when a user is also a manager they should also be able to access this chart so I'm now going to select the all option and I'm going to say when the user is an admin or when the user is a manager so when the current user when their role permission is in fact a manager so whenever it's one of these two options I I want to select that this element is visible and tick that that should be true and so if you have features inside of your app that are visible to more than just one type of user R this is the exact type of condition you'll need to create now look if you've got five different types of roles and you want three of those five to have access to this feature you just need to add another or option so you'd select the more the or and then you type in the next type of role that should also have permission to this now look that's everything you need to know when it comes to hiding and display dising certain features so being able to restrict them and so what I'm going to do is just jump back into my notion checklist and I've been pretty lazy when it comes to checking items off but I can see that right now we're at the very last thing that I want to cover within my tutorial and that is creating a way for the admins inside of our app to actually be able to update the roles and permissions that team members have within their organization so up to this point I've explained how you as the owner of your app could jump into your database and manually update the role of any user at any given point in time but what I want to do today is create some sort of autonomous way for someone who's an admin to be able to click this edit button and then go on to also update the role of anyone else in their team so inside of my bubble editor under my design tab what I've done is I've just taken the time to create this popup so when the edit button is clicked I want this popup to be shown now in this popup I'm just going to quickly highlight how I've set this up within my appearance tab I've set a type of content to be a user so that means that when this popup is shown I want to store the value of a user in it and that user is of course going to be the person who we select to edit then from here I'm just displaying the profile photo the name the job title as well as the role of this user now similar to before I'm just going to need to update this data field because I've recreated that role permission data field so I just need to reference the parent groups user their roll permission the display text and then below this I've added a drop down menu so I want this dropdown menu to display all of the three options within my option set list so that way I can easily just select which type of role this user should have and so in order to do that if you add a drop-down menu onto your page you just need to set the choices style to be a list of dynamic choices so you're going to be pulling a list of pre-created options from your database then when it comes to the type of choices we're going to reference the roll which is our option set for the choices Source we're just going to pull all all of the roles inside of our database and then finally for the caption we're just going to display each option's display text so that's just the name of the role itself then what I've also done is I've set a default value on this field so the default value is just the option that's already going to display before you even open this drop- down menu and in this case I'd like to display this user's current role so if by default when they register an account there a coordinator it should display the word coordinator if we then update this to be a manager it should automatically display the word manager and once again I'm just going to need to update this field here because it's referencing my old data field so in this case I'm going to reference the parent group user their role permission then finally i' just like to highlight how I'm actually updating that change inside of our database so when this save button is clicked here it's pretty straightforward all I'm doing is I'm running a workflow with two steps in it and within the first step what I'd like to do is just make changes to the user within our popup so I'm just going to delete this EX existing option and the field I'd like to change is the roll permission and I'd like it to equal the value of the drop down menu so I've called this my dropdown roll I'm going to select its value and then from here I'm hiding the popup now I should also just highlight that when the edit button is clicked I have another workflow with two steps in it the first thing I'm doing is just displaying data into my popup so I'm sending the value of that user who I'm trying to edit into my popup and then of course I'm showing the popup itself so if I was to now jump back into my preview and refresh this page here what you're going to see is that if I was to select on John Wilson's account here I'm going to choose to edit his role currently at this point in time he does not have a role but I'm going to make him a manager I'll then choose to save this here and then if at any point in time in the future I wanted to edit his role again I could just come back and as you can see his existing option is pre-selected now if I wanted to log in as John Wilson who is a manager he should obviously have access to view this sales chart here so if I just quickly jump back into my editor open up my data tab I'm going to scroll up to John's account which I can see this is him here I'm going to run a preview of this page is him and if I scroll right down to the bottom of the page of course because I'm a manager I have access to the sales data now look that is absolutely everything I wanted to cover within this tutorial today I know it stretched on for quite a bit of time but I wanted to make sure I didn't leave any stone unturned at this point in time you should be able to confidently integrate your own roles and permissions feature within your own bubble app and just like that you now know how to create your own roles and permissions feature inside of bubble now that you understand these Core Concepts you can easily customize this feature to suit any app you build in the future look if you found this video useful I'd always recommend hitting that subscribe button on my channel so that way you can be the first to know whenever I drop a new tutorial in the meantime though I just wanted to say Amen massive thank you for taking the time to watch this video and I wish you all of the best on your own no code [Music] Journey

Channel: Building With Bubble

Views: 4,531

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, User roles, App permissions, User types

Id: wYrXPXQiohk

Length: 20min 14sec (1214 seconds)

Published: Mon Dec 18 2023