An Angular.js JSON form renderer for eForm
This library is meant to be used in conjunction with Form.io to provide dynamic JSON form rendering capabilities. This allows you to render any form using the schemas provided by Form.io in the following format.
<formio src="'https://myapp.eform.vboss.tech/myform'"></formio>
The following snippit of code will dynamically render the form within Form.io, as well as automatically hook that form up to the REST API generated from the same schema.
Here is a Demo
http://codepen.io/travist/full/xVyMjo/
Multi-page Forms
This renderer also supports multi-page forms using the formio-wizard directive like so.
<formio-wizard src="'https://myapp.eform.vboss.tech/mywizard'"></formio-wizard>
This directive uses Panels within the root of the form to indicate new pages within the form.
Installation
There are several ways to add this library to your application. Each of these installation types are for specific use cases.
Full Installation
- Includes: Everything including Angular.js and jQuery.
- Usage: Use this installation if your application does not already have Angular and jQuery and you wish to display a single form on a page.
- Installation: Place the following within your application.
<link rel="stylesheet" href="https://rawgit.com/vbosstech/ngFormio/master/dist/formio-full.min.css" />
<script src="https://rawgit.com/vbosstech/ngFormio/master/dist/formio-full.min.js"></script>
Complete Installation
- Includes: Everything except Angular.js and jQuery
- Usage: Use this if you are embedding a form within an application that already has Angular.js and jQuery installed.
- Installation: Place the following within your application.
<link rel="stylesheet" href="https://rawgit.com/vbosstech/ngFormio/master/dist/formio-complete.min.css" />
<script src="https://rawgit.com/vbosstech/ngFormio/master/dist/formio-complete.min.js"></script>
Basic Installation: (Bower Installation)
-
Includes: Only the ngFormio renderer library with no dependencies.
-
Usage: When you wish to explicitely include all of the dependencies like when you are using Wiredep.
-
Installation: We recommend using Wiredep for the Basic installation since it will wire up all the dependencies for you. You just need to place the following within your application.
First install the dependency using Bower
bower install --save @eform/ng-formio
Then, you can add the following to your application.
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
Then run Wiredep to wire it up.
$ node
> require('wiredep')({ src: 'index.html' });
We also recommend using this within a Gulp build process using Wiredep in combination with Gulp UseRef.
Configuration
Once you have this installed, you will now need to add this module within your Angular.js application declaration like so...
app.js
angular.module('yourApp', [
'formio'
])
Usage
Now that you have the library installed, you can then do the following to add a form to your application.
- Create an account on https://eform.vboss.tech
- Create a new project.
- Create a Form within your project. This will then give you an API url like the following.
https://myapp.eform.vboss.tech/myform. - You can then embed this form within your application by providing the following.
<formio src="'https://myapp.eform.vboss.tech/myform'"></formio>
This not only renders the form dyanmically within your application, but also automatically hooks up that form to the API backend that is provided from eForm.
Enjoy!