Git Product home page Git Product logo

bryant1410 / json-forms Goto Github PK

View Code? Open in Web Editor NEW

This project forked from brutusin/json-forms

0.0 2.0 0.0 952 KB

JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided

Home Page: http://brutusin.org/json-forms

License: Apache License 2.0

JavaScript 97.04% CSS 2.96%

json-forms's Introduction

json-forms

bower version Build Status

org.brutusin:json-forms is a javascript library that generates HTML forms from JSON Schemas.

Table of Contents:

Features

  • Dynamic schemas support
  • Extensible and customizable
  • No external libraries needed
  • Validation
  • Multiple forms per document supported

Usage

Include the main library dependencies:

<link rel="stylesheet" href='dist/css/brutusin-json-forms.min.css'/>
<script src="dist/js/brutusin-json-forms.min.js"></script>

Optionally, include the bootstrap extension (requires bootstrap):

<script src="dist/js/brutusin-json-forms-bootstrap.min.js"></script>

Create the javascript BrutusinForms instance, schema being a javascript object representing the schema structure:

var schema = {"type": "boolean"}
var BrutusinForms = brutusin["json-forms"];
var bf = BrutusinForms.create(schema);

And finally render the form inside a container with optional preloaded JSON initial data, data:

var container = document.getElementById('container');
bf.render(container, data);

Demo

demo http://brutusin.org/json-forms/

Dynamic schemas

This library supports dynamic schemas, that is, subschemas that can change depending on the value of other parts of the data.

This lets creating dynamic forms that vary their shape depending on the values entered by the user. This is extremely useful for big autogenerated schemas, that aggregates lots of subschemas and have functional bindings, given that it allows to show the user a simpler, non-error-prone form, also avoiding asking for unneeded data.

Dynamic schemas are built upon two main blocks:

dependsOn schema extension

Dynamic schema resolution

API

Static members:

Member Description
BrutusinForms.create(schema) BrutusinForms factory method
BrutusinForms.addDecorator(f(htmlElement, schema)) Register a callback function to be notified after an HTML element has been rendered (passed as parameter). See brutusin-json-forms-bootstrap.js for an example of bootstrap decorator.
BrutusinForms.postRender(instance) Callback function to be notified after a BrutusinForms instance has been rendered (passed as parameter)
BrutusinForms.instances Array containing all the BrutusinForms instances created in the document by the factory method.

Instance members:

Member Description
bf.render(container, data) Renders the form inside the the container, with the specified data preloaded
bf.validate() Returns true if the input data entered by the user passes validation
bf.getData() Returns the javascript object with the data entered by the user
bf.schemaResolver(schemaIdArray, data) Schema resolver for dynamic schemas

CDN

http://www.jsdelivr.com/projects/brutusin.json-forms

Support bugs and requests

https://github.com/brutusin/json-forms/issues

Authors

Contributions are always welcome and greatly appreciated!

License

Apache License, Version 2.0

json-forms's People

Contributors

idelvall avatar graciano avatar dnault avatar e110c0 avatar opleban avatar shadow-identity avatar bryant1410 avatar fuhrysteve avatar vincentmorneau avatar volt220 avatar zamicol avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.