Skip to content

Form Manager

Jump to bottom
Travis Tidwell edited this page Mar 2, 2023 · 10 revisions

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'}}]})exportclassFormModule{}

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}}]})exportclassFormModule{}

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}}]})exportclassFormModule{}

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)}])]})exportclassMyModule{}

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'})exportclassIndexComponentextendsFormManagerIndexComponent{}

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'}}]})exportclassFormModule{}

Here is a list of all of the components that can be overridden in the way described above.

KeyBase ComponentDescription
formIndexFormManagerIndexComponentThe form index page which shows the list of forms.
formCreateFormManagerEditComponentThe form create page when you are building a new form.
formFormManagerFormComponentThe abstract form view that provides the navigation around a Form view, edit, and delete.
formViewFormManagerViewComponentThe form view page when you are viewing a single form. This could also be consider the "Submission" create page.
formEditFormManagerEditComponentThe page when you are editing an existing form.
formDeleteFormManagerDeleteComponentThe page when you are deleting a form.
submissionIndexSubmissionIndexComponentThe submission index page which shows a list of all submissions in the form.
submissionSubmissionComponentThe submission abstract view which provides navigation ui around the view, edit, and delete pages for a submission.
submissionViewSubmissionViewComponentThe submission view page which shows the submission.
submissionEditSubmissionEditComponentThe submission edit page which shows when the submission is being edited.
submissionDeleteSubmissionDeleteComponentThe 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

Home

Clone this wiki locally