diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 10694e6b8..58ae5bb5b 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -128,6 +128,24 @@
  • To Azure Active Directory
    • +
  • Toolbar Customization + +
    • +
  • Interactive PDF Navigation + +
  • Accessibility
  • Toolbar
  • Navigation
    • @@ -144,23 +162,39 @@
  • Comments
  • Ink Annotation
  • Line Angle Constraint
    • +
  • Handwritten signature
    • +
  • Annotations Events
    • +
  • Annotations in Mobile view
    • -
  • Hand Written Signature
  • Interaction Mode
  • Form Designer +
    • +
  • Form Filling
    • +
  • Organize Pages +
    • -
  • Organize Pages
  • Print
  • Download
    • +
  • Event
    • +
  • Text Selection
  • Globalization
  • Server Actions
    • -
  • How To +
  • How To
  • Troubleshooting diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md index 47aa968b8..34917759e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md @@ -1,29 +1,28 @@ --- layout: post title: Accessibility with EJ2 ASP.NET Core PDF Viewer | Syncfusion -description: Learn here all about accessibility in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +description: Learn here all about accessibility in ASP.NET Core PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET Core documentation: ug --- -# Accessibility in Syncfusion® PDF Viewer components +# Accessibility in Syncfusion PDF Viewer component -The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The PDF Viewer component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also integrates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used for accessibility evaluation. -The accessibility compliance for the PDF Viewer component is outlined below. +Below is an outline of the accessibility compliance for the PDF Viewer component: | Accessibility Criteria | Compatibility | -| -- | -- | -| [WCAG 2.2 Support]| Yes | -| [Section 508 Support] | Yes | -| [Screen Reader Support]| Yes | -| [Right-To-Left Support]| Yes | -| [Color Contrast] | Yes | -| [Mobile Device Support]| Intermediate | -| [Keyboard Navigation Support]| Yes | -| [Accessibility Checker Validation] | Yes | -| [Axe-core Accessibility Validation]| Yes | +| --- | --- | +| WCAG 2.2 Support | Yes | +| Section 508 Support | Yes | +| Screen Reader Support | Yes | +| Right-To-Left Support | Yes | +| Color Contrast | Yes | +| Mobile Device Support | Intermediate | +| Keyboard Navigation Support | Yes | +| Accessibility Checker Validation | Yes | +| Axe-core Accessibility Validation | Yes | +``` + +N> The icons are embedded in the font file used in the previous code snippet. + +**Step 5:** Add the following scripts to perform user interactions in the PDF Viewer: + +{% tabs %} +{% highlight js tabtitle="Standalone" %} + + + +{% endhighlight %} +{% highlight js tabtitle="Server-Backed" %} + + + +{% endhighlight %} +{% endtabs %} + +Sample: +[https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/customtoolbar#/tailwind](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/customtoolbar#/tailwind) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar-customization.md new file mode 100644 index 000000000..bc036516b --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar-customization.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Form Designer Toolbar Customization in ASP.NET Core PDF Viewer Component | Syncfusion +description: Learn here all about form designer toolbar customization in Syncfusion ASP.NET Core PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET Core +documentation: ug +--- + +# Form Designer Toolbar Customization + +The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear. + +## Show or hide the form designer toolbar + +Show or hide the form designer toolbar programmatically during initialization or at runtime. + +Use the [EnableFormDesigner](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method to toggle visibility. + +The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## How to customize the form designer toolbar + +Choose which tools appear and control their order in the form designer toolbar. + +Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html/) with the [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems/) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices. + +The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md new file mode 100644 index 000000000..4bcb09f2c --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md @@ -0,0 +1,121 @@ +--- +layout: post +title: Mobile Toolbar Interface in ASP.NET Core PDF Viewer control | Syncfusion +description: Learn All About the Mobile Toolbar Interface in Syncfusion ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET Core +documentation: ug +--- +# Mobile Toolbar Interface in ASP.NET Core PDF Viewer control + +The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. + +## Mobile Mode Toolbar Configuration +In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode: + +![Mobile toolbar with primary PDF interaction options](../images/mobileToolbar.png) + +### Main Toolbar Options: + +**OpenOption:** Tap to load a PDF document. + +**SearchOption:** Access the search bar to find text within the document. + +![Search bar displayed for finding text within a PDF](../images/searchOption.png) + +**UndoRedoTool:** Quickly undo or redo any annotations made. + +**OrganizePagesTool:** Enable or disable page organization features to modify document pages. + +![Page organization interface for modifying PDF pages](../images/organizePages.png) + +**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations. + +![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](../images/editAnnotation.png) + + +N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer. + +### More Options Menu: +When you open the "more options" menu, you will see additional actions such as: + +**DownloadOption:** Tap to download the currently opened PDF document. + +**BookmarkOption:** Allows you to view bookmarks within the document. + +![More options menu showing additional actions like download and bookmark](../images/more-options.png) + +## Enabling Desktop Mode in Mobile + +The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms. + +### Steps to Enable Desktop Mode: + +**Step 1:** Set `enableDesktopMode` to true in the API configuration. + +**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Enable Scrolling in Desktop Mode with Touch Gestures + +To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Print Option Not Available + +The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API. + +### How to Use Print on Mobile: + +**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device. + +**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device. + +N> In mobile mode, the print functionality will not be available unless desktop mode is enabled. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar-customization.md new file mode 100644 index 000000000..be97293e3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar-customization.md @@ -0,0 +1,322 @@ +--- +layout: post +title: Primary Toolbar Customization in ASP.NET Core PDF Viewer Component | Syncfusion +description: Learn here all about primary toolbar customization in Syncfusion ASP.NET Core PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET Core +documentation: ug +--- + +# Primary Toolbar Customization in PDF Viewer Component + +The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items. + +## Show or hide the primary toolbar + +Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableToolbar) property or the [showToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar. + +Show or hide the toolbar using the `enableToolbar` property: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to show or hide the toolbar using the `showToolbar` method. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + + + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + + + +{% endhighlight %} +{% endtabs %} + +## Show or hide toolbar items + +The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar. + +* Show or hide toolbar items using toolbarSettings: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +* Show or hide toolbar items using showToolbarItem: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + + +
    + + + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + + +
    + + + +{% endhighlight %} +{% endtabs %} + +## Customize the built-in toolbar + +The PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in the toolbar. + +- Add: Define new items using **CustomToolbarItemModel** and include them with existing items via the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Handle clicks in the toolbarClick event. + +- Show/Hide: Show or hide existing items using the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Predefined toolbar items are available via [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems). + +- Enable/Disable: Toolbar items can be enabled or disabled using enableToolbarItem. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +@page "{handler?}" +@model IndexModel +@{ + ViewData["Title"] = "Home page"; +} + +
    + + +
    + + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +@page "{handler?}" +@model IndexModel +@using Syncfusion.EJ2.PdfViewer +@using Newtonsoft.Json +@{ + ViewData["Title"] = "Home page"; + CustomToolbarItems customToolbarItems = new CustomToolbarItems(); + var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; + customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; + PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() + { + ShowTooltip = true, + ToolbarItems = customToolbarItems.ToolbarItems + }; +} + +
    + + +
    + + + + + + +{% endhighlight %} +{% endtabs %} + +N> Default toolbar items: ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align property + +The Align property specifies the alignment of a toolbar item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip property + +The Tooltip property sets the tooltip text for a toolbar item. Tooltips provide additional information when a user hovers over the item. + +### CssClass property + +The CssClass property applies custom CSS classes to a toolbar item for custom styling. + +### Prefix property + +The Prefix property sets the CSS class or icon added as a prefix to the existing content of the toolbar item. + +### ID property + +The Id property of a CustomToolbarItemModel uniquely identifies a toolbar item and is required for customization. + +When defining or customizing toolbar items, assign a specific and descriptive Id to each item. +These properties are commonly used when defining custom toolbar items with the CustomToolbarItemModel in the context of the Syncfusion PDF Viewer. When configuring the toolbar using the ToolbarSettings property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md index b724676b5..a4f4de080 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md @@ -4,7 +4,6 @@ title: Toolbar in ASP.NET Core Pdfviewer Component|Syncfusion description: Learn here all about Toolbar in Syncfusion ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Toolbar -publishingplatform: ASP.NET Core documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md index aedb51e6c..76d41cd66 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md @@ -1,7 +1,7 @@ --- layout: post -title: Document Loading Issues in Version 23.1 or Newer ASP.NET Core Pdfviewer Component -description: Learn here all about troubleshooting Document Loading Issues in Version 23.1 or newer in ASP.NET Core Pdfviewer of Syncfusion Essential JS 2 and more. +title: Fix document loading issues in v23.1+ for the ASP.NET Core PDF Viewer component +description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the ASP.NET Core PDF Viewer. platform: document-processing control: PDF Viewer publishingplatform: ASP.NET Core @@ -10,9 +10,9 @@ documentation: ug # Document Loading Issues in Version 23.1 or Newer -If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue: +If the document does not render in the viewer when using version 23.1 or newer, follow these steps: -1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is essential for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. +1. Call `pdfViewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly. ```html @@ -31,18 +31,18 @@ If you're experiencing problems with your document not rendering in the viewer, ``` -2. **Verify Document Source**: Confirm that the document source or URL you're trying to display is valid and accessible. Incorrect URLs or document paths can lead to loading issues. +2. Verify the document source. Ensure the URL or path is valid and accessible. -3. **Network Connectivity**: Ensure that your application has a stable network connection. Document rendering may fail if the viewer can't fetch the document due to network issues. +3. Check network connectivity. The viewer cannot fetch the document without a stable connection. -4. **Console Errors**: Use your browser's developer tools to check for any error messages or warnings in the console. These messages can provide insights into what's causing the document not to load. +4. Inspect console errors. Use browser developer tools to identify issues. -5. **Loading Sequence**: Make sure that you're calling `viewer.dataBind()` and initiating document loading in the correct sequence. The viewer should be properly initialized before attempting to load a document. +5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`. -7. **Update Viewer**: Ensure that you're using the latest version of the viewer library or framework. Sometimes, issues related to document loading are resolved in newer releases. +6. Update to the latest viewer version. Issues may be resolved in newer releases. -8. **Cross-Origin Resource Sharing (CORS)**: If you're loading documents from a different domain, ensure that CORS headers are correctly configured to allow cross-origin requests. +7. Configure CORS correctly for cross-domain documents. -9. **Content Security Policies (CSP)**: Check if your application's Content Security Policy allows the loading of external resources, as this can affect document loading. Refer [here](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) to troubleshoot. +8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the [Content Security Policy troubleshooting guide](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) for details. -By following these troubleshooting steps, you should be able to address issues related to document loading in version 23.1 or newer, ensuring that your documents render correctly in the viewer. \ No newline at end of file +Following this checklist typically resolves document loading issues in v23.1 or newer. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/programmatically-work-with-form-field.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/programmatically-work-with-form-field.md deleted file mode 100644 index 0c6d7d883..000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/programmatically-work-with-form-field.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -layout: post -title: Programmatically Work With Form Field in ASP.NET MVC Pdfviewer Component -description: Learn here all about Programmatically Work With Form Field in Syncfusion ASP.NET MVC Pdfviewer component of Syncfusion Essential JS 2 and more. -platform: document-processing -control: Programmatically Work With Form Field -publishingplatform: ASP.NET MVC -documentation: ug ---- - - -# Programmatically work with form field - -The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are: - - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField - -## Add a form field to PDF document programmatically - -Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code. - -```html - -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("FormDesigner.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render() -
    - -``` - -## Edit/Update form field programmatically - -Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field. - -```html - -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("FormDesigner.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render() -
    - -``` - -## Delete form field programmatically - -Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code. - -```html - -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("FormDesigner.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render() -
    - -``` - -## Saving the form fields - -When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference. - -![Alt text](../images/saveformfield.gif) - -You can invoke download action using following code snippet. - -```html -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableDownload(true).DocumentPath("Hive_Succinctly.pdf").Render() -
    - - -``` - -## Printing the form fields - -When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference. - -![Alt text](../images/printformfield.gif) - -You can invoke print action using the following code snippet., - -```html -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("Hive_Succinctly.pdf").Render() -
    - - -``` - -## Open the existing PDF document - -We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference. - -![Alt text](../images/openexistingpdf.gif) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/user-interaction-with-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/user-interaction-with-form-fields.md deleted file mode 100644 index c0a903c7f..000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/formdesigner/user-interaction-with-form-fields.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -layout: post -title: User Interaction With Form Fields in ASP.NET MVC Pdfviewer Component -description: Learn here all about User Interaction With Form Fields in Syncfusion ASP.NET MVC Pdfviewer component of Syncfusion Essential JS 2 and more. -platform: document-processing -control: User Interaction With Form Fields -publishingplatform: ASP.NET MVC -documentation: ug ---- - - -# User interaction with form fields - -The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are: - - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField - -## Enable or Disable form designer toolbar - -We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property. - -```html -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableFormDesignerToolbar(true).DocumentPath("Hive_Succinctly.pdf").Render() -
    - -``` - -## Add the form field dynamically - -Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference. - -![Alt text](../images/addformfield.gif) - -## Drag the form field - -We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. - -![Alt text](../images/dragformfield.gif) - -## Resize the form field - -We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. - -![Alt text](../images/resizeformfield.gif) - -## Edit or Update the form field dynamically - -The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field. - -![Alt text](../images/generalproperties.png) - -![Alt text](../images/appearanceproperties.png) - -![Alt text](../images/dropdownproperties.png) - -## Clipboard operation with form field - -The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu. - -![Alt text](../images/clipboardformfield.png) - -## Undo and Redo - -We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions. - -```html - - -
    - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("Hive_Succinctly.pdf").Render() -
    - -``` \ No newline at end of file