Home

ngFormioHelper Docs

This is an Angular 1 library that serves as a helper library to make it easier to build Form based applications using the Form.io platform. This includes anything from Authentication management, Resource Management, Form Building and Form Management. This library contains 4 major providers, which are as follows.

• FormioResource - Handles Form.io resource management within your application, including all CRUD operations and UI Router states.
• FormioAuth - This handles the authentication within your application as well as registers some UI Router states to handle authentication.
• FormioForms - Handles form and submission management and allows you to attach Forms to existing resources.
• FormioFormBuilder - Allows form building, form management, and submission management within your application.

Pre-requisite

Any application using this helper library will need to make sure you install the ngFormio Renderer library.

Bower installation

bower install --save ng-formio

NPM installation

npm install --save ng-formio

And then include that as a module within your Angular 1 application.

angular.module('myApp', ['formio'])

Installation

This is a library meant for Angular 1 applications which leverage UI Router for routing. We recommend reading up on the documentation for UI Router to get a very good sense for the providers provided by this helper library. To install this library you will use the following within your application.

Bower installation

bower install --save ng-formio-helper

NPM installation

npm install --save ng-formio-helper

Once this library is installed, you will then need to include it within your application as a module as follows.

angular.module('myApp', ['formio', 'ngFormioHelper'])

If you are using the FormioFormBuilder provider, then you will also need to include that module as...

angular.module('myApp', ['formio', 'ngFormioHelper', 'ngFormBuilderHelper'])

FormioProvider

Before you can use this library, you will need to ensure that your application has established the appUrl and the apiUrl of your application, the appUrl is the Form.io Project API url for your application. For example, if your application is @ https://wuhdbdzaucyashb.form.io, this is is represented as your appUrl. The apiUrl will almost always be https://api.form.io, unless you are pointing to a different server via our Docker deployments. The following API's are provided to configure these settings.

FormioProvider.setApiUrl(url);

Name	Type	Description
url	String	The api url to your Form.io deployment. Almost will always be https://api.form.io unless you are docker deployed.

FormioProvider.setAppUrl(url);

Name	Type	Description
url	String	The api url to your Form.io project.

Example

angular.module('myApp', [
  'ui.router',
  'ui.bootstrap',
  'ngFormioHelper',
  'formio',
  'ngMap'
])
.constant('AppConfig', {
  appUrl: 'https://wuhdbdzaucyashb.form.io,
  apiUrl: 'https://api.form.io',
})
.config([
  'AppConfig',
  'FormioProvider',
  'FormioAuthProvider',
  '$locationProvider',
  function(
    AppConfig,
    FormioProvider,
    FormioAuthProvider,
    $locationProvider
  ) {
    // Only use "#" for the states.
    $locationProvider.hashPrefix('');

    // Set the appUrl and the apiUrl
    FormioProvider.setAppUrl(AppConfig.appUrl);
    FormioProvider.setApiUrl(AppConfig.apiUrl);

You are now ready to configure your Resources.