Learn No Code on Bubble.io Charts, logins, Notifications, signup pages, and view restrictions | Shane Kluiter | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn No Code on Bubble.io Charts, logins, Notifications, signup pages, and view restrictions

teacher avatar Shane Kluiter, Knowledge is Power

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (1h 46m)
    • 1. Bubble course intro

      1:19
    • 2. Bubble notifications

      6:31
    • 3. Creating a project workflow

      35:58
    • 4. Creating a sidebar UI tool

      5:52
    • 5. Creating a simple crm

      31:28
    • 6. Displaying data in a chart bubble

      8:17
    • 7. How to Create a Sign up and login page

      10:51
    • 8. User restrictions based on role

      6:09
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

42

Students

--

Projects

About This Class

In this class you will learn how to build on the Bubble No Code Platform. 

  • How to create a chart on bubble
  • How to create a notifications system on bubble
  • How to create a project workflow on bubble
  • How to create a user interface side bar on bubble
  • How to create a simple CRM
  • How to create a sign up page
  • How to restrict views based on the user role in bubble


After learning how to create these simple parts of a bubble program you will be equipped to create your own application on bubble. 

Bubble is a great tool for learning No Code tools. Bubble can be used to rebuild anything from Facebook or Instagram to a data analytics tool. Learning bubble is one of the most useful no code skills you can have. 

In just a few hours of learning and testing you can learn how to build on bubble.

Advantages of Visual Programming include:

  • Faster Implementation
  • Faster Production Minimum Viable Product
  • Easier testing and altering of the solutions
  • Smaller development teams needed
  • Easier access for new programmers
  • No code needed

Meet Your Teacher

Teacher Profile Image

Shane Kluiter

