Solving Problems with Django Forms

Video in TIB AV-Portal: Solving Problems with Django Forms

Formal Metadata

Solving Problems with Django Forms
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
We'll look at a few core problems that we were able to solve with Django forms. Dynamic Field Creation: What if you don't know what fields should be present on a Django form until runtime?. Solutions: Viewing a form's fields as a data structure (convert a field definition to a dictionary) Manipulate self.fields on a form to dynamically add / remove forms from a field. Pitfalls: A fields validated attributes can't be manipulated dynamically because of Validators within the forms API. Dynamic form layouts become difficult to manage, crispyforms does not scale as a solution! Validate a form via an API: How can external validations behave the same as internal errors? Solutions: form.clean() can be used for form wide errors, and form.add error can be used to integrate those external validation errors into your existing form so that calls like is valid() still work as expected with your external validations. Adding fields at runtime: How can the user add fields to a form after it has been rendered? Solutions: Javascript can be used for the UI, and if the fields are properly named, the same validations will work as long as the fields are part of the form. Pitfalls: Creating a solution that creates a dynamic field that is validated, but doesn't render can cause issues with your layout solution (crispyforms fails again here)
Computer animation
Filter <Stochastik> Trail Dynamical system Context awareness Presentation of a group Multiplication sign Set (mathematics) Water vapor Mereology Data dictionary Rule of inference Element (mathematics) Force Term (mathematics) Symbolic dynamics Operator (mathematics) Core dump Electric field Integer Data structure Social class Condition number Multiplication Arm Scaling (geometry) Validity (statistics) Information Gender Fitness function Parallel port Maxima and minima Perturbation theory P (complexity) Cartesian coordinate system Variable (mathematics) Performance appraisal Field (agriculture) Computer animation Logic Network topology Volumenvisualisierung Right angle Object (grammar) Quicksort Abstraction
Web page Trail Context awareness Functional (mathematics) Run time (program lifecycle phase) Service (economics) Euler angles Mereology Rule of inference Template (C++) Formal language Element (mathematics) Subset Latent heat Bit rate Causality Hypermedia Computer configuration Oval Symbolic dynamics String (computer science) Electric field Integer Data structure Error message Address space Social class Area Module (mathematics) Addition Multiplication Arm Validity (statistics) Gender Electronic mailing list 3 (number) Cartesian coordinate system System call Vector potential Web application Field (agriculture) Computer animation Personal digital assistant Volumenvisualisierung output Right angle Object (grammar)
Web page Point (geometry) Implementation State of matter Connectivity (graph theory) Decision theory Drop (liquid) Mereology Data dictionary Regular graph Template (C++) Mathematics Programmschleife Symbolic dynamics Single-precision floating-point format Electric field Software framework Data structure Computer architecture Validity (statistics) Gender Forcing (mathematics) Content (media) Electronic mailing list Mathematical analysis Data storage device Bit Cartesian coordinate system Process (computing) Field (agriculture) Computer animation Volumenvisualisierung Right angle Quicksort
Complex (psychology) State of matter INTEGRAL Multiplication sign Mereology Subset Front and back ends Mathematics Information security Error message Area Covering space Scripting language Constructor (object-oriented programming) Instance (computer science) Type theory Message passing Field (agriculture) Order (biology) Volumenvisualisierung Right angle Quicksort Resultant Point (geometry) Web page Server (computing) Service (economics) Open source Connectivity (graph theory) Motion capture Number Element (mathematics) Latent heat Causality Electric field Data structure Addition Matching (graph theory) Validity (statistics) Cellular automaton Projective plane Content (media) Mathematical analysis Plastikkarte Cross-site scripting Performance appraisal Human migration Word Personal digital assistant Pressure Library (computing)
Computer animation
thought of and and the end of the I so before I get started
this to raise fares are how many people have heard over worked with crispy forms of it so there's a lot of people on I would like to see how many people in the upset at me if I like say things about this performance for it so I could just to introduce
myself i'm curtains on animus operation a dual track of and at the track we work a lot jingle forms on we have a lot of situations were really need a really complicated data entry on a lot of dynamic validations and dynamic forms OK I get into what I mean by dynamic forms of but the this talk comes from a lot of what we've been building a dealer tractable we've learned in terms of how to kind of use jingle forms to extend its capabilities to the dynamic but before I go into the problems that we actually solve I wanna come back and talk about what jingle forms actually is and uh this is kind of parallel to it's an agenda documentation on but basically like Jano forms offers you abstractions over 3 kind of core things right so you get an attraction over the structuring of the form which tells you like what fields are gonna be on the form when you write your form class II defines class variables that are objects that are your fits so the structure of the form is basically that like what fields are going to be with and then there's the the rendering of a form which is like Django takes care of actually creating the HTML elements that users need actually put data into of and so didn't expect that for you there's a template tags or to do is use the form tag on it renders the 4 so again forms gives you function on that and the last part is validating and processing the data and that is where if you define a set of rules for when the data that the user enters is going to accept so you have your the basic doing evaluations that you get from like validators that these are things agenda applicant create a like an integer feels that capture like in our data and a set of maximum value I get this kind evaluations that have more complicated validations you can write on on clean or individual field clean so the kind of the 3 main things agenda gives you and so a lot of this situations they were having to do attract we needed to create dynamic I we need to basically make all 3 of these things Dynamic arm and so starting with structuring of what I mean by creating a dynamic form structure is that we needed we have a situation where we need a form with the fields on it might change depending on certain pieces of user context and this is like probably a problem that multiple it's not just unique to us right a lot of people have out there was something like this the also
at the reason why you might need to do something like this is like saying a really basic form that captures some data but alone then you need to introduce a piece of context to change the form right so you know like straight you can if condition father adds a field to the far right so that feels as dictionary you can put the field into it dynamically when you instantiate the form and everything works the problem with this is that I think all that's that's right side so the public this is it doesn't scale when you have a lot of conditions so when you start getting really complicated layouts that have a ton of conditions in a time yields to change this solution doesn't work too well because you'll have a really messy foreman at that light has a target conditions of present business logic what you want to do is separated through those things right you would be able to seperate your logic that determines what you see as part of the form structure from those rules are and so the way that we chose to solve this problem is a tree of filters data and what that means is like although the defined forms on the field of gender right now is to use like it's an object right alone and use that supports on an object when instantiated in that determines what our gender renders in hunting of Balinese but all that information on you can basically represent as a dictionary right instead of an object and working and working with it as a dictionary makes it a lot easier to kind of hot movie layouts around the data becomes all so long as you missed out of solution looks something like this right so you fields now become white entries in dictionary in your field structure is no longer directly tied to the form a set of having a class definition that says here's the fields here's the water you have this which basically takes in your field structure object on which is you know basically the same as what sort of field ultimately builds but you get now is you have a layout that separate so if you want to have a different layout define a different variable on within your dictionary I mean you can actually take this a step further and move the actual field objects out around the spilled variables with the data on and kind
of replace them with all that's the way the solution works is so you now instead of having a or a dictionary that contains the actual names you create a list of strings and you grab those names from them for a module in this example on using a class that you could swap that out for any right so you have list now that defines your field layout and it's completely separate from your agenda form so what you can do and what we actually do it do attract is we have an API call that determines what deals run the former runtime so our API takes care of the context and you know all the specific business rules that determine what fields need to be on the form and then it spits out is the list of strings and this knows what to do after it has a list of strings right on it does again actually on the class that contains the field also we have this kind of class that over that contain all the possible fields a could be on the form of since he have a superset in those fields Definition somewhere on so we ground and actually from that class so we basically like instantiate the actual Django field object whether it's a character field or you know how like integer field or something like that and then we just stick it in the south of fields because we can add entries that really simply so that I need to do you have a dynamic field layout alone but the other piece of it is actually rendering this so we need to get HTML from this dynamical layout so we know that the gender form tag rate on you just place it into your template it renders all the fields on the form for you and 1 of the problems with this there was if you need to have a custom HTML or CSS instead of what gender gender generates for you but it becomes difficult because you're not exactly sure what elements of on page also for a while he had a solution work which into crispy forms of but I think for stuff like this it's probably I would get by staying away from forms because it forces you to tie your particular form to take away out on so quickly forms did you abstractions over like are the actual HTML elements that you'll see on page on but if you have a dynamic layout you don't really want tied up directly to your form definition right you can use that layout in multiple forms and and you don't want to you know be tied to 1 particular rendering that so that's kind of how the dynamic field structure problem works so 1 of the other problems that we have to solve with dynamic form validation kind of an example of why you would wanna do this kind of a really trivial 1 is like if you have an address field in your application alone you might not hard to a 3rd party service ovality picture address is actually correct right arm but the problem is that the party service has areas form has errors and you want to use to really act as war i'm because it's just interesting to talk about actual use case that do attract was that we have on third-party users who write validations in a language that we've created that influence agenda for so and then those validations that their rights are evaluated by Microsoft that we have on that all that aspect of it is actually pretty complicated but generalizes to kind of not worry about dealing with those areas that once we had forget about media so all you need to really do to integrate external errors you get from another service with the internal affairs of your form is is called at
air so like I would actually call cleaner calling API directly in clean like this but basically the approach is kind of the same right you make a call out to an API of you map out the areas that you get back from the API with the the the fields that you have in your form and then you just call idea and gender takes care of the rest so what's good about this is like if you have an existing infrastructure for displaying errors to the user like I'm sure a lot of web applications to write need use disease In the light cases what's wrong the form this allows you to integrate those external errors as if they came from gender and you have to worry about doing any of the actual work so you just I added takes a field and an error message and it displays in on a particular field and heard about it adds to the field in the general form and then you display works on is going to continue to work this so 1 last problem that we looked at your track was having user-driven fields and basically what I mean by this is like all of you give the user the ability to add like 80 fields you ordering of 4 so we only have to look at an example of this kind are like OK so this is in the middle of the animation but basically this demonstrates like say you have a list of potential optional inputs if you want the user to be able to add on the user can select 1 and attitude going before so the lights it seems like a person might be a lot of problems because like I we think of Django forms like you have a static definition of the form but you can actually handle this by completely with our previous solution obviously you will the JavaScript to kind of make sure that this works the way that is supposed to work on but it's basically like free really simple pieces of the solutions so on the actually rendering the few existing care about Javascript so i'm which might seem a little strange cause you'll have initially a mismatch between what's the user actually is seen data entering on and what is actually on jingle form when you render but you need a lot JavaScript to of basically implement the functionality to allow the user to add the fields the form and then save your dynamical structure part that we talked about before comes into play because now you can change you can add those additional fields of user added to the fore so the JavaScript part is not that complicated it loOKs how like this is like a really
trivial implementation of its own and basically became part is that you need to pass data from your template context in but when you're rendering the jingle 10 . 2 . scripps so like here I have on the job done contents which is like a list of all the potential field 1 allow the user to add and then say drop-down fields is a dictionary of the field of a user has saved data for it already and about a user has saved for are the reason why need both those things because like I don't want to wipe out are I don't use it to lose any data right so they say something I when they in the form of jobs could use to create the fields of the body state so it always does is it loops through the drop-down contents and if we use the same data for it creates like a static field that looks like everything else the user hasn't it adds to the drop down and then I'll let you guys adapt and this is like a really simple jobs get the checks for a change and adds a field in the same this the the general form side of
it is even simpler because we have these fields which are what you see when you render the form and then you have a drop-down fields of analysis saving you can just added dropped and fields and your field structure Our because you can change it at any point you have a different alone the different formed in the same way and now you're validations work even though those fields were in your form when users load the page I sold 1 last thing I how can 1 talk about a little bit is on so a lot of these problems ended up leading us to the decision to move away from of the architecture that we currently have which was jungle forms and actors regular HTML templates and we moved to come react Iast redox and so on but the actual back is pretty much the exact same in reactors reality still have is these are dynamic field structure and that actually helps us more when we moved to react yes because what happens is from we implement react components that nearer the Django fields and then what happens is you send your whole field structure instead of letting gender render you conducted as a J. Song and treated as data once again and send it to the front and and let react to render it and then react kind treats it you can trigger forms then on as like pages in your single page application our yes impede application framework with react and then what we use redox force a kind of imitate the sort of like state storage and say that you would get with during regular postal requests so redox is just so like a plug-in that you can use that allows you to store state are reactors handles the actual rendering so jingle forms spits out Satterfield structure the same thing that we had before react renders it on because you have the same you react components that mirror the Django fields and then redox just takes care of making sure that the data the user enters it seemed and then on when the user you know what suppose back the form they can do that rejects the but so that's really
a any questions I think I have some time for questions and answers so very odd in the last
part of the you see using the act and react step cover you handle this area sigh evaluation right easily get messages from there about however you press and those in the reactors you i right so the way this actually works is were kind of work and this is like kind of this solution is not in the best stages that occur could be but on my back and I basically instantiates agenda form that is we at the field structure which represents a uniform so the Bakken instantiate form with the data that it gets the Ajax react on we get foreigners that and then we just send those 4 back as Jason to react deskman react renders it the same way that we would before as answer pressure the and 1st you wanna go I I think so it's orders really interesting in fact I work with Django evasiveness of called wagtail that's very similar in the way that it's handling itself forms and then you have the use cases where you have save the state of the form at the time that it rendered because of the form is just data you could say that Jason on string of of that dictionary right and then access that form an exact state as it was during that time and then you can have this sort of J. like of that migration state I type thing with your forms and so on With redox that actually kind of is what you get so the redox tracks the state of the form so as soon as you rendered the page initial populates the field values than in that also populates redox estate so at that point you have the state that basically represents all the data that we have a page and I that state stays updated so if the user changes something on the URI element it updates the redox state and and that's kind of how we don't do anything else to light capture the pose reductase state is updated with the state and the save earlier would impose baptistery Ajax on it's the same state and whatever user updated gets updated when you said that the so I really like the idea of a good sending the air form structure to react as Jason having no reacts components that mirror the Django form structure that question assessed do you are you would react components performs open-source 3rd you know of any available at a price that have that fields that mirror the Django form structure that is a good question because we really should and I think that is like the ultimate goal of ours is to open source a solution what's it becomes like the tangled from all the weird special case stuff that we have written it on so that's probably that's probably something to happen in the future as I if you have been useful to a lot of people who want to integrate thank you and react is if you wanna go that are out on the RT have a solution built on a 1 of you would say that it's going to be open source at some point in the near future I just can't tell you exactly when that would be so I don't know if there are other projects that have that sort of thing I know we can't be the only people integrating gender and react but I I think there is another talk even happening about that integration so be curious to see you know what other libraries out I don't really know great thanks so much hey you mentioned um you have sometimes third-party services where you do validation on uncertain USA and that's yet and it you know 1 t do the actual uh ending of the errors in the forms clean method yet so word you actually do that our was you approach the so I don't like doing a service called on the actual form clean on what I just do it like that out to methods so you don't have this huge is you have a whole bunch of stuff nucleon if you have any sort of complex requirements as far as the data they can be entered so yeah in terms of like where you would have a 3rd third-party errors I just do it in a another method on your form that it's called in clean but make sure you clean doesn't become some unmanageable thing it's kind of what was going on it well thank you for your part have questions so that was your approach um front-end controls the structural form right of so others some security issues like cross-site scripting like our from just about I can post some unwanted fields that shouldn't be there and so it I guess content the content does not control the structure for right the data I guess you talk about where the user driven fields thing and even that there is a stupid always has to be a superset of what is allowable because you can let the user define custom fields working do you can't have to hack around it and do something where like because until that uses defining is actually some it's a concrete field on the back and you can never let the user modify your actual form structure so what we have is like we have a superset of all the possible things you could do we don't let them add their own dynamic things that are part of our superset is that right I would have security issues I mean it also like there is for example fields like uh credit card number and you that only in some circumstances like user should feel his 1st and last name or some jet books but I can construct um J. cell that contains 3 credit card result in those fields and I consented so do have some additional services addition in yet so the field structure of form that renders all it has to match rather the from the user enters data into as the match the back and not to separate structures so if I send you did I when the structure but then the user enters an additional guess in that case all that has really hit the server side if I understand what suggest is that like so the scripts that additional feel that isn't really on the form of it is on the form but it appears only in some the right hand right in that case you feel structure on the back and you would know that that's not there and so that the data would you would get some sort of validation error on the back and when you try to post a field that is there don't cause problems so the things it the tried to allow a user to get halfway through a and kind of long forms and n save the state and come back to in pick up where they left off played in the middle of 1 but to conform yet so we've gone back and forth about that it seems like like well the the idea of some others like specific questions about like doing that it just that yet have you had challenges since you have tried and the agendas integrating that kind were you know with this work we have all the problems with that and we have had a lot of chances without the promise that tend to be like validation like the Middle East problems about like also what kind of validation this analysis is not important all the time of for instance like in that case if you want the user to be of the same partial data and come back later idea of what we always when you're required but you require validation is important so I we got I will go back and forth about what you actually do in those circumstances but I think it's definitely with this structure it's not a super difficult problem solving think you can go back and forth pretty easily on what you actually end user behavior to be so I think that's the per per thank thanks what to you
how the seeds of the