Using Multiple Select Fields with Flask-WTF and Flask-SQLAlchemy

hey everyone in today's video I'm going to show you how to work with multiple selects in your flask app that use WT forms in SQL Alchemy so what I mean here is all this stuff comes from the database so I have five children in the database and basically you can select any ones that you want so I can do trial one two and three hit submit and it will basically save this to the database for me and also pre-populate these things when I come back and I have multiple I call them parents in this case that have a different children associations so for example this parent here has all five selected whereas the first one only has the first three and I can change that to be just four for the first one and then we see it's pre-selected so that's the idea also I have it to where I can have check boxes as well and I'll show you how to do this in a code it's pretty simple and if you want to use check boxes instead of the default uh select you can so this video is going to cover like a really basic case and I think it's enough to get you started but if you have any further questions on this and you want my help directly I do have a coaching program you can go to pretty printed.com coaching or you can just click on the link in the description below and there if you want to work with me one-on-one you can there's a link to fill out a form and I can contact you we can have a call and I can help you with any code that you have issues with so not just SQL Alchemy not just WT form so anything related to flask or python or anything programming related I can probably help you with so if you need help just look into my coaching program and I'd be happy to help you one-on-one so let's get into actually writing the code to do all the stuff that I've demonstrated here okay so let me show you what I'm starting with here I have this flask app I have a couple of models to find I have an association table a form and then the rest of the stuff so I'll start at the top I have two models called parent and child it should be obvious what those mean in the context of this example I wanted a very generic name so it's very easy to keep track of what's going on so we have parents and children and then we also have this Association table that connects the parents and children so one parent can have multiple children and each child can belong to multiple parents in this particular example and then I have a form here so there's nothing in the form yet and this is where I'm going to put the field for my form but for now it just has pass and then I Define this route here I instantiate the form pass it to the template and then inside of the template here I have some styling and I just have the token and Visually it looks like this there's a button but there's no actual field so this is what I'm starting with so the first thing to do is I want to add a field onto my form and this build would hold all the choices for the multiple selection options and to do that I'm going to import from WT forms underscore Alchemy and I'm going to import something called query select multiple field right so for this you have to install WT forms Alchemy just like this I already have it installed so there's nothing to do but this is an extension to WD forms that you have to install when you want to kind of connect it with SQL Alchemy so I have that done now inside of my form what I can do is I can actually add the field so I can call this let's say choices choices equals this query select multiple field and then I'll just pass the name choices here and then inside of my route here what I want to do is on this form on the choices I want to pass an actual SQL Alchemy query so I can do this I can do form dot choices so that's the field I just defined on choices I have this attribute called query and this is going to be equal to child.query.all right so it's going to take all the children I have in the database put them on the query for the choices and then WT forms is going to generate the list of choices so let me show you what's in my database let me just open up SQL I3 so I have two tables parent and child that I want to show you so parent has three parents so parent one two and three and then child has five children one two three four five and then the parents child table has nothing in it at the moment and of course as I save things you'll see some things in the database so what I can do is I can save this and I can start my app and it's this simple to get the choices to appear so right here nothing appears but when I refresh nothing still appears because I need to add it in the template so let me just go ahead and do that form.choices and now if I go back and refresh we see I have the five children here so one two three four five so we see it has like child one child two child three if I change the name here so if I go to child uh one way I can do this is I can use the dunder stir and I can return something like self.name and then it will remove those angle brackets that you see here so I can do this and now we see it just has like the name there so that's where this display value is coming from it's using the dunder name there so now what I want to do in my code is I want to see what this looks like when I actually save something so what I can do inside of my route here is I can have an if block and I can say if form dot validate on submit so this is typical WT form stuff I can just print form that choices that data right so I want to see what gets passed uh as the data when I select something so I'm going to use control to select let's say child one child two or child one child three and child four I'll hit submit we see method not allowed that's pretty easy to fix let me just go ahead and add that so posts and also gits and I'll load the page again I'll select one three and four or one three and five hit submit and now we see here in my terminal I see these actual objects so you know these are SQL Alchemy objects when it has the little angle brackets around them so I see child one child three and child five and if I were to look at them more directly so let's see the first one and then do dot ID for example I can do that so I'll just hit submit again and we see one is the ID if I were to change the zero to like two it would give me the last ID which I think is five here so yeah five is the ID so what you get in return from this is a list of objects a list of SQL Alchemy objects and this is really important because that goes into the next step of actually saving it to the database so the way to save this is what I can do is I can first query for a parent so for now we'll just put all these on the first parent so I can do parent.quarita first which will give me parent one and then what I want to do is I want to First erase all the existing relationships and the reason why I'm erasing everything is because I want to completely overwrite anything that was there so if in a previous case where I saved it was storing like child one on the parent I want to delete that first and then I want to save all the ones there so if child one is there again it will save child one along with any others that I add so to clear out everything first you do parent.choices.clear so that will basically remove everything from the parent it would disassociate the children from the parent and then what I want to do is I want to add everything back that will select it so I can do parent dot choices dot extend and the reason why I'm using extend here is because choices because it's a relationship on a mini to mini and SQL Alchemy it behaves sort of like a list and with lists you have things like a pin and extend with extend you can basically pass another list and add everything from that list onto the current list right so I want to take form.choices.data which is a list of objects and extend choices which is supposed to be a list of objects so this is obviously empty because I just cleared it before but this is a syntax so I don't have to like Loop over each choice I can just extend it directly and because this behaves somewhat like a form it's going to work and of course I need to commit everything so db.session.commit and just like that so now let me go ahead and try submitting this and it fails because there's no choices and that's simple I use the wrong name I use choices instead of children so let me just update this to be children but the idea is still the same so I'm extending the children on the parents and now let me go back and select let's say one two and four hit submit it saves I'll stop the app and go into the database so select star from parents child and this needs to be from and we see there are three in the database here so one one one two and one four so these three things represent the three things that I selected in the list here so it's pretty easy to add them to the database you see it's really only one line of code that's doing most of the work but before you just have to clear out all the children on the parent and then you have to save it of course so if I want these to appear when I first load the page let me start the app again you see none of them are selected right so none of them are selected what I want to do is I want to have the ones that are in the database be pre-selected for me so you can imagine like an edit page that will already have the choices there selected for you I can do that here so the first step is to move the parent query up into the section above so it applies to both cases both the posts and the git and really it should go above the form and then inside of the form where you where you instantiate you would just pass a dictionary and this should be data equals this dictionary and the keys and the values will be the name of the fields so the keys are the name of the fields and the values would be the actual selected values so the selected values in my case are all the children on a particular parent but because this is a query select multiple field from the WT forms Alchemy extension I can simply pass parent.children right because I already have this relationship defined on the parent right so this is going to be a list of the children and simply going to pass it to choices here and choices is just the name of the field so now I can save this and then I can load the page again and now you see when it loads it already has one two and four selected I can deselect everything and select let's say three and five hit submit and now when I reload the page three and five are already selected and I can also do this for any individual parent so let me modify the code for that so what I can do is I can do parent ID here and then parent ID and then the query is just uh instead of looking for the first one I can do filter by or even I can do git so git and then parent ID right so it will only be looking at one parent so before everything was on parent one so parent one has three and five selected but if I go to parent two so id2 nothing selected I'll select one two and three for a parent two and the form just needs to be updated because the action is pointing to the main one so now it's going to use the same URL so let me just go back and do that so parent one is still fine parent two I'll select trial one two and three hit submit and now on the parent two page I see uh one two and three are pre-selected but if I go to parent one three and five are selected and then if I go to parent three none are selected because I didn't select any but I'll select all five hit submit now when I reload the page all three are selected for number three and then of course number two has one two and three and number one has three and five okay so the last thing I want to show you is how to use check boxes so that's pretty straightforward uh what I can do here is before I use this field I can actually create a new field that uses that as a base so I can call this query select multiple filled with check boxes so with check boxes and then it inherits from the original from WT forms Alchemy and then I need to set two things I need to set a widget so the widget will be widgets dot list widget and this widget needs to come from WT forms so I can say from WT forms import widgets and then go back down here so widgets dot list widget and then you can have a prefix so the prefix either appears uh before the text or you can set this up false so it appears after so I'm setting this to false because it looks better with the text to the right of the actual checkbox if I put this to true then it'd be like the text and then the check box and then you also want the options widget so option underscore widget is widgets dot check box input just like this and now this should actually be prefix label instead of just prefix and now that works and now I can update my form to use this as a field instead of the original so let me just copy that and put it in there and now when I refresh the page we see I have check boxes instead of the default select list and if I go through each one we see the check boxes are pre-selected because everything else is working the same it's just I'm changing visually how it works and with this you can always change the styling you can change the label to be true so let me just show you that and it kind of moves everything over like I said it looks kind of weird with check boxes but if you wanted it to be like that you could but I'll leave this as false um but everything Beyond this point is just like CSS styling so if you want the the dots to go away you can just remove that in the Styles and get it to work in the way that you want it to work so that's everything that I wanted to show you in this video um if you have any questions about how any of this works feel free to leave a comment down below like I said if you need help with anything like this directly just look at my coaching program I can help you there um if you like this video please give me a thumbs up and if you have subscribed to my channel already please subscribe so thank you for watching and I will talk to you next time

Channel: Pretty Printed

Views: 7,206

Keywords: flask-wtf, wtforms, flask-sqlalchemy, multi select, multiple select, queryselectmultiplefield

Id: d0jR-2UB9Y0

Length: 15min 13sec (913 seconds)

Published: Sat Feb 11 2023