diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 2a1565568..9ab25e061 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -552,7 +552,9 @@
  • Overview
  • Programmatic Support for Form Designer
  • UI Interactions in Form Designer
    • +
  • Form Designer in Mobile View
  • Events in Form Designer
    • +
  • Custom Font
  • Form Filling
    • diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md index c681a27f9..052e42a0a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md @@ -488,106 +488,6 @@ The following image shows selecting a checkbox field in the Blazor PDF Viewer (S N> Enable the form field interaction mode before selecting a field. For details, see [Interaction mode](./overview). -## Custom Font Support for Form Fields - -The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties. - -### Integrating Custom Font Collections into Form Fields in SfPdfViewer - -To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving. - -```cshtml -@page "/" - - - - - -@code { - SfPdfViewer2? pdfViewer; - - // Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar - internal string[] FontFamilies { get; set; } = { "Helvetica", "Courier", "Symbol", "Times New Roman", "Allura", "Playwrite CA", "Ojuju" }; - - private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"; - - public void Created() - { - // Use FallbackFontCollection to save the custom font - // Maps the font family name to its corresponding TTF file as a memory stream - pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf"))); - pdfViewer!.FallbackFontCollection.Add("Playwrite CA", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/PlaywriteCA-Regular.ttf"))); - pdfViewer!.FallbackFontCollection.Add("Ojuju", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Ojuju-Regular.ttf"))); - } -} -``` -![Custom Font Support for Form Fields in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_for_form_fields.png) - -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields). - -## Custom Font Support for Signature Fields - -The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties. - -### Integrating Custom Font Collections into Signature Fields in SfPdfViewer - -To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving. - -```cshtml -@page "/" - - - - - - -@code { - SfPdfViewer2? Viewer; - - private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf"; - - // Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar - public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" }; - - public void Created() - { - // Use FallbackFontCollection to save the custom font - // Maps the font family name to its corresponding TTF file as a memory stream - pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf"))); - pdfViewer!.FallbackFontCollection.Add("Tangerine", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Tangerine-Regular.ttf"))); - pdfViewer!.FallbackFontCollection.Add("Sacramento", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Sacramento-Regular.ttf"))); - pdfViewer!.FallbackFontCollection.Add("Inspiration", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Inspiration-Regular.ttf"))); - } -} -``` -![Custom Font Support for Signature Field in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_signature_fields.png) - -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field). - -When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment. - -The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources. - -```cshtml - -``` - ->**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources. - -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links). - ## See also * [Overview of Form Designer](./overview) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md new file mode 100644 index 000000000..bc12a1d7c --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md @@ -0,0 +1,112 @@ +--- +layout: post +title: Custom Font Support for Form Designer in SfPdfViewer | Syncfusion +description: Learn how to integrate the custom font collection for form fields in the Syncfusion Blazor SfPdfViewer component. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Custom Font Support for Form Fields + +The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties. + +## Integrating Custom Font Collections into Form Fields in SfPdfViewer + +To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving. + +```cshtml +@page "/" + + + + + +@code { + SfPdfViewer2? pdfViewer; + + // Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar + internal string[] FontFamilies { get; set; } = { "Helvetica", "Courier", "Symbol", "Times New Roman", "Allura", "Playwrite CA", "Ojuju" }; + + private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"; + + public void Created() + { + // Use FallbackFontCollection to save the custom font + // Maps the font family name to its corresponding TTF file as a memory stream + pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf"))); + pdfViewer!.FallbackFontCollection.Add("Playwrite CA", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/PlaywriteCA-Regular.ttf"))); + pdfViewer!.FallbackFontCollection.Add("Ojuju", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Ojuju-Regular.ttf"))); + } +} +``` +![Custom Font Support for Form Fields in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_for_form_fields.png) + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields). + +## Custom Font Support for Signature Fields + +The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties. + +### Integrating Custom Font Collections into Signature Fields in SfPdfViewer + +To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving. + +```cshtml +@page "/" + + + + + + +@code { + SfPdfViewer2? Viewer; + + private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf"; + + // Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar + public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" }; + + public void Created() + { + // Use FallbackFontCollection to save the custom font + // Maps the font family name to its corresponding TTF file as a memory stream + pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf"))); + pdfViewer!.FallbackFontCollection.Add("Tangerine", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Tangerine-Regular.ttf"))); + pdfViewer!.FallbackFontCollection.Add("Sacramento", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Sacramento-Regular.ttf"))); + pdfViewer!.FallbackFontCollection.Add("Inspiration", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Inspiration-Regular.ttf"))); + } +} +``` +![Custom Font Support for Signature Field in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_signature_fields.png) + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field). + +When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment. + +The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources. + +```cshtml + +``` + +>**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources. + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links). + +## See also + +* [Load Custom Fonts in PDF Viewer](../faqs/how-to-load-custom-font-pdfium) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md index a6d2210d1..b48aaca37 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md @@ -43,7 +43,7 @@ Below are the key events provided by the Form Designer to handle form field inte The event exposes the `Cancel` property, which can be set to `true` to conditionally prevent adding the form field. -###### Event Arguments +#### Event Arguments The FormFieldAdding event provides [FormFieldAddEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_Field) (form field details), [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_PageNumber) (target page), and [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_Cancel) (to prevent addition). ```cshtml @@ -72,7 +72,7 @@ By setting `args.Cancel = true`, the addition of the form field can be condition [FormFieldAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldAdded) event is triggered whenever a new form field is added to the PDF document. It allows developers to monitor the addition of form fields and apply default properties or validations. -###### Event Arguments +#### Event Arguments The FormFieldAdded event provides [FormFieldAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddedEventArgs_Field) (details of the added field) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddedEventArgs_PageNumber) (where the field was added). Developers can use these properties to monitor or modify the added form fields. ```cshtml @@ -98,7 +98,7 @@ The FormFieldAdded event provides [FormFieldAddedEventArgs](https://help.syncfus [FormFieldDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDeleted) event is triggered when a form field is removed from the document. It can be used to ensure proper cleanup and prevent accidental deletions. -###### Event Arguments +#### Event Arguments The FormFieldDeleted event provides [FormFieldDeletedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html), which contains properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDeletedEventArgs_Field) (deleted field details) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDeletedEventArgs_PageNumber). This event helps track and manage field deletions. ```cshtml @@ -125,7 +125,7 @@ The FormFieldDeleted event provides [FormFieldDeletedEventArgs](https://help.syn [FormFieldClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldClick) is triggered when a user clicks on a form field while designer mode is off. This event can be used to display tooltips, highlight fields, or open settings. -###### Event Arguments +#### Event Arguments The FormFieldClick event provides [FormFieldClickArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldClickArgs.html), containing [FormField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldClickArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldClickArgs_FormField) (clicked field details). It enables actions like highlighting fields or opening settings. ```cshtml @@ -150,7 +150,7 @@ The FormFieldClick event provides [FormFieldClickArgs](https://help.syncfusion.c [FormFieldDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDoubleClick) is triggered when a form field is double-clicked. This event is useful for triggering additional actions. -###### Event Arguments +#### Event Arguments The FormFieldDoubleClick event provides [FormFieldDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDoubleClickEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDoubleClickEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDoubleClickEventArgs_Field) (double-clicked field details). It is useful for triggering additional actions when a field is double-clicked. ```cshtml @@ -177,7 +177,7 @@ The FormFieldDoubleClick event provides [FormFieldDoubleClickEventArgs](https:// [FormFieldSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldSelected) is triggered when a form field is selected. It can be used to show additional options or highlight the selected field. -###### Event Arguments +#### Event Arguments The FormFieldSelected event provides [FormFieldSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html), which contains [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSelectedEventArgs_Field) (selected field details) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSelectedEventArgs_PageNumber). This event helps in handling field selection and UI updates. ```cshtml @@ -205,7 +205,7 @@ The FormFieldSelected event provides [FormFieldSelectedEventArgs](https://help.s [FormFieldUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldUnselected) is triggered when a selected form field is unselected. This event helps in resetting UI elements or hiding additional options. -###### Event Arguments +#### Event Arguments The FormFieldUnselected event provides [FormFieldUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldUnselectedEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldUnselectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldUnselectedEventArgs_Field) (unselected field details). It helps in resetting UI elements or hiding additional options. ```cshtml @@ -232,7 +232,7 @@ The FormFieldUnselected event provides [FormFieldUnselectedEventArgs](https://he [FormFieldResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldResized) is triggered when a form field is resized. This event is useful for applying constraints on form field sizes or updating layout dynamically. -###### Event Arguments +#### Event Arguments The FormFieldResized event provides [FormFieldResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html), which contains [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldResizedEventArgs_Field) (resized field details) and [NewBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldResizedEventArgs_NewBounds) (updated field dimensions). This event allows applying constraints on resizing. ```cshtml @@ -260,7 +260,7 @@ The FormFieldResized event provides [FormFieldResizedEventArgs](https://help.syn [ValidateFormFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ValidateFormFields) is triggered when form fields are validated before submission, saving, or printing the PDF. It ensures required fields are completed correctly. To trigger this event, set the [EnableFormFieldsValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormFieldsValidation) property to `true` in the SfPdfViewer2 component. -###### Event Arguments +#### Event Arguments The ValidateFormFields event provides [ValidateFormFieldsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ValidateFormFieldsArgs.html), which contains [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ValidateFormFieldsArgs.html#Syncfusion_Blazor_SfPdfViewer_ValidateFormFieldsArgs_Fields) (validated form fields). This event ensures that required fields are properly filled. ```cshtml @@ -288,7 +288,7 @@ The ValidateFormFields event provides [ValidateFormFieldsArgs](https://help.sync [FormFieldFocusIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusIn) occurs when focus enters a form field while designer mode is disabled. Typical uses include applying dynamic styling, showing inline help, or suggesting values. -###### Event Arguments +#### Event Arguments The FormFieldFocusIn event provides [FormFieldFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusInEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusInEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldFocusInEventArgs_Field) (details of the focused form field). Use it to identify the target field for styling or tooltips when focus is gained. ```cshtml @@ -316,7 +316,7 @@ The FormFieldFocusIn event provides [FormFieldFocusInEventArgs](https://help.syn [FormFieldFocusOut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusOut) occurs when focus leaves a form field while designer mode is disabled. Common scenarios include validating input, persisting values, or cleaning up UI state. -###### Event Arguments +#### Event Arguments The FormFieldFocusOut event provides [FormFieldFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusOutEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusOutEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldFocusOutEventArgs_Field) (the form field losing focus). Use it to validate or save data when the user moves out of a field. ```cshtml @@ -344,7 +344,7 @@ The FormFieldFocusOut event provides [FormFieldFocusOutEventArgs](https://help.s [FormFieldMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseEnter) occurs when the pointer enters a form field in the PDF Viewer. It is useful for hover styling, showing tooltips, or previewing context-sensitive help. -###### Event Arguments +#### Event Arguments The FormFieldMouseEnter event provides [FormFieldMouseEnterEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseEnterEventArgs_Field) (the form field entered) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseEnterEventArgs_PageNumber) (page containing the field). Use this to tailor hover behavior based on field and page context. ```cshtml @@ -372,7 +372,7 @@ The FormFieldMouseEnter event provides [FormFieldMouseEnterEventArgs](https://he [FormFieldMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseLeave) occurs when the pointer leaves a form field. Typical uses include hiding tooltips and reverting hover styling. -###### Event Arguments +#### Event Arguments The FormFieldMouseLeave event provides [FormFieldMouseLeaveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseLeaveEventArgs_Field) (the form field exited) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseLeaveEventArgs_PageNumber). Use it to revert UI changes when the pointer moves away. ```cshtml @@ -400,7 +400,7 @@ The FormFieldMouseLeave event provides [FormFieldMouseLeaveEventArgs](https://he [FormFieldPropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldPropertyChanged) occurs when a form field’s properties are modified. This is useful for tracking changes, synchronizing UI, or enforcing rules based on property updates. -###### Event Arguments +#### Event Arguments The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html), which contains properties like [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldPropertyChangedEventArgs_OldValue) and [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldPropertyChangedEventArgs_NewValue). Use these to compare changes and trigger dependent updates or validations. ```cshtml @@ -452,7 +452,7 @@ The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs]( [FormFieldsExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExporting) occurs when the form fields export process begins. It enables customization of the export payload or process, including validation or transformation, and the operation can be canceled by setting args.Cancel = true. -###### Event Arguments +#### Event Arguments The FormFieldsExporting event provides [FormFieldsExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportEventArgs.html), which includes properties like [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsExportEventArgs_Cancel). Use it to modify the export payload, validate data, or cancel the operation when necessary. ```cshtml @@ -494,7 +494,7 @@ The FormFieldsExporting event provides [FormFieldsExportEventArgs](https://help. [FormFieldsImporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImporting) occurs when the form-fields import process begins. Use this event to validate or modify incoming form-field data before it is applied. Cancel the operation by setting the event argument's Cancel property to true. -###### Event Arguments +#### Event Arguments The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportEventArgs.html), which includes properties such as [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsImportEventArgs_Cancel). Use this to stop the import or adjust data prior to import. ```cshtml @@ -626,7 +626,7 @@ The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help. [FormFieldsExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExportFailed) occurs when the export operation fails. Handle this event to capture error details, log issues, and provide fallback actions. -###### Event Arguments +#### Event Arguments The event provides [FormFieldsExportFailedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportFailedEventArgs.html), which includes [ErrorDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportFailedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsExportFailedEventArgs_ErrorDetails) describing the failure. Use this information to diagnose and recover from export errors. ```cshtml @@ -665,7 +665,7 @@ The event provides [FormFieldsExportFailedEventArgs](https://help.syncfusion.com [FormFieldsImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImportFailed) occurs when the import operation fails. Handle this event to surface errors to the user, capture diagnostics, and attempt recovery. -###### Event Arguments +#### Event Arguments The event provides [FormFieldsImportFailedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportFailedEventArgs.html), which includes [ErrorDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportFailedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsImportFailedEventArgs_ErrorDetails) explaining the cause. Use this to troubleshoot and implement fallback mechanisms. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-button.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-button.png new file mode 100644 index 000000000..59374dd42 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-button.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-checkBox.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-checkBox.png new file mode 100644 index 000000000..eea3e00b9 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-checkBox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-delete.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-delete.png new file mode 100644 index 000000000..4a59ec378 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-delete.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-dropdown-listbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-dropdown-listbox.png new file mode 100644 index 000000000..9df46b3d9 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-dropdown-listbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-listbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-listbox.png new file mode 100644 index 000000000..5c5ffa4d8 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-listbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-password.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-password.png new file mode 100644 index 000000000..f6f520b20 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-password.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-properties.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-properties.png new file mode 100644 index 000000000..4b5ee0873 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-properties.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-radio.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-radio.png new file mode 100644 index 000000000..d978dfd28 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-radio.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-signature.png new file mode 100644 index 000000000..69b8c9e2d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-signature.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox-added.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox-added.png new file mode 100644 index 000000000..19ad68b66 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox-added.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox.png new file mode 100644 index 000000000..377ea2891 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-toolbar.png new file mode 100644 index 000000000..db6359eb4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md new file mode 100644 index 000000000..b9f3f8a80 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md @@ -0,0 +1,100 @@ +--- +layout: post +title: Form designer in mobile view in SfPdfViewer | Syncfusion +description: Learn how to Design and edit PDF form fields in mobile view in the Syncfusion Blazor SfPdfViewer component. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# To open the form designer toolbar + +This topic explains how to design and manage PDF form fields in mobile view using the Blazor SfPdfViewer. + +Prerequisites: +- Form designer must be enabled for the viewer instance. +- Use a supported mobile browser. + +To open the form designer toolbar, tap the **Form Designer** option in the primary toolbar on mobile. The form designer toolbar opens at the bottom of the viewer. + +![Mobile form designer toolbar displayed at bottom in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-toolbar.png) + +## To add text box + +Tap the **Text Box** icon in the toolbar, then tap anywhere in the viewer to place the text box form field. + +![Tap Text Box icon in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-textbox.png) + +![Text box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-textbox-added.png) + +## To add password box + +Tap the **Password Box** icon in the toolbar, then tap anywhere in the viewer to place the password box. + +![Password box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-password.png) + +## To add check box + +Tap the **Check Box** icon in the toolbar, then tap anywhere in the viewer to place the check box. + +![Check box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-checkBox.png) + +## To add radio button + +Tap the **Radio Button** icon in the toolbar, then tap anywhere in the viewer to place the radio button. + +![Radio button added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-radio.png) + +## To add list box + +Tap the **List Box** icon in the toolbar, then tap anywhere in the viewer to place the list box. + +![List box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-listbox.png) + +## To add dropdown field + +Tap the **Dropdown** icon in the toolbar, then tap anywhere in the viewer to place the dropdown field. + +![Dropdown field added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-dropdown-listbox.png) + +## To add signature field + +Tap the **Signature Field** icon in the toolbar, then tap anywhere in the viewer to place the signature field. + +![Signature field added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-signature.png) + +## To add button + +Tap the **Button** icon in the toolbar, then tap anywhere in the viewer to place the button. + +![Button added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-button.png) + +## Modify Form Field Properties + +Form field properties can be configured as needed. To edit a field on mobile, select the form field while the form designer toolbar is open to display the properties dialog, then adjust the required options: + +- **Name**: Unique identifier for the form field. +- **Tooltip value**: Text shown as a tooltip for the field. +- **Value**: Default value assigned during design. +- **Form field visibility**: Display behavior — Visible, Visible but doesn’t print, Hidden, or Hidden but printable. +- **Read-only**: Prevents users from editing the field. +- **Required**: Marks the field as mandatory for input. +- **Appearance**: Visual settings such as background color, border color and style, and font family and size. + +Tap Save to apply the changes to the selected form field. On mobile, drag the field or its resize handles to reposition or resize; minimum field sizes may apply, and snapping occurs within page bounds where supported. + +![Modify form field properties in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-properties.png) + +## Delete Form Field + +To delete a form field, select the field to remove. The Delete icon appears in the form designer toolbar; tap it to remove the field from the PDF. Alternatively, press the Delete key after selecting the form field. + +![Delete selected form field in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-delete.png) + +## See also + +* [Mobile Toolbar](../mobile-toolbar) +* [Annotations in Mobile View](../annotation/annotations-in-mobile-view) +* [Form designer overview](../form-designer/overview) +* [UI interactions](../form-designer/ui-interactions) +* [Create form fields programmatically](../form-designer/create-programmatically)