Skip to content

gwn/jsonforms

Repository files navigation

JSONForms - More Forms. Less Code

Complex AngularJS Forms in the blink of an eye

JSONForms extends the AngularJS 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.

Usage

  1. Install JSON Forms via npm install jsonforms and require it via require('jsonforms')
  2. Annotate the element, where you want to place a form, with a jsf class attribute.
  3. Add jsonforms as a dependency to your AngularJS app:
var myApp = angular.module('myApp', ['jsonforms', ...]) 
  1. Load jsonforms.css in the head section:
<link rel="stylesheet" type="text/css" href="node_modules/jsonforms/dist/jsonforms.css">
  1. Render a form with the jsonforms element:

The simplest example looks like this, where schema, uiSchema and data are properties of a aliased controller named vm:

<div class="jsf"> <jsonforms schema="vm.schema" uischema="vm.uiSchema" data="vm.data"></jsonforms> </div>
  1. Styling

  2. Use Bootstrap version:

    In order to use the Bootstrap version of JSONForms, you'll need to first load the CSS file of Bootstrap, e.g. by installing it via npm and referencing it in your index.html. Furthermore, you'll also need to load JSONForms specific CSS stylings bits which are contained in the jsonforms-bootstrap.css file:

``` You'll also need to load an additional JS file `jsonforms-bootstrap.js` in order to fully integrate JSONForms with Bootstrap: ```html <script src="node_modules/jsonforms/dist/jsonforms.js"></script> <script src="node_modules/jsonforms/dist/jsonforms-bootstrap.js"></script> ``` Finally, you need to add the `jsonforms-bootstrap` module as a depedency of your application module: ```javascript angular.module('MyModule', ['jsonforms','jsonforms-bootstrap']) ``` 2. Use Material Design version:
In order to use the Material Design version you additionally need to load JSONForms specific CSS stylings bits which are contained in the `jsonforms-material.css` file: ```html 
``` You'll also need to load an additional JS file `jsonforms-material.js` in order to fully integrate JSONForms with Material Design: ```html <script src="node_modules/jsonforms/dist/jsonforms.js"></script> <script src="node_modules/jsonforms/dist/jsonforms-material.js"></script> ``` Finally, you need to add the `jsonforms-material` module as a depedency of your application module: ```javascript angular.module('MyModule', ['jsonforms','jsonforms-material']) ```

Documentation and more information

For documentation, examples and more information, please see jsonforms.org.

Developers Documentation

First time setup

  • Install node.js(version > 4.x.x)
  • Clone this repository
  • Install dependencies: npm install
  • Generate typings: npm run typings-install

Build & Testing

  • Normal Build: npm run build (runs tslint as well)
  • Bootstrap Build: npm run build-bootstrap
  • Material Build: npm run build-material
  • Test: npm run test
  • Watch: npm run dev (or dev-bootstrap, dev-material), point your browser to http://localhost:8080/webpack-dev-server/

How to run the examples

JSONForms ships with a couple of examples. The examples' dependencies are managed via bower, hence you'll first need to run the following commands from the project root directory:

cd examples bower install 

Also make sure that you have followed the instructions for the first time setup in case you haven't done so already.

Now you start the example by running npm run dev and then pointing your browser to http://localhost:8080.

Note that for running the placeholder example you'll first need to start jsonplaceholder which provides a fake REST API. You can do so via

npm run start-placeholder 

Continuous Integration

The JSONForms project is build and tested via Travis. Coverage is documented by Coveralls.

Current status: Build Status Coverage Status

Deployment

  • Locally login as one of the (npm) owners of the package (npm doc)
  • Make sure your workspace looks exactly the way you want to release it. (Files specified in .npmignore are normally ignored by npm, but this functionality is buggy. Therefore to be sure you should still remove all unwanted files before deploying.)
  • Run either npm run publish-patch,npm run publish-minor or npm run publish-major.

The script does the following:

  • Build all JSONForms alternatives
  • Execute tests
  • Increase version in package.json
  • Commit version bump to the current branch
  • Checkout a new temporary deploy-branch
  • Commit dist/jsonforms.js file
  • Create a new version tag
  • Push the version tag to 'upstream'
  • Release the workspace to npmjs

If any of the steps fail the script will abort. If the script was successful you should create a pull-request with the version bump commit to 'upstream'.

License

The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.

Roadmap

Our current roadmap is available here.

About

AngularJS-based forms for JSON data.

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 89.8%
  • JavaScript 6.8%
  • CSS 3.2%
  • HTML 0.2%