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 '@formio/angular/grid';
import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from '@formio/angular/manager';

@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.

Configurations

There are a few configurations that can be introduced to the Form Manager that will enable the following special features to the Form Manager

Submission Drafts

This feature enables the ability for end users to have their form submissions saved as they are filling them out, so that they can leave and return and the submission picks up where they left off.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormioGrid } from '@formio/angular/grid';
import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from '@formio/angular/manager';
import { IndexComponent } from './index/index.component';

@NgModule({
  imports: [
    CommonModule,
    FormioGrid,
    FormManagerModule,
    RouterModule.forChild(FormManagerRoutes())
  ],
  declarations: [],
  providers: [
    FormManagerService,
    {provide: FormManagerConfig, useValue: {
      tag: 'common',
      saveDraft: true
    }}
  ]
})
export class FormModule { }

Enable Form Search

This feature will enable a search capability within the form list view so that you can easily search the forms within the list.

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',
      includeSearch: true
    }}
  ]
})
export class FormModule { }

Mounting the Form Manager

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: () => import('./form/form.module').then(m => m.FormModule)
      }
    ])
  ]
})
export class MyModule {}

Overriding pages

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.

Working example

For a working example of how this works, please check out the Angular Demo Application