-
Notifications
You must be signed in to change notification settings - Fork 470
Form Manager
The Form Manager is a complete Form Manager application that can be embedded within your own application. This includes all of the routes and business logic for the following.
- Creating forms (Form Building)
- Listing forms
- Editing forms
- Deleting forms
- Filling out forms
- Viewing submissions
- Editing submissions
- Deleting submissions.
This manager application can be added to your application by first creating a new FormManager module within your application.
ng g module form
Now, within the generated file, we can add the configurations for this manager as follows.
src/app/form/form.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormioGrid } from 'angular-formio/grid';
import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from 'angular-formio/manager';
import { IndexComponent } from './index/index.component';
@NgModule({
imports: [
CommonModule,
FormioGrid,
FormManagerModule,
RouterModule.forChild(FormManagerRoutes())
],
declarations: [],
providers: [
FormManagerService,
{provide: FormManagerConfig, useValue: {
tag: 'common'
}}
]
})
export class FormModule { }
Notice we need to provide the FormManagerService along with the FormManagerConfig which we can provide our own value to determine which tag we use for the form manager filters.
Now that we have a module, we can mount this form manager within our application using the following lazy loaded route configuration.
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'form',
loadChildren: './form/form.module#FormModule'
}
])
]
})
export class MyModule {}
Within the Form Manager, all of the pages can be overridden and replaced with an extended version of your own. This allows you to provide your own UI around some of the pages within the Form Builder. For example, lets say you wish to change the Form Index page. You can provide the following code.
ng g component form/index
app/src/form/index/index.component.ts
import { Component } from '@angular/core';
import { FormManagerIndexComponent } from 'angular-formio/manager';
@Component({
templateUrl: './index.component.html'
})
export class IndexComponent extends FormManagerIndexComponent {}
index.component.html
<h3>My own custom heading here!</h3>
<formio-grid
[formio]="service.formio"
[gridType]="'form'"
[query]="{tags: config.tag, type: 'form'}"
(rowAction)="onAction($event)"
(rowSelect)="onSelect($event)"
[createText]="'Create Form'"
(createItem)="onCreateItem()"
></formio-grid>
src/app/form/form.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormioGrid } from 'angular-formio/grid';
import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from 'angular-formio/manager';
import { IndexComponent } from './index/index.component';
@NgModule({
imports: [
CommonModule,
FormioGrid,
FormManagerModule,
RouterModule.forChild(FormManagerRoutes({
formIndex: IndexComponent
}))
],
declarations: [
IndexComponent
],
providers: [
FormManagerService,
{provide: FormManagerConfig, useValue: {
tag: 'common'
}}
]
})
export class FormModule { }
Here is a list of all of the components that can be overridden in the way described above.
Key | Base Component | Description |
---|---|---|
formIndex | FormManagerIndexComponent | The form index page which shows the list of forms. |
formCreate | FormManagerEditComponent | The form create page when you are building a new form. |
form | FormManagerFormComponent | The abstract form view that provides the navigation around a Form view, edit, and delete. |
formView | FormManagerViewComponent | The form view page when you are viewing a single form. This could also be consider the "Submission" create page. |
formEdit | FormManagerEditComponent | The page when you are editing an existing form. |
formDelete | FormManagerDeleteComponent | The page when you are deleting a form. |
submissionIndex | SubmissionIndexComponent | The submission index page which shows a list of all submissions in the form. |
submission | SubmissionComponent | The submission abstract view which provides navigation ui around the view, edit, and delete pages for a submission. |
submissionView | SubmissionViewComponent | The submission view page which shows the submission. |
submissionEdit | SubmissionEditComponent | The submission edit page which shows when the submission is being edited. |
submissionDelete | SubmissionDeleteComponent | The submission delete page shown when you are deleting a submission. |