How to Reset Form if "Set Form Field" is Pressed in React PDF Viewer?

5 mins read

This article explains how to allow unselecting or resetting the selected form field mode when the “Set Form Field” button is pressed in a Syncfusion React PDF Viewer component within a React application. After following the steps in this guide, users will be able to reset or unselect any previously selected form field mode, allowing for a fresh setup when needed.

Solution:

In this solution, we will demonstrate how to utilize Syncfusion’s PDF Viewer component to allow for resetting the form field selection when the user presses the “Set Form Field” button. The solution involves using the form designer module to control form field behavior and prevent unwanted form selections.

Prerequisites:

Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your React project. Follow the Getting Started with Syncfusion PDF Viewer for React guide if you haven’t already.
Basic Knowledge of React: Familiarity with React components and the basic setup of React projects will help you follow along with the implementation.

Code Snippets

index.js

Import Necessary Modules

First, import the necessary components from the Syncfusion library in your index.js:

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
  Inject,
} from '@syncfusion/ej2-react-pdfviewer';

Implement the PDF Viewer and “Set Form Field” Button

Now, create the PDF viewer and implement the logic for the “Set Form Field” button. When clicked, this button will allow you to set the form field mode to “Textbox” and reset any previously selected form field mode.

function Default() {

  const pageMouseover = (args) => {
    console.log(args);
    const viewer = getViewerInstance();
    if (
      viewer.isFormDesignerToolbarVisible &&
      document.getElementById('FormField_helper_html_element')
    ) {
      const formFieldElement = document.getElementById(
        'FormField_helper_html_element'
      );
      viewer.designerMode = false;
      if (formFieldElement) {
        formFieldElement.remove();
      }
      viewer.tool = '';
    }
  };
  const SetFormField = () => {
    const viewer = getViewerInstance();
    if (viewer) {
      viewer.formDesignerModule.setFormFieldMode('Textbox');

      viewer.designerMode = false;
    }
  };

  // Utility function to get the PDF Viewer instance
  const getViewerInstance = () => {
    return document.getElementById('container')?.ej2_instances[0];
  };

  return (
    <div>
      <div className="control-section">
        <button onClick={SetFormField}>Set Form Field</button>
        <div className="flex-container">
        </div>
        {/* Render the PDF Viewer */}
        <PdfViewerComponent
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
          style={{ height: '640px' }}
          pageMouseover={pageMouseover}
          isFormDesignerToolbarVisible="true"
        >
          <Inject
            services={[
              Toolbar,
              Magnification,
              Navigation,
              LinkAnnotation,
              BookmarkView,
              ThumbnailView,
              Print,
              TextSelection,
              TextSearch,
              Annotation,
              FormFields,
              FormDesigner,
              PageOrganizer,
            ]}
          />
        </PdfViewerComponent>
      </div>
    </div>
  );
}

export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Key Features Used in the Code:

Form Designer Module: The formDesignerModule.setFormFieldMode(‘Textbox’) function sets the form field mode to “Textbox”. This allows users to reset the form field type when they click the “Set Form Field” button, ensuring a fresh setup.
Form Designer Toolbar Visibility: The isFormDesignerToolbarVisible=“true” property enables the visibility of the Form Designer toolbar, allowing users to interact with form fields and design them directly within the viewer.
Page Mouseover Event Handling: The pageMouseover event listener ensures that if any form designer elements are present, they are cleared or reset when the mouse hovers over the page, preventing accidental form field modifications.
Interactive Button for Setting Form Field Mode: The “Set Form Field” button triggers the resetting of form fields to the specified mode (Textbox in this case). It enables users to easily reset and configure form fields according to their needs.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

We hope you enjoyed learning how to reset the form if “Set Form Field” is pressed in React PDF Viewer.

You can refer to React PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer Example to understand how to create and manipulate data

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)