1004880: Forms Import Statement Alignment and Corrections

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/custom-data.md

@@ -30,16 +30,6 @@ This page explains how to:
 You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
 
 ```ts
-import { PdfViewer, FormDesigner, FormFields, Toolbar, Navigation, Magnification, TextSelection } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Navigation, Magnification, TextSelection, FormFields, FormDesigner);
-
-const viewer = new PdfViewer({
-  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
-viewer.appendTo('#pdfViewer');
-
 viewer.documentLoad = () => {
   const meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' };
   viewer.formDesignerModule.addFormField('Textbox', {

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-constrain.md

@@ -37,18 +37,6 @@ The following flags are supported in the PDF Viewer:
 Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-         TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-                 TextSelection, Annotation, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
-pdfviewer.appendTo('#PdfViewer');
-
 //Use this setting to make Read-only as Default for new Textbox fields
 //pdfviewer.textFieldSettings = { isReadOnly: true }; 
 
@@ -80,22 +68,6 @@ Use the **isRequired** property to mark form fields as mandatory. To enforce thi
 If required fields are empty, validation can prevent further actions.
 
 ```ts
-import {
-  PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
-  TextFieldSettings
-} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(
-  Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields
-);
-
-// Create and configure the viewer
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
 // 1) Default for new Textbox fields
 pdfviewer.textFieldSettings = { isRequired: true };
 
@@ -126,23 +98,6 @@ pdfviewer.appendTo('#pdfViewer'); // Ensure an element with id="pdfViewer" exist
 Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document.
 
 ```ts
-import {
-  PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
-  SignatureFieldSettings
-} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(
-  Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields
-);
-
-// Create and configure the viewer
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
-
 // 1) Default for new signature fields
 pdfviewer.signatureFieldSettings = { isPrint: false };
 
@@ -186,18 +141,6 @@ You can apply or modify form field flags in the following ways.
 ### Apply flags When Creating Fields
 Pass the flags properties in the settings object when creating form fields using **addFormField()**.
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
-         BookmarkView, TextSelection, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
-                 BookmarkView, TextSelection, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
-pdfviewer.appendTo('#PdfViewer');
-
 pdfviewer.documentLoad = () => {
     // Read-only Textbox that is printed but not required
     pdfviewer.formDesignerModule.addFormField('Textbox', {
@@ -225,18 +168,6 @@ pdfviewer.documentLoad = () => {
 Use the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method to modify constraint values on existing form fields.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-         TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-                 TextSelection, Annotation, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
-});
-pdfviewer.appendTo('#PdfViewer');
-
 pdfviewer.documentLoad = () => {
     // Add a sample textbox
     pdfviewer.formDesignerModule.addFormField('Textbox', {
@@ -261,15 +192,6 @@ pdfviewer.documentLoad = () => {
 You can configure default flag values so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This helps ensure consistent behavior for all newly created fields.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
-         BookmarkView, TextSelection, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
-                 BookmarkView, TextSelection, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
-pdfviewer.appendTo('#PdfViewer');
-
 // Textbox fields will be editable, required, and included in print by default
 pdfviewer.textFieldSettings = {
     isReadOnly: false,

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-designer.md

@@ -48,15 +48,33 @@ Designed form fields can be saved into the PDF document and printed with their a
 To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, 
- FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+import {
+  PdfViewer,
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch
+);
 let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
-pdfviewer.enableFormDesigner= false,
+pdfviewer.documentPath =
+  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl =
+  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.enableFormDesigner = false;
 pdfviewer.appendTo('#PdfViewer');
 ```
 
@@ -90,16 +108,33 @@ Each toolbar item allows users to place the corresponding form field by selectin
 Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-ThumbnailView, BookmarkView, TextSelection, TextSearch, 
-FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
+import {
+  PdfViewer,
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch
+);
 let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.documentPath =
+  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl =
+  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.enableFormDesigner = false;
 pdfviewer.appendTo('#PdfViewer');
 ```
 
@@ -114,23 +149,11 @@ You can control the visibility of the Form Designer toolbar using the [isFormDes
 - Hide the toolbar to provide cleaner viewing experience
 
 ```html
-<div id="PdfViewer" style="height:600px;width:100%;"></div>
-
 <!-- Buttons to toggle the Form Designer toolbar -->
 <button id="showDesignerBtn">Show Form Designer Toolbar</button>
 <button id="hideDesignerBtn">Hide Form Designer Toolbar</button>
 ```
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, 
- FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
-pdfviewer.appendTo('#PdfViewer');
-
 //  Wire up buttons 
 document.getElementById('showDesignerBtn')!.onclick = () => {
   pdfviewer.isFormDesignerToolbarVisible=true;
@@ -151,14 +174,6 @@ This customization helps you limit the available tools and simplify the user int
 - Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
 
 ```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, 
- FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
 //Customize the Built-in Form Designer Toolbar
 pdfviewer.toolbarSettings = {
     formDesignerToolbarItems: [
@@ -172,7 +187,6 @@ pdfviewer.toolbarSettings = {
         "DeleteTool"
     ]
 };
-pdfviewer.appendTo('#PdfViewer');
 ```
 
 ## Move, Resize, and Edit Form Fields