Add a person form by adding the inputs with the help of a class and then add a tap/click event to go to the people list view.
- [Instructor] Okay so now that we have our input module ready, let's get coding our inputs. So the first thing you want to do is copy some of the codes we already did. So let's go into our people list and copy the class that we've created in the people list. Because what we're going to do now is create a class from another class. So the input module we just required here has classes inside of it. So we'll leverage one of the class and create our own and this will be the input.
Alright, so let's go ahead and paste, and we'll call this My Input. You can call this anything you want. And then it will extend input module.input with a capital I. After that in terms of the options, we'll create a few. So if you're wondering what other options you can do with the input module, go and take a look at the website that we had earlier. So one of them that we'll use is called Virtual Keyboard.
This allows us to use the image of the keyboard to kind of simulate a keyboard. So we'll put that at true. The width I'm going to do 666, the height we're going to do 79, then the x: we'll do 44. We'll do a place holder, so this particular class accepts a placeholder, and we'll call it Text.
And we'll be able to change those specific options when we use the class and create the instances of that class. Placeholder color, (typing) so this is the color of the text in your placeholder. So we'll do C8 C7 CD. The parent is add people. Then let's do background color, and let's do transparent for that one.
And then the font size at 40, let's remove the image. There's no image. Okay so we just created our class, now we can use it to create all of our inputs. And one thing you can do, if you want to take a look at where your inputs are, you can put a background color as opposed to transparent, you could do red. While we insert our inputs into our phone, you'll see exactly where they're positioned. So let's do red for now then we can make it transparent on the class and it'll change the color for all of them.
So let's create our first one. So first name, new my input and then do specifically a placeholder of first name. (typing) Like so. And then the y: will put it at 170. So if you take a look at our form here, every 90 pixels should fit exactly where the line is.
So now all we need to do is copy and paste this particular line, and then just do last name. (typing) Make sure you change the placeholder. And if you feel you got this, then pause the video, go ahead and code it all and then challenge yourself to see if you would get it right. Copy, paste, this time it's the phone.
(typing) Like so, and then make sure you do 90 pixels more. And then you go through the same for all the inputs. And once you're done then you can remove the red and do transparent. Like so. And you'll have your inputs all at the right place. So if you click on one, you can actually start typing and so on and so forth. So what I'm going to do, and this is what we're going to do for the rest of this video, I'll skip to the end of what we need to do, and let you complete this file.
Everyone has access to the exercise files anyways, so if you see that there's something wrong or if you're not sure, then what I would recommend is take a look at the exercise files, but I'm pretty sure you'll get it, okay? So let's add the last thing that we need on that form and then I'll complete this like you will on my own. So the last thing you need to do is if you take a look at the form, we have a button. So once we click on that button, we need to go somewhere.
We need to do something to simulate as if we just added a new contact into our CRM. So what we'll do to simulate that, we'll get back to our peoples list. So let's go see add form button. So we need to do something with that particular button. So add form button, on tap, like we've done in a previous video, do whatever we put under. So we'll use flow, show next, and then bring ourselves back to that people list layer.
So we can test that right away. Save, go to add, let's simulate if I can type my name. Yes, I can. Alright, so I'm done. And then click add a new person, and we're back to our peoples list. Nice. So now we're able to add text to our prototype and simulate the action of saving our new person.
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function