Customize the Form Designer Toolbar in React PDF Viewer

23 Jul 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 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 property on the viewer’s instance 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