Skip to content
This repository has been archived by the owner on Apr 27, 2023. It is now read-only.

Home

Jump to bottom
Travis Tidwell edited this page Jan 19, 2017 · 8 revisions

ngFormioGrid Documentation

This library is a wrapper around the UI Grid library which automatically connects to the Form.io Submission API to show the data within a form.

Basic usage example:

To use this library, you can connect to the Form URL of your form, and as long as you have the permissions to view the submissions within that form, you will see the data.

<formio-grid src="'https://examples.form.io/example'"></formio-grid>

There are many other parameters the allow you to govern the behavior of the grid, which are as follows.

Attributes Type Description
src String The url to the Form.io resource you would like to display.
columns (optional) Array By default, this grid library will add the columns that have the Table View configuration checked, however you can with this configuration provide your own columns to show within the grid. This attribute is an array of columns to add to the grid. Each object within the array represents each column, and that object can have the following properties. You may use the properties provided within the UI Grid Column Documentation, but also provide these following properties along with the column definitions.
Property Type Description
field string The field to reference in this column. Example: "data.firstName"
key string The key of the column. This is simply a unique key string to describe the column. Example "firstName".
sort object An object representing the sort criteria, in the following format. 
{
  field: 'data.email',
  direction: 'asc'
}
label string The label to provide for this column.
link boolean Turn the data into a link, which will fire the linkEvent when clicked.
linkEvent string The event to fire when the link is clicked.
linkClass string The CSS class to attach to the link element.
linkClass string The CSS class to attach to the link element.
query (optional) Object This is the filter query to pass along with the src to filter the results of the grid. Use these Resource.js queries to filter your data() These queries are based on the submission entry object. As an example, the following will filter the grid results for any submission with the field value greater than 1000. 
{
  'data.amount__gt': 1000
}
gridOptions (optional) Object The are the UI Grid options to pass into the data grid. These are identical to ui-grid. Refer to UI Grid Column Documentation to see a list of the possible options.
aggregate (optional) Array Use the Form.io Aggregate API to show the grid results. This is an array of the pipeline objects used in the grid query. See Report API for more information on how to structure this query.

Examples:

Single Form grid

<formio-grid src="'https://examples.form.io/example'"></formio-grid>

Custom Columns

<formio-grid src="'https://examples.form.io/example'" columns="[ { field: 'data.firstName', key: 'firstName', label: 'First Name }, { field: 'data.lastName', key: 'lastName', label: 'Last Name' } ]"></formio-grid>

Clone this wiki locally