1028844: Updated Sample for forms in Blazor PDF Viewer

Form Designer/Components/Pages/AddButton.md

@@ -0,0 +1,25 @@
+@page "/add-button"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddButtonField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddButtonField()
+    {
+        // Create a button field with properties
+        ButtonField buttonField = new ButtonField()
+        {
+            Name = "SubmitButton",
+            Bounds = new Bound() { X = 100, Y = 190, Width = 150, Height = 40 },
+            TooltipText = "Click to submit the form"
+        };
+
+        // Add the button field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { buttonField });
+    }
+}

Form Designer/Components/Pages/AddCheckBox.md

@@ -0,0 +1,26 @@
+@page "/add-checkbox"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddCheckBoxField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddCheckBoxField()
+    {
+        // Create a checkbox field with properties
+        CheckBoxField checkBoxField = new CheckBoxField()
+        {
+            Name = "AgreeTerms",
+            Bounds = new Bound() { X = 100, Y = 230, Width = 18, Height = 18 },
+            IsChecked = false,
+            TooltipText = "I agree to the terms"
+        };
+
+        // Add the checkbox field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { checkBoxField });
+    }
+}

Form Designer/Components/Pages/AddCustomData.md

@@ -0,0 +1,36 @@
+@page "/add-custom-data"
+@using Syncfusion.Blazor.SfPdfViewer
+@using System.Collections.Generic
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddFormFieldsWithCustomData"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2? viewer;
+    private string DocumentPath = "wwwroot/data/Form_Designer.pdf";
+
+    private async Task AddFormFieldsWithCustomData()
+    {
+        if (viewer == null) return;
+
+        // Define custom metadata
+        Dictionary<string, object> customMetadata = new Dictionary<string, object>
+        {
+            { "businessId", "C-1024" },
+            { "tags", new[] { "profile", "kiosk" } },
+            { "requiredRole", "admin" }
+        };
+
+        // Create a TextBox field with custom data
+        TextBoxField textField = new TextBoxField
+        {
+            Name = "Email",
+            CustomData = customMetadata,
+            Bounds = new Bound { X = 146, Y = 229, Width = 200, Height = 24 }
+        };
+
+        // Add the field to the document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { textField });
+    }
+}

Form Designer/Components/Pages/AddDropDown.md

@@ -0,0 +1,33 @@
+@page "/add-dropdown"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddDropDownField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddDropDownField()
+    {
+        // Create list items for the dropdown
+        List<ListItem> options = new List<ListItem>()
+        {
+            new ListItem() { Name = "Item 1", Value = "item1" },
+            new ListItem() { Name = "Item 2", Value = "item2" },
+            new ListItem() { Name = "Item 3", Value = "item3" }
+        };
+
+        // Create a dropdown field with items
+        DropDownField dropDownField = new DropDownField()
+        {
+            Name = "Country",
+            Bounds = new Bound() { X = 560, Y = 320, Width = 150, Height = 24 },
+            Items = options
+        };
+
+        // Add the dropdown field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { dropDownField });
+    }
+}

Form Designer/Components/Pages/AddListBox.md

@@ -0,0 +1,33 @@
+@page "/add-listbox"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddListBoxField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddListBoxField()
+    {
+        // Create list items for the list box
+        List<ListItem> items = new List<ListItem>()
+        {
+            new ListItem() { Name = "Item 1", Value = "item1" },
+            new ListItem() { Name = "Item 2", Value = "item2" },
+            new ListItem() { Name = "Item 3", Value = "item3" }
+        };
+
+        // Create a list box field with items
+        ListBoxField listBoxField = new ListBoxField()
+        {
+            Name = "States",
+            Bounds = new Bound() { X = 100, Y = 310, Width = 220, Height = 70 },
+            Items = items
+        };
+
+        // Add the list box field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { listBoxField });
+    }
+}

Form Designer/Components/Pages/AddPassword.md

@@ -0,0 +1,27 @@
+@page "/add-password"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddPasswordField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddPasswordField()
+    {
+        // Create a password field with properties
+        PasswordField passwordField = new PasswordField()
+        {
+            Name = "AccountPassword",
+            Bounds = new Bound() { X = 100, Y = 190, Width = 200, Height = 24 },
+            IsRequired = true,
+            MaxLength = 32,
+            TooltipText = "Enter a secure password"
+        };
+
+        // Add the password field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { passwordField });
+    }
+}

