Submission Table
Now that you can render forms within your application, and mount resources, and setup authentication, the next thing you will want to do within a Data Management application is to view all of your submission data within a data grid display. This is done with the Data Grid component of this library, where you can display the results using the simple component code as follows.
<formio-grid src="https://examples.form.io/example"></formio-grid>
and it will render like the following.
To add the Submission Table to your project, you simply need to include it and add it to your module like so.
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main';
import { FormioGridModule } from 'angular-formio/grid';
import { AppConfig, AuthConfig, AuthService } from '../config';
export const routes: Routes = [
{
path: 'home',
component: MainComponent
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/home',
pathMatch: 'full'
}
];
@NgModule({
imports: [
FormioGridModule,
RouterModule.forRoot(routes)
],
declarations: [
MainComponent
],
bootstrap: [
MainComponent
]
})
export class AppModule {}You can now render the submissions of a form using the following code.
@Component({
template: '<formio-grid src="https://examples.form.io"><formio-grid>'
})
class MainComponent {}The Grid can also be used to display a list of forms by placing the grid in "form" mode like so.
<formio-grid src="https://myproject.form.io" [gridType]="form"></formio-grid>
Here are a list of all inputs that the Grid module supports.
| Property | Type | Description |
| src | String | The API source of either the Project URL (for form grid modes) or the Form API url (for submission grid types) |
| query | Object | The URL query object (key-value pairs) to provide to the API url that is used to load the records |
| refresh | EventEmitter | Used to trigger the grid to refresh its records. |
| gridType | String | Sets the grid type. Either "form" or "submission". Defaults to "submission" if none provided. |
| components | Object | Allows you to provide your own custom GridHeader, GridRow, and GridFooter components to customize the behavior and UI of the grid. |
| formio | Formio | A Formio instance that provides an interface if you do not wish to have it created dynamically with the "src" parameter. |
| createText | String | The string to show for the "Create Form" text when displaying the grid in "form" mode. |
The following outputs are supported.
| Property | Description |
| select | Alias for "rowSelect". Called when the user has "selected" a row of the grid. |
| rowSelect | Called when the user has "selected" a row of the grid. |
| rowAction | Called when the user selects an "action" button within the row. |
| createItem | Called when someone clicks on the "create" button within the grid. |
| error | Called when an error occurs loading the grid. |