Form Designer in Angular PDF Viewer

11 Feb 202610 minutes to read

When Form Designer mode is enabled in the Syncfusion Angular PDF Viewer, a default Form Designer user interface (UI) is displayed. This UI includes a built-in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.

Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.

Key Features

Add Form Fields
You can add the following form fields to the PDF:

• Text box
• Password Field
• Check box
• Radio button
• Dropdown List
• List box
• Signature field
• Initial field

Edit Form Fields
You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.

Set Field Properties
You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.

Control Field Behavior
You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.

Manage Form Fields
You can select, group or ungroup, reorder, and delete form fields as needed.

Save and Print Forms
Designed form fields can be saved into the PDF document and printed with their appearances.

Enable Form Designer

To enable form design features, inject the FormDesigner module into the PDF Viewer. After injecting the module, use the enableFormDesigner property or API to enable or disable the Form Designer option in the main toolbar (set to true to enable). Note: the standalone examples below show enableFormDesigner set to false; change this to true to enable form design in those samples.

Standalone

import { Component, OnInit } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  AnnotationService,
  TextSelectionService,
  TextSearchService,
  FormFieldsService,
  FormDesignerService,
  PdfViewerModule,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        [enableFormDesigner]="false"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public document: string =
    'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl: string =
    'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {}
}

Form Designer UI

When Form Designer mode is enabled in the Syncfusion Angular PDF Viewer, a default Form Designer user interface (UI) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.

For more information about creating and editing form fields in the PDF Viewer, refer to the Form Creation in Angular PDF Viewer documentation.

Form Designer Toolbar

The Form Designer toolbar appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:

• Text box
• Password Field
• Check box
• Radio button
• Dropdown List
• List box
• Signature field
• Initial field

Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.

Use the following code snippet to show or hide the Form Designer by injecting the Form Designer module.

Standalone

import { Component, OnInit } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  AnnotationService,
  TextSelectionService,
  TextSearchService,
  FormFieldsService,
  FormDesignerService,
  PdfViewerModule,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        [enableFormDesigner]="false"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public document: string =
    'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl: string =
    'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {}
}

For more information about creating and editing form fields in the PDF Viewer, refer to the Form Creation in Angular PDF Viewer documentation.

Show or Hide the Built-in Form Designer Toolbar

You can control the visibility of the Form Designer toolbar using the isFormDesignerToolbarVisible() property. This allows the application to display or hide the Form Designer tools in the PDF Viewer based on user or workflow requirements.

Use this property to:

• Show the Form Designer toolbar when form design is required
• Hide the toolbar to provide a cleaner viewing experience

Standalone

import { Component, ViewChild } from '@angular/core';
import { PdfViewerComponent, PdfViewerModule, ToolbarService, FormDesignerService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <button (click)="showDesigner()">Show Form Designer Toolbar</button>
    <button (click)="hideDesigner()">Hide Form Designer Toolbar</button>

    <ejs-pdfviewer #pdfViewer
      id="pdfViewer"
      [resourceUrl]="resourceUrl"
      [documentPath]="document"
      style="height: 640px; display:block;">
    </ejs-pdfviewer>
  `,
  providers: [ToolbarService, FormFieldsService, FormDesignerService],
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
  public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

  showDesigner(): void {
    if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = true; }
  }
  hideDesigner(): void {
    if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = false; }
  }
}

Customize the Built-in Form Designer Toolbar

You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the FormDesignerToolbarItems property.

This customization helps you limit the available tools and simplify the user interface.

Key Points

• Include only the toolbar items you need, in the exact order you specify.
• Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.

Standalone

import { Component } from '@angular/core';
import { PdfViewerModule, ToolbarService, FormFieldsService, FormDesignerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <ejs-pdfviewer
      id="pdfViewer"
      [resourceUrl]="resourceUrl"
      [documentPath]="document"
      [toolbarSettings]="toolbarSettings"
      style="height: 640px; display:block;">
    </ejs-pdfviewer>
  `,
  providers: [ToolbarService, FormFieldsService, FormDesignerService],
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
  public toolbarSettings: object = {
    formDesignerToolbarItems: [
      'TextboxTool',
      'PasswordTool',
      'CheckBoxTool',
      'RadioButtonTool',
      'DropdownTool',
      'ListboxTool',
      'DrawSignatureTool',
      'DeleteTool',
    ],
  };
}

Move, Resize, and Edit Form Fields

You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.

• Move a field by selecting it and dragging it to the required position.

• Resize a field using the handles displayed on the field boundary.

• Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
  For more information, see Editing Form Fields.

Deleting Form Fields

You can remove a form field from the PDF document by selecting the field and using one of the following methods:

• Click the Delete option in the Form Designer UI.
• Press the Delete key on the keyboard after selecting the form field.

The selected form field and its associated widget annotation are permanently removed from the page.
For more information, see Deleting Form Fields

See Also

• Filling PDF Forms
• Create, edit, style and remove form fields
• Grouping form fields
• Form Constraints
• Form Validation
• Custom Data
• Import/Export Form Data
• Form field events