Form Designer/Components/Pages/AddRadioButton.md

@@ -0,0 +1,32 @@
+@page "/add-radiobutton"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddRadioButtonFields"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddRadioButtonFields()
+    {
+        // Create radio button fields grouped by name 'Gender'
+        RadioButtonField maleRadioButton = new RadioButtonField()
+        {
+            Name = "Gender",
+            Value = "Male",
+            Bounds = new Bound() { X = 100, Y = 270, Width = 16, Height = 16 }
+        };
+
+        RadioButtonField femaleRadioButton = new RadioButtonField()
+        {
+            Name = "Gender",
+            Value = "Female",
+            Bounds = new Bound() { X = 160, Y = 270, Width = 16, Height = 16 }
+        };
+
+        // Add the radio button fields to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { maleRadioButton, femaleRadioButton });
+    }
+}

Form Designer/Components/Pages/AddSignature.md

@@ -0,0 +1,26 @@
+@page "/add-signature"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddSignatureField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddSignatureField()
+    {
+        // Create a signature field
+        SignatureField signatureField = new SignatureField()
+        {
+            Name = "Sign",
+            Bounds = new Bound() { X = 57, Y = 923, Width = 200, Height = 43 },
+            TooltipText = "sign Here",
+            IsRequired = true
+        };
+
+        // Add the signature field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { signatureField });
+    }
+}

Form Designer/Components/Pages/AddTextBox.md

@@ -0,0 +1,27 @@
+@page "/add-textbox"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddTextBox"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/Form_Filling_Document.pdf";
+
+    private async Task AddTextBox()
+    {
+        // Create a text box field with properties
+        TextBoxField textBoxField = new TextBoxField()
+        {
+            Name = "FirstName",
+            Bounds = new Bound() { X = 100, Y = 150, Width = 200, Height = 24 },
+            IsRequired = true,
+            TooltipText = "Enter your first name",
+            MaxLength = 40
+        };
+
+        // Add the text box field to the PDF document
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { textBoxField });
+    }
+}

Form Designer/Components/Pages/ApplyFormFieldFlags.md

@@ -0,0 +1,45 @@
+@page "/apply-form-field-flags"
+@using Syncfusion.Blazor.SfPdfViewer
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@OnDocumentLoaded"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2? viewer;
+
+    // Path to the PDF document to be loaded in the viewer
+    private string DocumentPath = "wwwroot/data/Form_Designer.pdf";
+
+    // Method triggered when the document is loaded
+    private async Task OnDocumentLoaded()
+    {
+        if (viewer == null) return;
+
+        List<FormFieldInfo> formFields = new List<FormFieldInfo>
+        {
+            // Read-only Textbox that is not required
+            new TextBoxField
+            {
+                Name = "EmployeeId",
+                Bounds = new Bound { X = 146, Y = 229, Width = 150, Height = 24 },
+                IsReadOnly = true,
+                IsRequired = false,
+                Value = "EMP-0001"
+            },
+            // Required Signature field
+            new SignatureField
+            {
+                Name = "ApplicantSign",
+                Bounds = new Bound { X = 57, Y = 923, Width = 200, Height = 43 },
+                IsReadOnly = false,
+                IsRequired = true,
+                TooltipText = "Sign to accept the terms"
+            }
+        };
+
+        await viewer.AddFormFieldsAsync(formFields);
+    }
+}

Form Designer/Components/Pages/CustomizeTextBox.md

@@ -0,0 +1,36 @@
+@page "/customize-textbox"
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+<SfButton @onclick="OnEditTextbox">Apply Textbox Changes</SfButton>
+
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2? viewer;
+    private string DocumentPath = "wwwroot/data/Form_Designer.pdf";
+
+    private async Task OnEditTextbox()
+    {
+        if (viewer == null) return;
+
+        List<FormFieldInfo> fields = await viewer.GetFormFieldsAsync();
+
+        FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+
+        if (field != null)
+        {
+            (field as TextBoxField).Value = "John";
+            field.FontFamily = "Courier";
+            field.FontSize = 12;
+            field.Color = "black";
+            field.BackgroundColor = "white";
+            field.BorderColor = "black";
+            field.Thickness = 2;
+            field.TextAlignment = TextAlignment.Left;
+
+            await viewer.UpdateFormFieldsAsync(new List<FormFieldInfo> { field });
+        }
+    }
+}