Merge pull request #2146 from syncfusion-content/1004880-FormsCorrectionsTS

1004880: Forms Import Statement Alignment and Corrections

Author: AnanthaGokulaRaman

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

@@ -9,7 +9,7 @@ documentation: ug
 
 # Add Custom Data to PDF Form Fields in TypeScript PDF Viewer
 
-The Syncfusion **TypeScript PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+The **Syncfusion TypeScript PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
 
 The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
 
@@ -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