Questions: a Python form library for powerful, javascript-rendered forms
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 72 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/54779 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2020 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Plone Conference 202028 / 72
1
3
6
9
13
14
18
23
34
35
39
40
43
46
50
51
56
58
60
63
66
71
00:00
Library (computing)CodeMarkup languageGUI widgetArchaeological field surveySoftware frameworkEndliche ModelltheorieFreewareSource codeRevision controlMatrix (mathematics)AerodynamicsoutputType theoryComputer configurationCross-site scriptingServer (computing)Client (computing)Library (computing)User interfaceDifferent (Kate Ryan album)CodeFlash memoryPOKEFunctional (mathematics)Projective planeTemplate (C++)Element (mathematics)Flow separationSoftware frameworkType theorySoftware testingDynamical systemMultiplicationCartesian coordinate systemComputer configurationBitCapability Maturity ModelSoftware developerRevision controlQuicksortElectric generatorGUI widgetMarkup languageINTEGRAL1 (number)Bootstrap aggregatingComputer fileValidity (statistics)View (database)Control theoryElectronic visual displayMathematicsCurvatureOpen sourceService (economics)Cross-site scriptingMusical ensembleoutputComputer animation
05:50
AerodynamicsEmailRevision controlFormal languageAxiom of choiceoutputGUI widgetMatrix (mathematics)Type theoryCross-site scriptingComputer configurationClient (computing)Server (computing)Musical ensembleXMLComputer animation
06:12
AerodynamicsSocial classEmailWeb pageMultiplicationField (computer science)Term (mathematics)Computing platformInformationComputer programmingHypermediaWebsiteLibrary (computing)Web pageControl theoryCodeServer (computing)Uniform resource locatorService (economics)Right angleXML
08:50
EmailFormal languageRevision controlCodeGroup actionFormal languageGreatest elementSlide ruleMathematicsField (computer science)Library (computing)Axiom of choiceDependent and independent variablesCASE <Informatik>Control theoryGUI widget
10:18
Template (C++)Cartesian coordinate systemLoop (music)View (database)VolumenvisualisierungDefault (computer science)Web pageComputer fileProfil (magazine)Electronic visual displayCodeWebsiteAxiom of choiceFluid staticsGUI widgetEmail
13:28
Demo (music)Group actionZoom lensBitMusical ensembleCodeComputer animation
14:01
Dynamical systemControl theoryCartesian coordinate systemVideo gameServer (computing)Pulse (signal processing)
14:23
Formal languageWeb pageCASE <Informatik>Validity (statistics)Error messageComputer animation
15:18
MultiplicationWeb page
16:07
MultiplicationWeb pageComplete metric spaceJSON
16:30
Address spaceDemo (music)EmailNormed vector spaceHand fanInteractive televisionWeb pageField (computer science)Streaming mediaGUI widgetComputer configurationMultiplicationComputer animation
18:55
CodeTouchscreen
19:19
Menu (computing)Different (Kate Ryan album)Computing platformDisintegrationLibrary (computing)Archaeological field surveyGroup actionLogicType theoryInflection pointInclusion mapMaxima and minimaArchaeological field surveyWeb pageText editorField (computer science)Computer animationXML
20:07
Line (geometry)Computer fileCodeConstructor (object-oriented programming)Object-oriented programmingComputer animation
21:49
Video gameWeb pagePresentation of a groupComputer animation
22:28
Zoom lensPressureGroup actionDemo (music)Data recoveryEndliche ModelltheorieCASE <Informatik>Field (computer science)Library (computing)Archaeological field surveyActive contour modelType theoryConfiguration spaceFile formatXML
23:35
Endliche ModelltheorieError messageCodeRevision controlGUI widgetComputer fileValidity (statistics)Parameter (computer programming)Type theoryLibrary (computing)Element (mathematics)Endliche ModelltheorieAttribute grammarCategory of beingIdentity managementCross-site scriptingMusical ensembleXML
25:03
Software frameworkDisintegrationCodeAlpha (investment)Revision controlRepository (publishing)Computer animation
25:38
CodeCore dumpCorrelation and dependenceFluidoutputExecution unitMechatronicsWindowCodeSampling (statistics)Real numberVideo gameComplete informationInformationReading (process)XML
26:07
Online helpSoftwareInstallation artText editorCurve fittingGroup actionDisintegrationSoftware frameworkCodeLattice (order)TwitterEmailWindowEmailTwitterSinc functionValidity (statistics)Type theoryCodeRepository (publishing)QuicksortYouTubeCASE <Informatik>Software repositorySoftware frameworkXMLProgram flowchartComputer animation
Transcript: English(auto-generated)
00:01
Well, hello everyone My name is Carlos de la Guardia and I'm going to give a short talk about form library that I've been playing with It's called questions and okay
00:21
So here we go Okay, why did I write a form library? Yeah, no excuse there In my defense many of us have written form libraries across the years so like I took the liberty to get Eric Brehals
00:41
to it here to Poke a little fun at myself and all the people that have made form libraries So yeah, maybe when we're old we we're gonna Talk about the different Form libraries that we created Yeah, I just thought
01:02
That I would write one the idea is a simple library for displaying and handling forms they are defined using Python code like many other form libraries like deform or WTF forms and
01:20
The the gimmick here or the Different thing is that the forms are rendered using a library a JavaScript library called surbijs the idea is I always when when I've been working with
01:42
Even small pyramid projects or flash projects when you have forms and you were trying to use a form library like WTF forms or deform You End up having to write a lot of JavaScript code to connect things together and then
02:01
Some widgets that you want to use they are not compatible with the library So you have to create custom widgets or or well try to figure out how to make them run the form so I thought Why not just go away with all the? Python
02:20
And forget about the Python templates for For the form elements and just skip the markup generation and use JavaScript. So that's the big idea here and That's what question does questions gets on the back of surbijs, which is a
02:40
According to them. It's a modern way to add surbijs and forms to your website. It's a very mature library It's been several years in development and it's compatible with with most JS frameworks with react with Angular and Vue.js and jQuery so It's pretty easy to to use it. And no matter what JavaScript framework you're using you can
03:06
You can add functionality to it using your own framework if you need it. It has lots of features It was built initially for surbijs But is now a full-fledged Form library and it also has
03:23
Many things that are unique to surbijs. Like for example, you can define correct answers for questions and then use use that as a sort of test or quiz and And all the functionality is included there. So it's pretty easy to define simple quiz applications using this library
03:45
The license is MIT. So it's open source, free to use, free to distribute and And that's a great thing. It also has a form creation tool JavaScript thing But that's not open source. It's free to use though. So I
04:04
Want to show it a little bit Now my library questions. The features it has Since we use surbijs, we get a nice and integrated user interface and
04:22
The JavaScript widgets are really powerful. Not just the ones that it includes, but it's compatible with some other really Popular add-ons like select, select two and some jQuery UI things or bootstrap
04:40
Things as well, so like I said before it's compatible with Angular, jQuery, KnockoutJS, React and VueJS and Questions makes sure that you get the right files for each version so you don't have to If you want to get into JavaScript, you can take control Or if you just want to display things from Python and you just want to use Python
05:04
Questions can take care of everything And there are more than 20 question types from simple text inputs, drop-downs to elaborate widgets like for example panels Dynamic things and mattresses that you can pretty easily create
05:24
It also has multiple look-and-feel options like themes where you can Change their form appearance pretty easily. It includes bootstrap CSS support It also has full client-side validation and questions such as
05:45
server-side checking as well So that's the bird's-eye view of what it can do. How does it look? For example To define a form you just
06:04
I'm sorry, I clicked a little too early here. There it is For example, the concept of panels is that you can define a form that has some controls
06:20
for example here a drop-down question and a text question and Then the real form You can use that other form as a panel using the form panel thing that questions provides and you just pass it the The other form that's going to be the panel and you give the title
06:43
And the dynamic thing means that the user can add as many Social media platforms as desired so for each one he will get or she will get Another opportunity to add a media
07:03
With the text So as you can see, it's pretty easy to define a panel and use it. It's like Like a field set in long terms Like we use a field set and it's pretty easy to define it and just use it here
07:23
That's one of the concepts that we have and questions also make it very very easy super easy to have multi-page forms That are completely wired. You get a next and previous button and you get a complete button at the end You can go back and forth through the form as you want and you don't have to take care of controlling
07:44
That on the server side. You just do it here and when the form is through The user completes you get all the information from all the different forms To define a multi-page form you just create a couple of forms with some controls example page 1 and page 2 here and
08:03
Then you add the different fields that you want to use Take a look for example at the drop-down question that allows things like Passing a URL for a RESTful service to get the values so
08:22
The library takes care of many of the things that we usually have to to program in the Python side and to create a multi-page form you just create a new form and use a thing that I call the form page where you get To associate the form each form with a page giving it a title and then you get
08:45
Multi-page form right now. I'm going to go through the code examples quickly, and then I'm going to show how it looks in practice Here's a simple form for example that I have You can see the different fields one thing that that is pretty easy when using this library is to define live form behavior
09:06
When you need to show some question only if the answer to another question is a specific one Or you need to filter choices in a select or in a checkbox group or a radio widget You can do all that pretty easily here. If you take a look at the bottom of this code slide visible if
09:29
I'm here You say if the language question equals Python that is the answer is Python Then this question will be shown and if not it won't be shown Things like these are pretty useful to get
09:43
Very interactive forms that change according to the user responses and And it's really easy to handle that which It's not usually that easy when you are dealing with defining the things in the Python side. So in this case
10:03
All the behavior of the form is defined in Python code and You get Still a lot of control over the JavaScript side of the of the thing to handle the form data once the user
10:22
was complete Just simply define but for example, this is like a flask application you get a view that's post view and And To get the data you just get request get JSON and you get something like like we see below here profile data
10:44
So it's It's all JSON. You can Take the data and it generates JSON. The whole form actually is rendered as a JSON thing Which is pretty useful if you want to also export the the code to use somewhere else you can even generate
11:06
a Static site that has a quiz or a form Without any other Python code and just use it as a static file application and Here's an example of how you would get the form to display
11:26
This data that is above the profile data that have name, email, per date, country You can display it in a form like an edit form using Just passing form data and JSON data that you want. So
11:43
It's pretty easy to handle all the form data and To display the form There are a couple of choices Like I said before you can just generate a full HTML page and display that and
12:03
And that would be like a standalone thing or you can integrate it with something like for example here we have a Jinja 2 template and the form Gives you several things to take care of stuff if you want to take care of the JavaScript completely you can do that
12:23
But the form also allows you to Include just the JavaScript that is required according to the widgets that you selected So if you use this loop for form.js You will get just the JavaScript that the widgets that you are using on the form need
12:40
the same for for the For the CSS and the JavaScript for the form is Is inserted using the render.js Call from from the form The only thing that you need is to define an ID
13:00
with the name of the HTML ID that you you pass in the default is questions form and you can pass your own whatever you want and That's that's all you need to To get the page rendering So you can combine this with your own Resources and templates and just insert the form inside your application wherever you want
13:31
Let me show you a little bit
13:46
Show you for example the simple form Here's a code for the form as you can see it's similar to the code that I was showing before
14:02
we have the Dynamic thing the left their life control thing here and it's a simple flask application with a form that you can post the data to and
14:20
You can start the server and run it And here it is As you can see it's Rendered quickly if I choose Python as a language it automatically
14:44
Shows me Another question where I can choose which is my favorite version, but if I don't like Python, then it doesn't bother showing me that That question if I don't feel the value of a question I get immediately a validation error and I can't move to the next page until I
15:05
Finish that in this case just complete the form so that's that's one example
15:22
Let's take a look at another one Here's another one Uses the not dynamic panels which is the concept that I told you that you can have as many of
15:45
Something as you want so here it is an example And this is a multi page form we define three different forms They can also be used individually if if I wanted to just use this this form for example page two a
16:04
Standalone form I can do that. Just just render that one or I can integrate it into a complete multi page form using here Yes, so it's a very simple syntax to get the multi form going and
16:22
I'm gonna show So you notice that this is a different style of rendering the form
16:41
I just changed the name of the theme and I get a completely different Thing and then I get a multi page form I can go to previews and the next pages pretty easily Go back and forth Optionally if I select some fields as required I cannot go to the next page until I fill up their required fields
17:07
and I can pick my favorite sports and this is the The panel's theme that I I said let's say That I'm a Dallas Cowboys fan. So I say Cowboys my team
17:24
And the sports American football and I want to add another one And I can have as many as I want or remove them
17:41
and everything is Ready to be used just just by defining a dynamic panel and setting the options So it's pretty easy to use and it gets a lot of of interactive Widgets in your form pretty easily
18:04
You can also use the values of other questions If I use my name here And I can then have other questions that that take take the value of of previous questions and use it
18:28
in different ways And if I say just to a question, then I get the other question to show up if I say no shows and When I'm ready, I complete the form and that's that
18:44
So as you can see, it's pretty easy to get multi page forms that do lots of things pretty easily one more look at the definition so that you can see
19:01
How little code is required to get that form that I show just now just that a screen full of code is enough to get That form going and I wanted to show also
19:21
This is a surbijs page and One of the things that they have is a surbijs creator, which is a full-fledged form editor that you can You can use here. You can see a very complex form that has lots of pages
19:42
and You can set the options for for all of the different fields So you can see it allows you to get really to the details of a very complex form and make it do what you want and
20:01
one thing that's Very neat here is that it gets you a JSON editor where all the form definitions that you create are here it's About 1,500 lines of JSON
20:21
that I copied and I have here it's the whole JSON and I can using A form constructor that
20:42
that we define Get that JSON from the file read it and create a form From JSON getting that JSON there just one line of code once I have I have the the JSON
21:07
Just one line of code
21:24
To start with that
21:51
What I was going to show you is that when you use the from JSON Thing and you have the form in the right place and and they're not trying to present its life you get
22:04
You get a form like this one which has nine pages and you can fill it up easily Okay, sorry about that back to the presentation inside
22:33
The form the library is the pydantic library Which
22:42
Is a very very neat way to to use the Python type hints to create Models using schemas And Basically everything in questions is is from a base model that has a configuration
23:02
and And The configuration just makes sure that all the fields in the javascript Format of the subi.js form definition Are translated correctly to Python so that we can use camel case and not make our forms look ugly with
23:24
we don't No, sorry, we use snake case and not make a form recovery with with the camel case Let me Show you what a model looks like this is a question and it has all these attributes
23:46
And these are all the properties that are accepted by the library We have a complete validation using pydantic, so if you initialize a form and you make you give up an incorrect parameter or
24:03
You Don't give the correct type for something you will get an error so it has to be correctly typed to to get the Pydantic is a very nice library and I hope I can use it more To do more things with this library in future versions
24:26
To generate the form we basically generate a JSON code and Get for the for each widget. We have some GAS and CSS files and the form elements that were
24:42
and we uh We have done this step where we construct the form and just go go ahead and Generate a full JSON thing and that's what what is presented in the in the form and that's
25:06
more or less what I have uh I this is just an alpha version. I I started working on this a couple of months back and and I'm
25:21
Just starting to Imagine where we can go It needs a lot more examples though. It has some documentation and Let me There is the The GitHub repository questions And
25:41
And we already have the read the docs Documentation as well with some information More or less complete information about the features How to use it code samples for everything But still
26:01
It needs a lot more real life samples and stuff It's on firefight so you can just pip install questions and get it running and uh, that's not the correct window
26:24
and well That that's about it. Uh, I would like to explore how to integrate with things like Django and And other forms, uh, and other item frameworks probably pyramid It's pretty easy to use already like you saw in in
26:43
Alaska and and should be very easy to use in pyramid But Django is another thing Long, I don't know uh We can also Um I would like to generate code for the forms created in json like the one I was unable to show you
27:03
Sorry again But the idea is to generate the code the python code for the form so that Once you get the json data, you can create the form and then modify the bytecode And since we're using bidentic, I would like to also add more validation that uses type hints
27:27
and uh and also Allow some sort of form creation from the bidentics schema directly Those are the things that I I think I could work on
27:40
Okay questions Uh, thank you very much, uh, I'll be on youtube in case there's any question and uh That's me my my email. I'm on twitter and uh, you can visit my Repository repository for questions, uh
28:01
Create issues or anything. Give me ideas I don't know. Thank you very much for your attention Have a good conference Thank you carlos that was fascinating i'm so pleased that you were able to participate in this phone conference