Syncfusion AI Assistant

How can I help you?

Form designer toolbar customization

12 Feb 20262 minutes to read

Customize which tools appear in the form designer toolbar, control their order, and toggle visibility programmatically.

Show or hide the form designer toolbar

Toggle the form designer toolbar using the EnableFormDesigner property.

Example: disable the form designer toolbar.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 EnableFormDesigner="false" Height="100%" Width="100%" >
</SfPdfViewer2>

Customize form designer toolbar items

Use PdfViewerToolbarSettings to specify which form-design tools are shown and their order. The property accepts a list of FormDesignerToolbarItems values; only listed items are rendered, and the displayed order follows the list sequence.

Example: configure a custom set of form designer tools.

<SfPdfViewer2 @ref="PdfViewerInstance" EnableFormDesigner="true" 
                  DocumentPath="wwwroot/data/Form_Designer.pdf"
                  Height="650px"
                  Width="100%">          
                  <!-- Configuring the Form Designer Toolbar items -->
                  <PdfViewerToolbarSettings FormDesignerToolbarItems="FormDesignerToolbarItems"></PdfViewerToolbarSettings>
</SfPdfViewer2>

@code {
    // Reference to the SfPdfViewer2 instance
    SfPdfViewer2 PdfViewerInstance { get; set; }

    // Define a list of form designer toolbar items to be displayed and usable
    List<FormDesignerToolbarItem> FormDesignerToolbarItems { get; set; } = new List<FormDesignerToolbarItem>() 
    {
        FormDesignerToolbarItem.TextBox,   
        FormDesignerToolbarItem.CheckBox,  
        FormDesignerToolbarItem.ListBox,   
        FormDesignerToolbarItem.Delete    
    };
}

Refer to the image below for the desktop view.

Form designer toolbar with selected tools on desktop

Refer to the image below for the mobile view.

Form designer toolbar with selected tools on mobile

View the sample on GitHub.

See also