HelpBot Assistant

How can I help you?

Customize the Form Designer Toolbar in React PDF Viewer

4 Mar 20266 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 React example customizing the form designer toolbar.

Prerequisites

Steps

1. Show or hide Form Designer toolbar at initialization

Set the isFormDesignerToolbarVisible property on PDF Viewer instance to true or false to control initial visibility.

import React from 'react';
import { PdfViewerComponent, Toolbar, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export default function App() {
    return (
        <PdfViewerComponent
            ref={(scope) => { pdfviewer = scope; }}
            id="PdfViewer"
            isFormDesignerToolbarVisible={true}
            documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
            resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
            style={{ height: '500px', width: '100%' }}>
            <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]} />
        </PdfViewerComponent>
    );
}

2. Show or hide form designer toolbar at runtime

Use the isFormDesignerToolbarVisible API on the viewer’s instance on a custom method to toggle form designer visibility at runtime.

  • TS
    • pdfviewer.isFormDesignerToolbarVisible = true;

    3. Show or hide form designer toolbar items

    Use formDesignerToolbarItems and supply an ordered array of FormDesignerToolbarItem names.

    <PdfViewerComponent
    toolbarSettings={{
        formDesignerToolbarItems: [
            'TextboxTool', 'PasswordTool', 'CheckBoxTool', 'RadioButtonTool',
            'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
        ]
    }}>
</PdfViewerComponent>

    Complete example:

    import { RefObject, useRef, useState } from 'react';
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
    ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    const viewer: RefObject<PdfViewerComponent> = useRef(null);
    const [show, setShow] = useState(true);
    const hideFormDesignerToolbar = () => {
        viewer.current.isFormDesignerToolbarVisible = !show;
        setShow(!show);
    }
    return (
        <div>
            <button onClick={hideFormDesignerToolbar}>Hide Form Designer Toolbar</button>
            <PdfViewerComponent
                ref={viewer}
                id="PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
                toolbarSettings={{
                    formDesignerToolbarItems: [
                        'TextboxTool', 'RadioButtonTool', 'CheckBoxTool',
                        'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
                    ]
                }}
                isFormDesignerToolbarVisible={true}
                style={{ height: '500px', width: '100%' }}
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]} />
            </PdfViewerComponent>
        </div>
    );
}

    Expected result

    Troubleshooting