How to Create a form from a json-schema?
Question:
How to create form from JSON Schema?
I am writing code in JavaScript and jquery. With this template part like Form I am creating this with haml and adding this in js file.
For backend I am using python. I am using Django framework.
So I got some links for create form from JSON Schema.
Reference link :
http://neyric.github.io/inputex/examples/json-schema.html
In my Form :
Input elemets : textboxes, textarea, select list, submit and cancel buttons are present.
So I want to ask is creating form with JSON schema is feasible or not?
If yes then, can you provide some good links?
Answers:
jsonform – Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.
Just stumbled upon this question and wanted to add this new option:
JSONForms extends the view-model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema. It supports React, Angular, and Vue.
Form generation from JSON Schema is a common practice, specially for automatically generated user interfaces.
In your case, if you are only interested in creating ONE form, maybe it will be better to directly code it.
Here is a library I have created that hopefully you find interesting:
JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided
Live demo at http://brutusin.org/json-forms
You are looking for Alpaca Forms.
http://www.alpacajs.org
JSON Schema driven forms using jQuery with layout engines for Bootstrap, jQuery UI / Mobile. It’s very extensible and pretty decked out.
Apache 2.0 licensed and awesome community (I am a code committer).
I’ve been looking for the same, and turns out there are some good options. These are the best libraries I could find on GitHub:
-
JSON Editor (plain JS) (demo)
-
Angular Schema Form (AngularJS) (demo)
-
React JSONSchema Form (React) (demo)
Another option is “json-schema-js-gui-model“. It converts the json schema into a gui model that you can easily use in any web framework to create a custom form. For detailed advice on the last step, the angular 2 docs has a recipe for creating a dynamic form from a gui model.
Look at this project
https://github.com/mirshahreza/json-edit
A jquery plugin to turn json schema to form
It may be helpful in your scenario
Have a look at this demo (source code) of ngx-schema-form :
- Takes a JSON schema file
- Generates that into a fully working editable web page form
- Saves changes to the JSON model as a Javascript object
- Allows adding custom validator code for any section
This works really well for me (I only found it a couple of days ago). I use it with the latest Angular, and it is working exactly as documented.
Or… you could take a look at outperform. It’s a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.
I mean, let’s face it: if my SPA is like 20KB unminified but gzipped, then I expect library routines which do something simple as generating a form to be significantly smaller. Its main features would be:
- Zero dependencies.
- Less filling (unminified but gzipped: <2KB).
- Native HTML5/browser validation support for all HTML5+ input types.
- Custom validation seemlessly integrated.
- Supports all web frameworks out there (including Bootstrap).
- Autorefills half-filled forms when reloading a page in all browsers.
- JSON set/get for all form values.
I have found https://form.io, it’s by far, the most advanced project in this matter i have found. Draggable form creates the schema that renders. His core is opensourced.
How to create form from JSON Schema?
I am writing code in JavaScript and jquery. With this template part like Form I am creating this with haml and adding this in js file.
For backend I am using python. I am using Django framework.
So I got some links for create form from JSON Schema.
Reference link :
http://neyric.github.io/inputex/examples/json-schema.html
In my Form :
Input elemets : textboxes, textarea, select list, submit and cancel buttons are present.
So I want to ask is creating form with JSON schema is feasible or not?
If yes then, can you provide some good links?
jsonform – Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.
Just stumbled upon this question and wanted to add this new option:
JSONForms extends the view-model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema. It supports React, Angular, and Vue.
Form generation from JSON Schema is a common practice, specially for automatically generated user interfaces.
In your case, if you are only interested in creating ONE form, maybe it will be better to directly code it.
Here is a library I have created that hopefully you find interesting:
JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided
Live demo at http://brutusin.org/json-forms
You are looking for Alpaca Forms.
http://www.alpacajs.org
JSON Schema driven forms using jQuery with layout engines for Bootstrap, jQuery UI / Mobile. It’s very extensible and pretty decked out.
Apache 2.0 licensed and awesome community (I am a code committer).
I’ve been looking for the same, and turns out there are some good options. These are the best libraries I could find on GitHub:
-
JSON Editor (plain JS) (demo)
-
Angular Schema Form (AngularJS) (demo)
-
React JSONSchema Form (React) (demo)
Another option is “json-schema-js-gui-model“. It converts the json schema into a gui model that you can easily use in any web framework to create a custom form. For detailed advice on the last step, the angular 2 docs has a recipe for creating a dynamic form from a gui model.
Look at this project
https://github.com/mirshahreza/json-edit
A jquery plugin to turn json schema to form
It may be helpful in your scenario
Have a look at this demo (source code) of ngx-schema-form :
- Takes a JSON schema file
- Generates that into a fully working editable web page form
- Saves changes to the JSON model as a Javascript object
- Allows adding custom validator code for any section
This works really well for me (I only found it a couple of days ago). I use it with the latest Angular, and it is working exactly as documented.
Or… you could take a look at outperform. It’s a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.
I mean, let’s face it: if my SPA is like 20KB unminified but gzipped, then I expect library routines which do something simple as generating a form to be significantly smaller. Its main features would be:
- Zero dependencies.
- Less filling (unminified but gzipped: <2KB).
- Native HTML5/browser validation support for all HTML5+ input types.
- Custom validation seemlessly integrated.
- Supports all web frameworks out there (including Bootstrap).
- Autorefills half-filled forms when reloading a page in all browsers.
- JSON set/get for all form values.
I have found https://form.io, it’s by far, the most advanced project in this matter i have found. Draggable form creates the schema that renders. His core is opensourced.