Skip to content
This repository has been archived by the owner on Nov 13, 2024. It is now read-only.

Home

Jump to bottom
Travis Tidwell edited this page Jan 13, 2017 · 14 revisions

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.

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', ['ngFormioHelper'])

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

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

FormioProvider

.setBaseUrl(url);

Name Type Description
url String The base url to your Form.io account

Example: https://(your unique Form.io project ID).form.io/

Events

$scope.$on('rowView', function(event, submission){})

$scope.$on('submissionView', function(event, submission){})

$scope.$on('submissionEdit', function(event, submission){})

$scope.$on('submissionDelete', function(event, submission){})

Name Type Description
event String The event.
submission Object The result of the submission as a promise.

States

resource + 'Index'

This state contains the ng-formio-grid with all of the submissions. If you click the links inside the first column, it will take you to a tabbed template that will allow you to View/Edit/Delete that single submission.

Example: $state.go('exampleResourceIndex')

resource + '.view', resource + '.edit', resource + '.delete'

This state contains the submission that was clicked on and fired the rowView event. Now that access to the submission's id was given, the submission id must be passed in as a stateParam to the $state.go() method. The key in the stateParam method MUST be the name of the resource + "Id"

Example: #### $scope.$on('rowView', function(event, submission){ $state.go('exampleResource.view', {"exampleResourceId" : submission._id}) })

Example: #### $scope.$on('rowView', function(event, submission){ $state.go('exampleResource.edit', {"exampleResourceId" : submission._id}) })

Example: #### $scope.$on('rowView', function(event, submission){ $state.go('exampleResource.delete', {"exampleResourceId" : submission._id}) })

Clone this wiki locally