Working with widgets

- [Instructor] In our last video, we talked about how we could customize forms, and I'm going to show you how we can customize even further with something called widgets. So to start here, let's say when someone's ordering a pizza, we think this little text box here is not enough space for them to talk about, you know, what it is they want on each particular topping. So we can go ahead and move over to our code and just for the time being, let's go ahead and comment out our pizza form class that we created, that is a model form. So we'll comment out this one. And now, we're going to bring back our one that we had created more sort of piece by piece here. Remember, this is imported from forms.form. And what we're going to do here is with topping one we're going to, you know, keep its label to say topping one, we still want max length to be 100 but we're going to add something new on the end here. We're going to say widget is equal to and we're going to say lower case forms, dot, and then we want to do capital Text Area. And if we go ahead and save this. Let's go back to our order page, reload, and look at this, we have a huge box where people can enter in toppings. Now we've still max amount to say hey guess what, you can't go anything longer than 100 here, but if you want to provide some more space through the use of widgets, you can accomplish that. To show you another widget that you could use, let's go ahead and move back here to our forms. Rather than a text area, let's go ahead and change this to capital Password and then we want to say capital Input on that. Input, we'll go ahead and save this, go back to our same order page. Now when we reload it looks like a normal text box. But look at this, when I type out cheese, well it's totally a secret we don't get the automatic popup showing up down below and we can't see what's the specific characters are. So for some reason someone wants to hide their toppings. You can do that via this password input. And that's not the only thing that we can change via widgets. Let's go ahead and move back. I'll show you one other cool widget that we can add here. So let's go ahead and just get rid of both topping one and topping two and say how cool would it be if we could just have a list of toppings and let the user pick which ones that they would like? So we're going to go ahead and add a new field here. We're going to say toppings with an S. And this is only going to be it. We're not going to have toppings one or two, just this right here. And we're going to say toppings is equal to forms dot and we want to do capital Multiple Choice Fields, kay? Now with this multiple choice field well, we want just field, no S there. Inside of here we're going to specify what our choices are going to be. So we'll say choices is equal to. And this is going to be a list of tuples. So the first tuple here specify that with the parenthesis will have the value of pep but it should be displayed as and we'll do a comma here should be displayed as pepperoni. Awesome, let's go ahead and add another tuple here. So for this one we'll have lower case cheese comma. The display version of this should be capital Cheese. We'll add one last and final tuple here. This is going to be four lower case olives. I'll do a comma. And then provide capital Olives at the end there. So we'll go ahead and save here. Go back to our order form. If we reload now. Well look at this, we've got something interesting here. We've got our different toppings that we can pick. And you can actually select multiple if you hold down the command key on your keyboard you can pick and unpick multiple options here. But now this is pretty foreign I think to most people. If they saw this in a form they would not know that they can select multiple things. It really wouldn't look all that great. But widgets can make it very easy for us if we go back. After we've specified our choices we'll say comma. We'd now like to add a widget equal to. And for our widget we're going to say forms dot and then we want capital Checkbox select. And then we want multiple. Okay so the idea here with this is we're going to change this now to be a multiple choice box which should be much more friendly to our users. So if we go back, we'll reload our page here. And look at that we've got all of our toppings here and the user this looks much more familiar, right? You can say oh, I'd like pepperoni and cheese. I'm not really into olives. Medium, bam. We can go ahead and order our pizza. Now we can't just straight up order the pizza. The way that we've written our code we've pretty fundamentally changed the way toppings works, right, there's no more toppings one and two. So this isn't going to work for us. But with this in place let's go ahead and move back to this page. Let's undo this till we get back to our toppings one and two. Hopefully you enjoyed learning about the different type of widgets and this is just the tip of the iceberg. There's so many different widgets that you can add. Let's go ahead and get rid of our password. Our toppings should not be hidden from us. We'll go ahead and save that and reload. Look at that, we're back to normal here.