Customize the Form Designer Toolbar in ASP.NET Core PDF Viewer

18 Sep 20262 minutes to read

Overview

This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order.

Outcome: A working ASP.NET Core example customizing the form designer toolbar.

Prerequisites

Steps

1. Show or hide Form Designer toolbar at initialization

Toggle the form designer toolbar programmatically during initialization or at runtime.

Use the enableFormDesigner property or the showFormDesignerToolbar method to change visibility.

Example using the enableFormDesigner property:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enableFormDesigner="true">
    </ejs-pdfviewer>
</div>

2. Show or hide Form Designer toolbar at runtime

Set the enableFormDesigner property on the viewer’s instance to toggle form designer visibility at runtime.

3. Show or hide form designer toolbar items

Use formDesignerToolbarItems and supply an ordered list of FormDesignerToolbarItem values.

Configure the toolbarSettings property to specify which form design tools are available. The property accepts a list of FormDesignerToolbarItem values; included items are displayed and rendered in the order listed while omitted items are hidden. This yields a streamlined form-design experience across devices.

Example customizing the form designer toolbar:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { FormDesignerToolbarItems = "TextboxTool PasswordTool CheckBoxTool RadioButtonTool DropdownTool ListboxTool DrawSignatureTool DeleteTool" })">
    </ejs-pdfviewer>
</div>

Expected result

  • The form designer toolbar appears (or is hidden) according to enableFormDesigner.
  • Only the listed tools appear.

Troubleshooting

  • Toolbar or form designer tools do not appear
  • Form designer tools not responding to clicks
    • Cause: Form designer module not fully loaded or document doesn’t support form fields.
    • Solution: Ensure the document is loaded before enabling form designer mode, and verify the PDF supports form fields.