Knowledge is Power

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Bubble course intro: So in this class you're going to learn about bubble. And bubble is a no code platform. We're helping you build applications that easily so you can build pretty quick on bubble. The idea here of this course is to help you build even vaster. Start learning some things pretty quickly here. So we'll learn about building charts. We'll learn about building a notification system. So if something happens inside the applications, it'll tell all their users about it so that they can take action, moral or not creating a project workflow. We're going to learn about creating interface sidebar. We're going to create a simple CRM. So we're going to learn how to build like actual real things inside of discourse, including a sign-up page so people can actually join your website and how to restrict their view once they are in it. So if you have different types of people coming in, so you might have someone who's an admin who needs to see more than someone who's just a regular employee. Or you might even break that up based on their positions. So after learning the simple parks, you'll be equipped to start creating programs of your own, which will allow you to start building out your middle ear for SAS company. Maybe you're just Dolan for fine, but you're building tools for the company you work for. This course is meant to help you get started learning more about how to work on bubble. 2. Bubble notifications: Hi. In this training we're going to look at how to do a quick kind of notification for if something happens inside the system. So the goal here is if somebody changes a setting or if someone submits a document or something, we have a way of notifying like an admin that that happened, right? So maybe there's something in a queue, right? It's very simple. So the first thing I wanna do, I'm gonna make a shape. Shape there and squares fine. We can change it into a circle by just adjusting the roundness to from making it smaller and stuff, or just changing it to a circle. But we'll do it that way real quick. And then I like to color red for this. Great. So we have a circle. And just to make this simple, I am going to drop down yes or no. Yes or no. And then I will make a save button. You can attach this to any kind of a thing. I'm going to attach this to the current user. So the user will see a dot if a setting on them is changed to yes. So here changes to current user. And we will create a new field, I'll call it red dot. It's going to make this text, it's a little bit easier sometimes. Dot equals felt down, yes, nos value. Great. So when we push Save, red dot will equal drop-down yes, nos value. So this red dot, I want to make it so that does not show up on page load. So it automatically is going to default showing up. So nope, we don't want that to show up. And then conditional define a condition. Turn the condition on when current users red dot is. Yes. Actually we type at the same. We did select property changes to element is visible and we want to check element is visible. Great. Now, if the current user who's logged in Has this set to yes, this red dot should show up. So let's click preview and see, you know, red dot, right? But if yes and save, there's red dot. If I change it to no, no radar. So what I could use those for is say I'm making some kind of workflow. Say I have a document that gets created. I want a little red dot to show up somewhere that my admin logs in. I have a sidebar over here and it says, hey, someone made a document, you need to go prove it. So in my app I build it out so that the guy goes in and he says, OK, there's an app here I click or document here I keep clicks on the document. Looks at the document and says, great, there we go. It's little simple things like this that make it very easy to just create a simple little alert that pops up is a little red box. Maybe you make what is essentially a comment box, right? Or a suggestion box where your staff can go in and they can do with irregular work, but they can also make suggest changes for the workplace or they can report anything like happening, right? So that they can report something into you on shifts that you are not, and therefore, they can submit those. And if there's new ones that are submitted that you haven't marked as viewed. So they would mark it, yes. And then you would mark it viewed. And then if you had marked it viewed, it wouldn't show up a little red dot. And this is super useful for admins to have because your admins can log it and they can go and check things off and know, oh, I have something in this bucket, are that bucket or on different tabs to go look at. This is a quick example of what I just discussed. I have a report hazard here. My staff member would go in, they'd want to report something, right? It could be anything. Let's say that they're going to report a ticket issue or something to write. We can do that really easily. Weakness can put where it is. We can put in cuter, we can put in your not working. They enter this over their phone or something. But the date that it happened, submit it defaults everything away. And this will then go to the admin, right? So give me a second, I'm going to hop into what the admin will see. So my admin sees there's better reported hazardous. A little red dot that alert them that they should know helping habit. Which click here. Let's just see what it does. When there's a list of ones that have addressed once they haven't addressed. And then they can click and they can view it. And the reason we build stuff like this out is say somebody is reporting something. You can then go ahead and say, this is what we did to correct it. These are images. This is all stuff that's super easy to do in bubble. And you can click corrected the ones, correct it out the old dot one-way because we made it go away. So we have a list of all the ones we've done. Can filter them by locations on this page too. But that's an example of that small principle put into practice. And it's as simple as having a field that you're dictating whether or not a little dot turns on. And it gives you a huge amount of functionality for alerting admins across admins or even other users across your app. 3. Creating a project workflow: So let's say we have a workflow, type f. Maybe it's a situation at your company where you have a piece of material that's being turned into a finished good and you have a five-step process or elicit, or dump, or let's do a three-step process, right? The already built roles 123. And another lesson was do a three-step process. So we have our first-person, they received the inventory, they verify we have all of the inventory. Right. That's what we're gonna do. Then after we verify our inventory, we're going to go ahead and we are going to have someone do the work on the inventory and log the details on it as far as waste material. Then we are going to have someone verify the quality of the good. And we want all this track on that good before we deliver this project because we're doing specialty projects. So are we gonna do that? Great. So let's start from the beginning. We have projects. So let's make a page where we're going to add in projects page name at Project. And we want an input for our project name. But let's just do the customer. Who is this going to? Making those very simple, you can add a lot more data to these made as complex as you want. We're just going to heat the simple project. Workflow. Create a news thing, promote to call it a project. And we're going to say Greatness field, name, spelled correctly, text company on for the project because we want customer here. We are making this project for this company. Whoops. The project moon names valley there the company is the customer say value in the company. Yeah. Well, you know what, that's fine. So we're making this project for this company. Great. So once this is created, we want to do something with it, right? Sometimes it's helpful to take a look at your data and decide what you wanna do. So I have created a project. It's a super simple thing to create. I want to create a project dashboards like we see what stages my projects are at and what once we have put in that don't have inventory ones that we're building. And once that we'd finished, I want to look at that. And sometimes it's helpful, just kinda start where you're ending and then work your way there. So what I'm gonna do is I'm gonna click on my data. Click on my project. I have Project at my company name that I'm working with. And I have the project thing. Now I want to go in and I want to though, add a goods needed text. And this is just a list of goods that are going to be needed for the project. And then I want to verify that this will be a yes or no field. This just means we have the ability to dictate yes or no in it. And that is all that can be put in. My default value here. No. Great. And so in a project that gets created is automatically being tradable goods received of No. We'll use that later and I'll show you how. So right now, we have the ability to have looked at and someone can say these are the goods we need. Do we receive them? Okay? What does the next person going to do? They're going to build the project. So let's create a project built that's worn down. That will give us the ability to say, has this project Ben, built? That way? Person enroll to who gets that showing up on their dashboard. They build a project, they can change it to guess when they're done. They can also add notes, which will be a text field here. So we'll add something called built notes, where we're going to have to adding those. Then we want to go in and we want to say waste product, where we will have a text field here, what we're going to record any waste product. This will also be added by well too. So field quality control, check fleet. And we can get a yes or no here. Go to start with. Right. Now. We've got basically everything we want to have on it. But we'll create this project. So something that we're missing. We're missing the notes for what is needed, right? So we'll add another box here. It's multiline input. Let's call this material notes. Okay, now we're gonna just simply edit some work we'd already done where we're gonna go back and we're going to say goods needed equals input material nodes. And if I want to, just for simplicity, I can go back and change this to goods needed, which looks a lot cleaner now, when I click into my app, I'll be able to easily see because needed. Okay, this is good to see it. You see ans here, and I'll just continue to call things the same way. So now I created that project and on this page real quick, I'm gonna create a simple dashboard, so we have it all at one, in one spot just for showing him. This is something that someone might look at to see Bayes rule we have to work on as though we are working on a. So we've completed right. So when I create are being grouped is click on repeating group. And we will drag it out. Wonderful. And actually, I'm going to create three columns are all about the same size. So I put that one, c, v, and we'll just make three that are about the same size here, skinnier columns. Right now. Inside of the first one, I am going to do a project and then I'll go to the other two. I'll make them all projects again while I'm at it. This way, it's a little bit simpler. Do everything kind of at once. Now, I want to dictate here kind of what I want to show up, right? So I want to be able to see what each ones of these, what's going on in each one. So I'm gonna put some headings for myself just to remind me. So let's heading will be new projects. This heading will be working projects. And this heading will be your projects. Great. I have a project working projects, completed projects. And what I'm gonna do here is I'm going to grab text and throw it in here. And I'm honored to have it be the self projects project name. So at any point, I will be able to look at these and kind of see what's going on. And actually, I'm gonna do that in every one of these bach top boxes, which will repeat down through with all the projects. I just want to go ahead and add the current cells projects project name that will allow me to just basically what's gonna do. It's gonna search for projects and it's gonna say, hey, in this project is selected projects, this is the first one, the second 1, third 1. And we'll do the same here. And so projects, project bidding. Okay? Now I want to think about our workflow here and how this is going to look. So we're creating a project, grabbing other people completely projects. Now with the projects, the ones that are new here. So I'll do a search for data and do a search for projects, new constraints, right? So what does it look like when this has created? Let's take a look. So something's knew what data is in there. All we have is this, which means all are yes, no fields. They're all going to say no. So we wanted to make sure they all say no. Okay. So backed here. And I'm going to search for projects. Click here. And then I want to say, see you head quality control can meet project films. And then we will do is received and verified. And so these are the yes and we're going to use these for dictating what shows up inside of our charts here. So equals, equals now, and we'll do equals now because this is our default, right? So l do go out into our database and we'll say, where are all of our projects, right? These are all the projects. Where are the ones? They all have nothing dot on them that I'll say no, perfect, Here we go. Great. Then. We don't need to do similar things here, right? But sort of having a redo all that kind of clicking and doing stuff over and over and over. Let's just copy this one over here. So what I'm gonna do is I'm actually gonna delete. These, were redoing some stuff here, but it's good for learning. Because initially what you do is a lot of times you go in and rebuild the same thing over and over, then you've realized you could use a simple copy and paste function and just select it, push cede control C control the charity that over. And now it looks like I basically just repeated what I already had. But I actually added this again with workflow, right? So if you want to think about it, if I have somebody, something that was a new project, although it would be nice if I have something that is being built. I would have a yes for goods received, right. Because receive goes to them being built. Then I have completed projects. Which also brings me to the idea of a missing a section. So I have completed projects. This probably shouldn't be called completed projects is probably Hall completed projects waiting for verification. So goods verified. Obviously, I add BioProject. Oh, yes. Quality control check has not been done. That is what the third position does. So here, I also need to have no, okay, there we go. So this looks right, six, okay? So we have three nodes, one node, three, nose to nose, OneNote, projects or quality team, please take a look at all of these ones. And that is our concern that we're just making sure there through once they're done with us there and shipping anyway, we don't care. This is our pipelines are concerned. So Let's click on preview. Can't do anything with these yet, but create a new project. Let's go ahead and let's say Project One. Danny Tom Corporation. And let's say we need great, Pretty project. So it only shows up here. Why? Because our initial statement says no, no, no. For RES, no parameters that we're putting on these. But once we received the goods on it and we verify them in check, yes, that can move in project one, twerking. Alright, let's go ahead and let's build the functionality for that. Now, I would normally create all of these on separate pages. But because it's a lot easier to build these out and show and display how it functions smoothly all in one screen. And that's what I'm gonna do here. So I'm gonna scroll down. I'm actually just going to drag this box down. And we're going to be able to see each individual role and what that's gonna look like. So I'm gonna first put my headings out. Text one and y of roll 234. And this is going to have Melissa projects and then they're going to have more data. So this is just showing the workflow. This is going to be actually doing the work. So I'm actually going to copy this first one because it's going to show new projects. So I'm going to paste it down here. And I'm going to manipulate it a little bit. So I now have a whole lot more space to work with lameness. Now, we had a good amount of data. We wanted to enter. One thing. So let's go into this. Let's change our wrote two, gives us a lot more space to work in. Raise this project name up a little bit more space. Now with the project, what do we really have this person doing? They need to verify goods. So let's do this. Let's click text. If it was just not working out here and we'll drag it. Narayan. Sorry, my mouse been having issues occasionally. So I click tags, tag, click out here. I'm just gonna drag that and slowly easier sometimes. And I'll do good. You did to stated, and now I'm gonna do dynamic text kernels, projects. Goods needed. Great. So I'm doing here is I'm saying confirmed goods needed and then I'm going to list all the goods from this project, right? That is the main thing this role does. Now, i then have a prompt down here, which I'm going to place inside of it. Placeholder, I will do. Much voices will be yes and no. So I also done we'll put that right. So will be confirmed. And actually rethinking that. Don't need this box. That's all we're doing is we're just gonna change it, right? So all of this person does is confirm we have to goods. So the length, this rate here. So love the name, will have goods that are needed and will have a confirm box where you can push confirm that, confirm me to do something and this is all this role does, right? This person enrolled one, they literally just look and they say we have the stuff for the job. You make the project. So start net workflow. Here. What's made? Data and things making changes to a thing. So when confirms clicked data and things made changes to the thing. That changes to a thing. We want the repeating groups project and Alec to hover over these just to make sure I'm looking at the right one because you can see right now we already have full repeating groups that are about projects. Well, this one is the one that looks right because we had the little image here. It says confirm, I can clearly see which one I make sure TO print cells project, sorry. Redo that one worker, they can make more sense. So I wanna change, changes to a thing. Here. My current cells project and pop-up is the first one. That is what I want to click on and that is what I want to change. I could make changes to the entire group down here, but I only want to change the current one that is with that. So the current cells projects. And I want to change this list right here. So I have to change their goods received depend verified to equal guess. Right now and then click here and I'll show you what that does. So I project one. Project one shows up here, confirm goods needed, ten pounds of wood. Confirm now project one shows up in working projects, but have anything was well to yet plenty of role to something to do. So what role does? Let's take a look at everything we can have on our project. So we have the build-ups that they're going to add and there are also went to add waste product. Work that record even so I might do is I just copy the US. Faced with that full three down. So and I want to change this to the goods received. Yes. So it gives you had been received. I don't need this box anymore because goods had been received. I don't need this button anymore by doing the project name stone. So then I want to say, what else can happen here. I want to add build nodes. So I'll click here. And I will make a multiline input, which will say build-ups. And I will make a donor multiline input that will be. Which product so that we have that tracked so we can pull reports or pull anything later and see, these are all the lists atomic products away said what we're building, kind of figure out what we're really wasting as accompany. So if I click my button here, I'm going to add it on button. And it will say, Bill, complete build to quality control. Great. Now let's look on my start menu workflow. I want to go to data and things. Big changes to the thing. Again, we will change the current cells project. And we will change it so that the build notes are there. We will have our waste product and we will have our project built. So project built and should equal, yes, our waste product should equal, will tell an input waste products value. And lt nodes should evolve. Multiline input. Product denotes value. So now let's go back in openness and see what this looks like. I have my project one here and scroll down here. I can add my little notes. So I'm sure built. Great. Because now as Unless here anymore, right. So I don't have any working projects. I have projects new olive oil. So I did all my rule three, which I'm going to copy this guy. Well, actually I'm gonna copy this one. This is more similar. So I'll copy my role one by dragging this down a bit so I can fit all in here and you could do these all in separate pages and then dictate when somebody logs in if they're enrolled one del rho going to enroll one, and it will take them to below row one page. And it will just show them this and this is all they work on it for the day and this is all they will add up for all two and a solid work on it for all three. Which if I copy and paste, try that down here. Then I'm going to change this parameters here so it's received and verified. Yes. Yes. Good. So this should show me exactly the same projects that are in this. So I don't need that box and you want to keep my confirm box. I'm going to then dictate different things for it does all in the chat. And what other data do I need to put in here? So we have a quality control check completed, and we have nothing else left to add. Perfect. So I also want my quality control person to see the build-ups. And I'm going to click on text and click here. And I'm going to type that in and they'll notes just in case there's a build know somebody wanted added in Iowa clip on current selves project build notes. So it will show up there now and hurt quality check. I need to go back and see all the buttons I have. They're all shown up. I'm a very complex page. You can get a lot of buttons, so make sure you're in the right one. So when funding confirm quality check is clicked here to add in things, make changes to a thing. Current cells project again. And we are just going to change the quality control check completed. Yes. So this is pretty simple to do using yes-no fields. And what it does is it allows us to just go in and say, here's a simple process we built that takes a product all the way through its lifecycle of being built and sent out. So as a quick example of what we've done, we have T2, create a product to lands here, productive lands here visited. What do we have? What I guess the loads ship the right leg would completeness and to QA. Qa confirm quality. You could also have a setup where Qe can decline quality and it goes to a different field. But this is a basic kind of workflow that you can use analogous a huge variety of stuff. So instead of little pages, little sections down here, each, each section of this can be its own page. So we could have this project and have a lot more details in a job in the new projects. But say this screen here, right? This screen is for the Project Manager, right? And so he's looking over and he says These are all the projects that we have accompanied. And then you have your guys that are in receiving and they're working in rule one or rule one is saying, do we have this product to build each project? And then there are signing up crowd of two projects inside this. And that's the whole page is just rho one and you have the guy enroll to personnel to can just be saying this is where we're at and building it. It can have different stages of building put in there. They can put it in a different percentages and update it. And at the end, when it hits a 100%, didn't click complete. And then so you have tracking in that respect, you can go to roll three and you can have rolled three, sit there and you can add role three, updating things to say, yes, we did Quality Control, yes. This past or no, it didn't. And if it doesn't pass a can shoot a notification to somebody saying it doesn't. So there's a lot you can do just kinda With this basic functionality. And just what I've shown you here is just working with it, right? So to make it work more, you just add more Killen. So up here we have this little bit of data and a little bit of self. We're adding n, But it's just adding more to what you're doing. So enrol to maybe we start tracking percentages. Like I said, it's very simple to add. I'll click here and I'll add, I'll add this. Right? So then sort of complete, we would also have a save button. So I would have the Get in there. Cuz we're in percentages, so I would say 105000 as an example, percent complete. And then so just having this this box fingers, so I have more space. I drag that down, I add another button that just says. Right? So let's save does is L and changes to that same thing settlements make to create a new site a little ahead of myself. So let's make changes to a thing and we will change the current cells project will add a new field, and hence the current sells products. We know none of them have percent complete. So let's add a new field per second tweet number. And then this will just be the Taiwan or, or the drop-down percent complete value. And that will save that. But without changing any parameters that move into any other spot. Then we can also have it save the notes and then the waste products. So people are building this. They can now go in and they can edit it and change it. But if we're going to do that, we probably should add some more functionality here. Because when this loads is not going to automatically populate with anything here, it's gonna look like nothing's ever been populated. Self will click Build notes, initial contact. Current sells projects. Build notes. Whose base product? Currents, halls, projects, ways, province. So complete default value until projects completed. And I'm gonna show you what this little change does because it actually makes it a lot more robust. Just really quick little change there. This position can do a whole lot more over time and more visibility. And so ProjectThree for Danny Corp, again, He's more wood, is completed and received buildup, so well done. Let's park this 50% of Labels. Click Save. So it didn't go anywhere, it didn't reset anything, it didn't need to write. But we say d. Now I'm going to go back to this page. All right, I'm going to preview it again and I'm gonna show you because this data immediately shows back up to or if I'm supposed to. So I'm wondering why that showed up. Port 50 did not show up here, so we have to figure out where we went wrong. So project built notes, literal place holders that caused the problem. Always go for the simplest solutions. Maybe not actually saved these, right? And then we'll sum saved right? Let's see if it's a day when we pushed it. So App Data projects, project three does not have build knows. That's the problem. Did not say more build on. So why didn't the same or Google maps? So people will just Providence. That's what I did. So I did this project. So if you take a look, project, right? We don't want that. What we want is we want the multiline input. Because if I do this projects built notes, it's saying, OK, there's a project in the space, one of the building on say cool, just make them adult notes. I'm telling you just keep the same value, the same value as it make any sense. So multiline input waste. Now when I added this, I'll be able to see it. Say, it's the little things. And it is defaulting to 50 there. I'll change it to ten just as an example here. And then I'm going to preview that again, calling while non-intact grain. And if I click complete, they'll go there. But now that I have percentages, we don't want to put percentages over here. So let's go back up here. And as we build, you'll find that as we build, we're able to think of more things that we can add cell click on this text here. And then maybe I want to add in the percent pretzels project. Percentage complete, please. And then we'll do a percentage Preview. Should that worked? Yeah, project 3, 10%, we should probably add some spacing. They're supposed to be the updated page reload. There we go. As some spacing, you can read the bullet better there. But as you can see here, right, like I had a 50, 50% percent, that gets whoever's looking at this, the ability to see ProjectThree is up 15% to a 100 and rebuild. Over here, we're able to run it through the cycle. And now if we think about this, for we're not resetting is something that things 67 feet, right? So we've got eight projects. I can say firm, firm, firm, firm at that I can have role to having different percentages for each one of these. And I can see where everybody's at. Third subtype opec up. This is kind of a dashboard look that we restrained to see. And ideally we wouldn't name the same Project, Projects for place. So now if I'm in charge of this group that's building all these projects. I can say we have three projects to start. We have for projects that are in process. This is how close they are to be completed. Each of the ones that are just going through quality control. So this is everything I need to worry about as a manager. I'll just was up for 40. This was a quick look at how you can build something like this. There's definitely a whole lot more you can do. Take a look at the other portions of this course. There's a lot more functionality, a CRM section and the reporting section. And you can put those sections together in with what you're learning here and how to build more and build more interesting apps. Again. 4. Creating a sidebar UI tool: Hi, welcome back. In this video we're going to talk about creating a user interface that is something that users want to use, something that users can easily interact with, something that's a lot comfortable for users. So you think about most websites you go to, they've got one of two things. They either have a big top bar up here, that it's going to be L. Here's main menu settings, Bob La, La, help. Any other parts of the app or website you want to get to right now also have ones that have the sidebar here, which you see are very popular app and multiple modules. So you want to put something like that and that you can make consistent across all your pages. Kind of a good for navigation. That's really easy to do. We can do that over here. We can create a header or a footer, or we can create a new reusable element. So we're gonna create a new reusable element. And I'm going to show you what I mean by this. So I call this sidebar. And I've created as I can adjust the size so I wanna make my longer. So I wanted to go across the length of the page right at the height of the page. And it just as an example in here, I'm going to add some buttons and buttons and create kind of a visual representation of what I wanna do. So probably not. Great. So I could have this be page, so I could have dashboard. I could have entered data, log out and settings just for little spots right here, just example, you could fill this whole thing up. You can go on forever with this realistically, if you want to, however many pages you want to have it easily accessible. You put em here. You could also do stuff like adding in a repeating group. So there's companies that will do stuff like this were built, put in a repeating group here. And we'll do a type of content. And I've got content populated here already just from other parts of this AP course I built. So say I wanted to do a fine woman. Prospects. Let's say I wanted to list my prospects. I could have this be a list of prospects and that would be on any page I put it on. A lot of companies will do this for sales. They'll be having a running list where they can just have a there we go. So they're running a list of sales in there that are basically just here's all the most recent sales and sales numbers associated with them. So they can kinda see it trickle and throughout the day. Or they'll have just a little graph that shows this is our total sales number on the day, or this is how much goods that are in process on the day and how much we'd completed. So they can just easily view everything on the sidebar here, which is very useful at a snapshot for people in managerial roles. They're now, what am I doing this? I'm going to put this on any page I want. So I'm gonna click up here. And here were usable elements go down here if you ever want to edit them. So if I want to edit the footer, This is a pre-canned one. I can edit anything in here for the header as well. Now, the sidebar, this is the part that we built. So if I wanted to say boo to some, let's go ahead and we'll just put this on. Send data to age portion as an example here. So this is something from a another portion of this course. I'm not sure if you've taken that yet, but if you haven't, this is, you'll learn how to build us an added clients in it. This is helpful to create data, but I'll take my sidebar here and I will throw it in here. So now that I've added my sidebar, you can see that the sidebar here is now going to take up this space. So when I click on preview, I now have my sidebar. And then if I had any prospects, I need to fix it because bubbles over top of it and we don't want it there. But I have my sidebar here. I can dictate to these buttons, do things. If I had prospect that, again, I would have prospect data showing up here with their first names. So it's a quick example of how you can build those out and just kind of fun ideas you can do with it adding in different types of data. Adding the sidebar is. And a header can be huge for an app just to, in terms of different functionality and different kind of professional look, right? So imagine you just, you log into something and there's always just kinda buttons everywhere. It makes it a lot easier as a designer to add one of these sidebars or top bar here. And you're able to just go in. You throw this on the page you build with the page. Every page just kinda has this consistency which helps with the user experience because of the users now, okay, and if you know the dashboard, but give a dashboard sf, enter data into change. Some settings are M dot logout. Now it's easy you could have any party or athlete to and thus, remember, people are using most commonly, that's what I'd recommend having in there. 5. Creating a simple crm: Hi, in this video we're going to look at creating a CRM. So a CRM is a customer resource management system. There's a few different things that we need to identify and build with us, right? So we're building a quick CRM. What we're gonna do is we're going to first build the ability to add in a customer. We're going to then build in the ability to add notes to that customer and then go from there. Because once we kinda have that, we've got the basic functionality to see a series of events that we can create, right? So once we have the basic functionality for building that we can just replicate similar things to attribute different different fields and different types of things back to these customers. So once we are able to create a customer and add notes, were able to also create a customer and to start adding in sales. So what do we need first, we need some inputs here. So let's go with, let's do company name must make companies and do another field for them. It will make this address great. Company name and address. I always like to place holders, let me mind mobile, they are there. So now we can add a Company Name and an Address button out here. Elastomer. Good. Wonderful. So now I have the ability to create customers. I want to make customers. I went to see them on a list in front of me. So I'm if it would be group here of content, I'm making this in the same database I did all my other, my other two tutorials on this course on, so you will see all those other ones in here. So I'm gonna do, is I'm going to create a new type of content here on them to create a customer. So I can't pull that into this group telling you that, right? It's not gonna show it by a new clients from the old one that we're going to make customers. So let's click here and just ternary Workflow. Add thing, creating new thing. We're going to create a new type. Plus one. We're going to call a new company or just call it, sort of necessarily need to be new. Create accompanying field address. To address our company name. It will just be text. We can even go in and add like a company phone number and stuff too if we want to. But actually what I'm gonna do is I'm going to add Company. And then later we're going to go back and we're gonna make it so we can add different pills for the company. So we're going to have a company, the address, a phone number. But personally, I like to have the phone numbers test individual contacts, right? So I know which person at the company to call for different numbers. So we create contexts that accompany next. We're just gonna complete this first. So that will do that. We also want to make sure that we are resetting our inputs. And now when we preview this syllabus, yeah. Now to happy, we made this list companies. So to make sure it works and it is creating companies. Really good thing to do. Insert cells company, company name. There we go. Now. So we're going to put these inputs. I'm going to show up here. Stuff we've gone over before. Loading load loading, loading. Company one. Why didn't that work? Let's figure it out. So when I created this portion, I was talking, instead of actually adding in what the inputs are. So company name equals hippo, company names value, address equals input address value. Previously that didn't happen. So all I did here was do nothing. So I'll update this page and now we're actually gonna create something so company with one address. Why didn't the name pole there? Now? And we have another problem. So if I go here, I'm pulling companies, I didn't do my data source. See, this is why it's important to make sure we're doing all the parts. Let's do a search for companies, scrap companies. We don't need to do any filters at this point. So I'll do a preview. I'll refresh again. I have company one plus the blind companies should, where I originally it's pushing the button and creating nothing company. But you can see here that if you don't make these a forced field like you have to have them volt. You can create blank data in your database. You don't really want to do that. It's just going to waste entries. And if you have any users to do it, it's going to look really sketchy. But this is a test app or is building for fundamental so we can fix that easily to. So app Data outmoded my companies and look at these two blank ones. So just go ahead and delete those. And for and they're gone. Great. But I can see my company, one company to hear relevant data. Great. So I've got companies that I've added, okay, so I've created that these customers, these companies, I'm working with a list of their names that are gonna show up down here. But what about their contacts? So I'm actually gonna go ahead and I'm going to go with this. And I am going to over here, I'm going to grab the link and I'm gonna make it so blender. Like in a new tab, it's going to be the same as we did. Currents tells companies company name, but we now want to make it so we're sending data to another location, right? We want to say, OK, I click on this and then another tab is going to open up. That's going to have this Company in it. So I've got companies have an ability to open up and have companies in it. I need the page that they're gonna go to Sony to create a new page company card. So I'm going to call it. There we go. So now we have a company here. So any data I send here, I want to designate the Dhamma. Double-click on the main counterpart here. That'll pop up this where I can go and I can change the type of content that needs to be Company content. So when I click my CRM to my customer and I click on this, I wanted to send consoles company to it. You do internal page and that page will be Company card, non-U.S. company. All right, so we're gonna click this. It's going to send the data to that page, which is the company carbon. But I haven't, I think showing up here, so let's make it show our data starts showing up here. Let's grab the term Pages, company, company named, that'll make the company name show here. And let's grab the address. And you can do this for as many fields as you want with each individual company. I'm keeping this relatively short and relatively blind. Because if I show you how to build every Littlefield That's going to take you four hours just to learn how to build a company page when most of that time would just be doing this exact same thing over and over and over again for every field you might wanna track on a company. So address, Great. So now when I click that, it's gonna go here. Now, maybe on this, I want to add a contact, right? So I want to have this here. And then we will do another input other than blood that is. We will make that a numbers. Maybe we also want to track their position so great, so we can have a contact. So they suffered a little bit here. Button on the end there may be, and they're, well, one output here, great. Add contact. Great. So I have the ability then to make another thing, right? I'm gonna make a contact, but I'm gonna attach the two together and add this group right here just so I can track that it's working and can't add the type of content to after I create contexts. So this o12 here and we're gonna make a new thing. So once you make something called a contact that will have a few fields that will have the name. This text will have d, which will be text. And it will have, which will be a. Great. So name is put names value, we'll put roles value. Phone number is input phone numbers value. W content there. Input phone numbers value. Why are we doing that? Because I designated to ask to be as a number, so let's try and convert it to a number. Apologize, I made a mistake here. This is fine enough. This text. And then we'll make it phone numbers value. Why is it doing that? Input on number's value? Because of the way I made the field. Okay, good learning moment. So I made this field where I created company contacts. I'm having severe problem which is causing problems. Well, what I'm going to pause might be causing this to happen the first sorry about that. My Internet head a little bit of a problem. So for the sake of simplicity, I'm just going to delete that field and remake it, but I'll make it as text. That will make it simpler to do this workflow row quick, because really we're just trying to get relevant fields to show up. Phone numbers value. Great, good. Now it all works. Perfect. So now I'm going to create contacts, track their phone numbers enrolled so that I can show them down here, right? I can see this is this person and when this phone number with this role at the company, that I can log certain activities to it. But what I wanna do a search and do a search for companies, or sorry, It's a very key part. I forgot. When we create this contact, we have to attribute this contact to this company. To how are we going to do that? We're going to have to create a G id. And what this is gonna be, it's gonna be a text field and everything that you create in bubble and gets a unique ID. So we can use that. So if I scroll down, I can get to current page company. If I can get the current page company's unique ID. So what that means is this company that we have, that we're open and we're looking at pulling data from for this page, we're going to say, what is that open? What is that unique ID? Or and I use that to filter data now. So if I'm here again and I say search for companies, if I just searched for companies, I'm just gonna get listed companies, right? But I don't want companies want company contacts. So I take company contacts. I could say company unique ID equals current page's company's unique ID, then only the context created for this company will show up. Otherwise, I would be able to have a dozen different companies with at everytime I pulled just accompany contact, I would see all of them right. There has to be some way of filtering it in some way of designating. It will sort by names. I want to do something just because it's better, right? That's all we need to do there and try some text over again, or we're just gonna go quickly. Currents as company Con tags aim. Right now a TextField. Currents OLS company on tags, role principles company down on that phone number. C. Now, when I enter one n, it'll be attached to this company. It's called Salem. And I show you how that works. Crm gradient. Now, I have the two John bunnies we added earlier. Right? Click on it, it pops open over here, I have company one address that we put in. A different address. There is a second. So let's say we have John. We have the phone number five, and then add them. Great, John is here. Let's make sure that data doesn't show up in the company to look on me to John, stop there. Did get our correct now we didn't get it. I know what it's doing. It is because it is a global address and put it in S. And I did not type in a real address. A grabbed the closest actual addresses to it, and that's why that did that. So I get for using fake data. So when I add a new contact here, let's go. Perhaps the old age you work. There we go. So I have UP salesman, that's his phone number. Wonderful. And I can go to either one of these and I'm going to pop open that data. But what if I want to track everything I'm doing with them? Hunan track everything I'm doing on the company. So normally you'd see you'd go into a CRM. You have the company name relevant information, you have contexts, the ability to add context than down here somewhere. You have the ability to go in and see everything you've ever done with them. So let's do that. Back to here. You have our company card here. These contacts. Now we're gonna create something called Activities. And I slide this over x. I want to actually just for simplicity, make this a little bit figure and all the stuff I'm showing you here, these are really basic ways of doing everything. And the idea is that you're going to be able to take these and expand upon them, right? This isn't a publishable AB By the time it's done, it's something you can use for kind of concepts to grow your ideas into something. So if I take this and I want to say, all right, this is going to be logging and activity that to call or actually let's just change it to login activity B1 and just make it so we can do multiply two B's really easily. So great. I blog activity there. Now I need to go back and I need to make that section below it and then decide what that button does in a second. But first I wanna make a repeating group for my activities. Great. And now I will decide what activities are. So we're gonna login activity. We have to have a way of entering in what that data is going to be, right? So I click Log activity, it has to do something. And what I want to have log activity do is actually go to another page where we're gonna enter everything that has to do anything with that activity. And this is pretty typical inside of a CRM, so no need to clone it from anything. Great. So this page is going to be a company contact, right? So we will have the current page's companies contacts from rename. And then I also want to display the name of the company under it. So I know it's Joe at the building warehouse, right? I want to have this all there. So how am I gonna do that if all I have is Joe I don't have I have got Joe's info on the page. I don't have accompanies. Its really easy. I'm going to actually go do a search for a company where the uniqueID equals the current page, company contacts, company unique ID. That'll grab me one company, right? And what I'm gonna do is I'm just going to take their company name. So if I sign Joseph mentioned over and Joe works at the limbs cloud company, the Building Supply Company will show Breyer. Great. So I'm then going to create a drop-down. My dropdown, I want to have a series of choices. I'm going to have so called email in-person meeting. And then I want to have a date for this. So due date that this happened. And I just grab the Date and Time Picker from over here. And what I'm gonna do is actually I'm going to have the initial content be the date. So that won't need to initially be populated, but this one will have to fill out. I actually want to make it so input should not be empty. That way this has to be filled in. And then we wanna put in notes, so this note symbol. And then we will have it be logging activity. So now what we're gonna do is we're gonna make it so the data from the other page comes here, tells us the company name and contact and everything. Then we're going to have this activity short period. So what I wanna do is onclick log activity and I'm going to create an activity. So I don't have to create a new thing for this. So dad and things create a new thing type activity. We're tracking activities on these accounts. And I want to have something that we can do for that. So I want the company UniqueID. I want the sorry, the company contact. Anybody. So what I'm doing is I'm making it so that I can have this attributed to not only the individual contact at this company, I have it attributed to that company. And then I'm going to have in the type of activity which I'm going to get from that drop down. And then I also have it so that I'm going to have the notes from that activity that will get from there as well. So if we take a look at this, what are we going to take? We're going to take the person, we're going to take the company that are IDs so we can grab that data later if we ever have to. We're going to take the optionally put her, this is the type of call we are making, the type of interaction rate. We had an in-person meeting, we had an email me or call. We're going to take the date and time, which we have to add that field, and then we have notes. So if I go back to here and still get this right. But it's about right. Dave, activity. And that will be from the date picker's value. Notes will come from the multiline input o. What's the type of activity will come from dropdown a. And then we have our company contact unique id, which is the current page company contexts. Uniqueid. Now this part is the current page company contacts, company UniqueID that we created earlier. So be careful with our naming convention that one's really close in this example, I wouldn't recommend building a whole big app within that close that was an oversight on my particle is making things very clearly stated on your how you're tagging everything will make your job a whole lot easier in the future. So we have this activity that gets logged, right? We log that one activity, then what are we gonna do? We need to navigate back, right? So we want to navigate to the company card. And we want to send to a search. I'm gonna send a company back. Do a search for accompany their unique ID. Equals two. Companies contact the contact anybody grin. So what we're telling it to do here is go out, find companies that have this unique ID. And it's going to return a list. So we know there's only ever going to be one in our database. So we just had to tell it to take the first item. There's only going to be one, but the system needs us to tell it. Take the first item just in case somehow there were to put in there. Because technically inside a bubble that is a possibility if you build it wrong, that you can have two. So now, once we've added this, it should log the activity, navigate us back to the company card. You'll notice we have issues up here. At the issue up there is that we don't have any type of content. And that is for this. Or we need to go in and we need to have a list of this will be activities. And we have to have a data source which is going to be do search for activities and an activity that has the company unique ID that is equal to the current page of current based company unique ID that will filter this. So this would be every activity that cap and Atlas company. So there could be ten contacts here if you've taught each 11 time, it'll show up there by the time we're done with this. So what text in here? I want to know the current souls activities type of activity. And then I want the current sales activities, eight of activity. And then I want the current cell's activities. I can grab the creator if I wanted to. That's also data I could be grabbing and another way based on the user using m. But for now what we're gonna do is we're just going to say, here's the notes. Let's put the notes right here. Right? So we made a whole lot of changes really quickly, that kind of how this works. Let's go all with that to the beginning and take a look at how it kind of functions. So I created a company, circus, random astronauts. Perfect Circus. It's grabbing more random address from there. And wonderful. Now, what I wanna do here is additive person. So let's use Joe, Joe for the example. Random phone number, CEO, contact. So he's their blog activity. I love additivity button doesn't do anything, right? So we built out everything for it to work except for making that button work. So let's go to our company card blog activity. What do we do in here? We need to have this navigate where it will go to the login activity and it will send consoles company contact. Perfect. Now, if I go back here, let's refresh this stele on Circus. It's Joe, Joe, Joe. And now I've Joe Joe who works it circus. I'm going to log it, call it. M going to say it happened yesterday. Adage didn't log to tell today. Joe Joe call Hopefully this takes me back. We circuits. Great. And you can see I logged that yesterday. I talked to Joe. So it's kind of a really simplified version of a CRM and how you can make that Polo together really well. Ideally, you want to also add in a sidebar something here. Hop around a little easier because right now we're stuck here. What I had it set up for is you click here, it opens a company. If you knew everything and accompany over here, then go back. But it's really smart to build different navigations. That's building a simple CRM. We can also look at adding in sales to this. And now we would attribute sales to a specific customer that's very similar to an activity. It's just creating different drop-downs and stuff. And if you wanted to run a report on it, you just run something similar to what we looked at reporting in the other section that just pulls a tally based on that. So. 6. Displaying data in a chart bubble: So welcome to this little quick video on how to use bubble. We're going to create a chart right here that is going to take a thing and we're going to allow it to organize that thing into a chart. We're also going to group things in it so that we have, is actually counting things. So when I push the Save button, what it's doing right now is it takes firstName, lastName, email. This is a drop-down for location. This is a drop-down per year. This is a image we can add. So I'll show you that real quick. Let me location to 20-20. Firstname. I can push Save. I can filter this down here. I have this set to just pull up people in location two. But I don't have my chart up here. I'd like a chart that I can filter by year and I can see how many people I have assigned to each location per year, right? But we need to build them. And then I also need to make this chart that I want to have filterable by year, filterable by here, right? So how am I going to do that? I'm going to take a look here and I want a borrow line chart. I wanna do a bar chart myself because I just, I prefer bar charts. You'd also have to do this with a pie chart will work the same way. It arguably doesn't look good OR isn't as useful information because you're just kinda showing the percentage of the whole that one. But for this example, let's do a bar chart to undo that, use click install more here. And you can do a chart. When you do that, it'll pull up the ability for you to just scroll down here and grab the chart element I like using the elements that are made by bubble. So if you look, you're going to work better because they're built by Bubble who made the whole ball system, right? So I already had the added if you don't have it and you're trying to do this added, you just have to click the Install button on it. So that'll pop up over here. And then you can just click there and then draw where you want it. So I want to hear, but it doesn't do anything, right? So it just knows this. It thinks I wanna line, I'd actually rather have a br. The type of data. These are creating something called a new client. So I'm gonna click on new client. And then for my data source is where we're going to do some of the arranging, right? So I want to be able to look at how many people came into each location or how many new clients, or have the same location attribute within each year. Okay? So I click on this. Oops, sorry. I accidentally created a search box. Did not want to do that. Then. So that's why you don't just wave your mouse around and accidentally click on stuff. So I click on Data Source and I'm going to do a search. I'm gonna do a search for new clients. And I am going to group them. Click here, I'm going to do by at a new grouping location. Exact aggregation, we are going to count. We're going to count, so to says is we are going to count the number of locations. That all have exactly the same name, right? So if I have a location that is titled France, it will find every location total France. And that is if the capitalization is exactly the same in each one, right? So if it's capital F, lowercase f, it will count them separately. But because this is all from dropdowns, I know they'll all be the same. So it's kind of a quality control on my end. So I click there eight group stuff, right? So then my current point, click here, I'm going to do it. My current point will be the count permit. So I am counting the number of these and I want to express that as my value, right? So how many of them are there? And then I also have my label expression which we just bottom borrowers has January. I wanted to have my location, right, so that'll give me the location name. So I already have some data in here. Let's take a look. And this is just returning all of the data that's bantered. It doesn't care at all about here, right? It doesn't care if I adjust this, but ideally I'd like to have this do something, right, but just to show how this works, let's do location three nouns do location one will be equation one bigger. Let's do 2001. I don't want to upload an image right now, but I can't. So that basically just increased it by one. Right. So now it's at nine elbow like about bubble too, is that it will real-time update, right? So I don't have to refresh pages and stuff. Great. So we were entering data, we're showing the data how it want. But we're adding all over years together so we can really just see how many we've ever done, but we can't really see how many were doing year-over-year, Right. So I can't look at 20-20 and compared to 2021. So let's take a look at how to do that. So if I go back here, this is really easy to do too. So when I'm doing this search, I could add a constraint and I can constrain that by the year. And I can make the year equal to one of my dropdowns, right? So I can make that equal to whatever this drop-down is. I have to drop downs that are 20-20. So I wanna make sure that I might believe this one will be it. So I wanna make sure I grab this prompt down for this value. And it's that simple to filter it, right? So shunted bright tax above that one. Perfect. So now when I click preview, 202020212022. But it's, it's that simple, right? And now it's just displaying the data the way I want it. I can look at my data down here, who's in these boxes? This is just overall data. I don't have this section filtered by year, but I do have this section filter by year. So that's kind of a quick little example of how you can use the chart function. I can also take that two and I can go back in and say I want to just change that from a bar on your training set into a radar. It's gonna do essentially the same thing. Right? Not a useful graph for this recommendation riveted representation, but a pretty simple way to be able to just alter things, change things. Kind of take a quick minute to play with and see how things look for you when you want to organize stuff. And it's really that simple. Just to change things and take a look. So you can play with things and make sure that they are the way you want them to be. And it's all pretty simple, easy-to-use dynamic data. Right? So I'm going to be uploading a more little tips and tricks and stuff here that have to do a bubble as I build my own apps and prepare to launch stuff. This is, this is really fun for me. I like making stuff like this. I had a hard time finding something like this online when I first started working with bubble and thankfully ran into someone who is kind enough to show me how to do it. So change that back to bars. That's how I want it to be. And I, we'll be posting more of these videos kind of as I think of little tips and tricks and things. Or if you have anything that you think a video on, it would be really cool to have, let me know anything you are having trouble finding. Because like I said, even just creating this little how-to on sending data to these kinda the way I wanted to. I had some trouble with that. So hopefully this was helpful. Thank you for giving it a watch. 7. How to Create a Sign up and login page: Hi. In this lesson we're going to talk about how to create a sign-up page. So this would be a page on your website where someone goes and I'm going to log in or sorry. So once you sign up and there'll be able to use login page after this so or looking at creating that sign-up page. And we're going to look at creating a log-in page as well. So all I did was I went to create a new page. I created a new page, and I made a sign-up page. So if I click on input or here, I'll need to do is click it turns blue. That means that's what I'm about to put where this little cross hair is. Let's do one click. Boom. It gives me an input. I can also click on that and I can make, by the long impo are big and plot and make a huge if i want to, or small. Also adjust the size after I have laid it out. But for now, I just need three of these. I need the information that I wanted to put in, which for someone to sign up as a username, which I want to put a placeholder in here. So click on your top one here. Let's put three out here first. Alright, so let's have three, line them all up. Well three boxes, so I'll say type here. So if I click here, I want to put in a placeholder which he so saint type here I want it to say email. The one below it. Password and confirm password. Now, F we have these n, we want to say, what else do we want to do? As a company? You know, like what it boils down to. We want to gather from people when they come in. So maybe I want to also gather firstName. Lastname. Maybe I want a drop down in here as well. Okay. So let's take this. Do you didn't do lastname, You can do addresses, you can rather phone numbers, anything you wanna gather, you can gather these. And what I did here was I grabbed them all to the drop down below it on that same input form is clicked on up. I clipped out here. That gave me the ability to do a dropdown. And while I do the drop down is because in later lessons we're going to look at dictating what happens to users based on their role. So what I wanna do is I want to actually start building my future functionality and now, so that I have that all ready to go. So I want to click here and then I want to just list off my user roles. And I'm going to have, I could create dynamic choices. Or what I would do is I would have people able to actually make their own roles. But for this scenario, we're just going to build our own roles because it's a little bit simpler on our end for the initial built. So let's do this. Could be admin, This could be user bright like giver roles that can be little different levels of admins have different view ability. Not nothing we put in here really does anything yet. So, for instance, rule one, rule to rule three, that doesn't actually dictate anything. We haven't built anything into the system, but these are data point we want to log on a new user when they sign up. And that we need to add a button. And then we wanna click start an edit flow rate. Clear to add an action account. So either user up. Very easy. So all we did there was we got to click sign up and we collect the onStart and edit will flow. At an action to that button is clicked. Sign user up to things we absolutely have to have. We need a email which is input email volume, required, password confirmation. You always want to check that because so we'd better than due to password habits only put your password in twice space. Sure, it's right in password value. So what I'm doing here is I want to grab the right box. So confirmation would be input confirmed passwords, its value, and I did the same thing on the top two input passwords value, input, emails value, right? And then we're done with that. So we also want to then figure out what are we gonna do after that, right? So this is the basic user. This is all Bubble requires to have a user bubbles and care what other data you have as long as it has an email and password, they can have users. So I'm gonna click change our field. Because I have multiple fields. I'm going to have on users. Now, if I click here, I can create a new field for a user because right now our users don't have extra fields. So I would want to add firstName. And this would be a text field. And we'll just continue to do that kind of down the line here. Last name, another text field. Then what else do we have on here? We have first name, last name, we need to put it in our role. So I go back to here, I need to add in the role. So I'll put this, I will click create new field allows me to make finding feels. Every time I'll click, I'll type in user goal. Now, I'm doing it this way because it's the simplest way to do it. I'm just adding them here all at once. That way I can also click what my influence are. So firstName would be input first names, value this and take whatever we put in that box is going to enter in here in the database. User role be dropped on a, we didn't rename that dropdown. And because we didn't rename that dropdown, it comes up as drop-down. Hey, if we had a dozen of these adult a, B, C, D, and so on, all the way under 12. So set dropdowns value is our user role. All right, so now if we preview this, I can go and sign up. I can go and I could pick and I can sign this person up. Right. Copy that's like used are analog in nature in just a second. And that will create in my database a user with that role. After clicking sign up, they didn't all go away and do it and we'd tell it to do anything, right? So it logged that data, but they didn't do anything with that data. So. We now need to make it do something with that data when he didn't have a place to go in to have a 10k, right? So what does our app gonna do? What page are we going to land on? And how are we going to utilize all of this data? What are we gonna do with row one will lead to a login page. So let's click on Create New Page. And we'll click Login page. Hello book, create. Now for our login page, we're gonna repeat the same process. We're gonna do input. Input. My two, right? We need our email. We need are. Then we need a button, which is simple and close button, but not here. And we'll just name that login. That wanted a tablet. This login does. So with a sort of edit workflow. Drain out the button, doesn't do anything says login, but it doesn't actually log people. And so we go to account logged user. And it needs to know the input email is the email and needs to know the input password. Is the passwords. Great, simple enough. So if I go to here, I could open this page and I could login, but doesn't have anywhere to send me right. Because right now it would just log me in and it would keep me at this page in logs, man, it doesn't do anything else, so we need pages to send people to. I'm just going to go in and I'm going to do navigation. I'm gonna say Go to page, I'm going to send it to the index, which is the initial page that bubble created for me, is supposed to be that the main page of a website where if you put in fake.com, fake.com would be the index page. So I'm just gonna have it shoot over the index page, which I'll show you right now. Contacts is this page here, and that's the one bubble creates when you just create a new bubble page. So let's go to the page. And I have to go to the page. My person will be logged in. Sorry, worry about that. Security examiners have extra security and turn on my computer and on the page moved here. Right. So now I have the ability to just log people and send them to whatever page I want. And that is how they will see it. So, alright, how Mao had anything on those pages. But in future lessons, you'll learn how to make stuff for those pages. And we're going to learn to use for the role to dictate what people are seeing or even what page people are going to be sent to. So to put that into context here, it says this page, right? But I can add parameters only when current users roll is. And then I can put in a roll here. So I could create it so that only when someone is enroll wine, do they go to page a. If they're enrolled B, roll to the Euro, page B, if they're both free and they go to page C, You know, it's an interesting way to do things just because you're gonna be able to send people to different pages, dictate different roles and everyone's using only what they need inside the program. But we'll learn more about that later. 8. User restrictions based on role: Hi. In this lesson we're going to take a look at what we can do to limit access based on a user's role. So this is useful. For example, if you have users, it will be admins and users that will just be going and MED entering data. You don't want them to have access to settings. So previously, when we added the ability to make a user, we made it so you could designate different roles. Or that Patrul Corcyra, her sign-up page that we built, right? So this is, you can make difficult. So roll-on, ball to row three, okay? So we're going to use that. And we are going to say, Let's designate what they can do. So as an example, we're gonna take a look at the sidebar here. And we have that put onto our send data to page here and my example. And what we're gonna do is we're gonna make it. So we added this element. You are able to only see if you're in row one, you'll only be able to see Enter Data Dashboard model, UMC settings. So we don't want people enroll one tab access to settings. Now, when I open this up, I had to turn on the Show button because I had already. So I'm going to show you how that works and why it doesn't automatically show up. So I click here, I can do element is visible on page load. If I check that, no matter what, it will show up, see how dropped out of this tree here where it is hidden, shows everything is visible. Same thing here. That's how it's automatically going to be created. Dao Ce setting is one that I don't want to show up on a certain role on. I can click here. At element is visible on page load. Now, when I go into preview, this page, as a sidebar reason for navigation, that's gone. You'd like geared up an happens, right? Great. So let's go back here. Why is that happening? Mlk, we made it so it doesn't show visibly, but we know it's there. So we can do, We'll just go here and it's called a simple elementary. Only show, hide them all. To make you show up again, you are doing to the sidebar. That's my mistake there. Alright, so edit your sidebar, then it will be able to show up in here. I'll click on Settings. Great, so now said I'm shows up when Oracle multiple parts, it's really easy to forget that maybe you have a sidebar if you, until you're used to having on every single page. Because the majority of this application, we haven't included a sidebar. I forgot a little bit. But clicking on Settings here, visible on page load. No. Great. How we make that visible for the people we want to see it. So maybe we're gonna go and we're gonna click on, I'll start at the beginning here. Click on settings. And we're going to go to conditional picture. It's not visible on-page load, so this is not checked visible on page load, not check conditional. We want to define a new condition and should we turn that on? A lot of times I'll make a condition and then I'll go back and realize actually turned the condition on when I got to test. So it's always good practice turned to condition on. So when you're testing at, you know, you're on. Now this button here, right? So this button is visible. Grain. But wait, sorry. When this was, we'll suppose there's a little we want to happen, not what we're saying. When's right. So when this happens, something else is going to happen, right? So right now we're at the beginning of that statement. So when something happens, so when something happens, when the current user, which is made the person logged in, user role is, and then we can just type out, well, wow, right? So this is just establishing its kinda say hey, what's the role of the person? Is it roll one gram? Such a property change element is visible. We put a checkmark there, say it is visible. Now, I'm gonna go back to send data to page. I am going to go to my data and I am going to make sure I have data click all users. Previously I made this role and Nate, somebody logged in with it. So what I can do is I can click run as this will log in as this user in that role. Whether that's going to help me do is establish settings does show up. Now what if I want to test it against that work? I want to make sure it doesn't show up for somebody enrolled to. While I'm gonna go back, I'm going to go to the sign up page. I'll preview that real quick. I'm gonna assign somebody out to sign up. Oh, great. Now I want to go data real quick just for testing purposes. To update. There we go. I have someone with val2 and I'm going to go to my Sunday editor page. Then I'll go into my data. And I am going to run as my abuser enrolled two and doesn't show up. I click here, nothing happens. That isn't really quick example of how that works. You can use that for a lot of different parts inside of your program.