Application Development

Getting Started

Once you have configured your Form.io project with all the Forms, Resources, Actions, and Roles & Permissions, you are now ready to build your Serverless Data Management application. These applications are built as Single Page Applications and a lot of documentation exists to help the development community get started with that paradigm of application development. With this paradigm, there have been a number of Frameworks and Libraries that have risen up to enable developers to rapidly build Single page applications. The most popular of these is a framework called Angular and library called React.

Before you begin building your application, you will need to decide which of these systems you would like to use, and then leverage the Form.io libraries that allow you to embed the forms and resources within your application.

Form.io provides a number of Open Source libraries that interface with Angular, React, as well as plain JavaScript to enable you embed Form.io into your application. All of these libraries are hosted on Github at https://github.com/formio. Each of these libraries provide their own developer documentation on the projects pages within Github. These main libraries used for application development are as follows.

Core Libraries

  • formio.js - The core JavaScript API + Form Renderer

Angular 1

  • ngFormio - The Form Renderer (http://formio.github.io/ngFormBuilder/)
  • ngFormBuilder - (http://formio.github.io/ngFormBuilder/)
  • ngFormioHelper - A helper library that enables rapid development of Data Management applications.
  • ngFormioGrid - A data grid to visualize data (like Excel) within a form.

React

  • React Library - Form Renderer + Helper libraries to rapidly build data management applications in React.
  • React Starter Kit - A starter kit to get a Form.io app up and running quickly with Form.io

Angular 2

Other Libraries

  • CLI Tool - A command line interface which allows for advanced functions.
  • Node.js Library - A node.js JavaScript API library for working with Form.io API’s.
  • Form Viewer - A simple application to view forms and submissions (This is the code behind https://formview.io).
  • PHP Plugin - A PHP API library for working with Form.io API’s.

Example Applications

We have also provided a number of example applications which you can use as a reference as well as a starting point for your application.

Angular 1

React

Angular 2

  • COMMING SOON

Building the Application

Once you get your application project started, you are now ready to start building. If you started with one of the Form.io Application Templates, then the first thing you will want to do is clone it on your local machine and then start the process of building the application.

To do this, you will need Node.js installed. See the nodejs installation page for information on how to do this. We recommend installing the latest LTS version of Node on your machine.

You will also need git, a source code manager. Many operating systems come with git pre-installed. If you don’t have it already, you can get it at https://git-scm.com/.

Once you have node and git installed, you are ready to copy down the application repository and make customizations.

The Preview window has the URL of the template repo used for the preview. Copy that URL and do a git clone. For example:

  git clone git@github.com:formio/formio-app-todo.git

Inside the /src/config.js file you will need to set the APP_URL which says where your project is on form.io. This is the url at the top of your project page or it can be found on the Preview page.

  var APP_URL = 'https://todo.form.io';

Then run the following commands which will download all dependencies and start a local server.

  npm install -g gulp
  npm install
  gulp serve

You can now make any modifications to the application you need and preview them locally on your computer. Form modifications are still done on form.io. For a detailed example of how to build a real application, we recommend taking a look at the 30 minute guide which provides a complete walkthrough of creating a new application on Form.io.

Deploying an Application

Once finished making modifications to an app, it is time to deploy it to a website. There are two steps to this. Building the app and deploying the dist folder to a server.

Building the App is relatively straightforward. If you have already set up the tools in the above section for modifying your app you should have Node, Git and Gulp installed. Then run this command.

  gulp build

This will update the /dist folder with any changes you have made to the app.

Deploying the app is as simple as copy the contents of the /dist folder to any server capable of serving files. This can be an Apache, Nginx or other web server. It can also be any other type of CDN such as Amazon S3 or Github pages. There are no special requirements beyond being able to serve files.

Once copied to the server the app should be accessible on the internet. The app will use form.io to manage all of the API and data. If you would like to host your own version of the form.io server, you can either check out the open source version or our docker deployments for enterprise.

Bootstrap existing Apps

Once you have a project developed, you can now create a mechanism where that app can be rapidly boostrapped into a new deployment. This allows you to build your own Application Template and share that within Github for others to deploy. This uses the Form.io CLI Tool to download the files from Github, then use the project.json export, create that project on Form.io, configure the app to point to the newly generated API, and then serve the application locally. As an example, you can quickly “bootstrap” the Service Tracker application by typing the following commands in your terminal.

  npm install -g formio-cli
  formio bootstrap formio/formio-app-servicetracker

In this example, the formio/formio-app-servicetracker is the Github domain path for the project @ https://github.com/formio/formio-app-servicetracker. The formio bootstrap command downloads the project from Github to your local machine, uses the /dist/project.json file to create the project on Form.io, and then assigns the /dist/config.js file to point to that generated API. All within one single command.

Creating your own Application Template

To generate your own application template, you need to do the following.

  • Export your Project within Form.io as a project.json file.
  • Include that file within your /src folder.
  • Create a /src/config.template.js file which will use the {{ protocol }}, {{ path }}, and {{ host }} settings. See config.template.js for an example.
  • Build the project so it creates these files within the dist folder, and commit that folder in your repo.
  • Add the formio declaration in your project.json pointing to the root folder. Here is an example

Once you do this, you should now be able to run the formio deploy command on your own Github domain to dynamically clone your application!

Congratulations, you are now a Form.io Rockstar!