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 using the following module.

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormManagerModule, FormManagerService, FormManagerConfig } from 'angular-formio/manager';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'forms',
        loadChildren: () => FormManagerModule.forChild()
      }
    ])
  ]
})
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. Overriding a page simply requires that you create a component that extends one of the Base components, and then register it within the forChild method when you mount the module. For example, lets say you wish to change the Form Index page. You can provide the following code.

formindex.component.ts

import { Component } from '@angular/core';
import { FormManagerIndexComponent } from 'angular-formio/manager';

@Component({
  templateUrl: './formindex.component.html'
})
export class DemoFormManagerIndexComponent extends FormManagerIndexComponent {}

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

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormManagerModule, FormManagerService, FormManagerConfig } from 'angular-formio/manager';
import { DemoFormManagerIndexComponent } from './formindex.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'forms',
        loadChildren: () => FormManagerModule.forChild({
          formIndex: DemoFormManagerIndexComponent
        })
      }
    ])
  ]
})
export class MyModule {}

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.