Skip to content

Commit 1e404d3

Browse files
KameshRajendranKameshRajendran
authored
Merge pull request #92 from SyncfusionExamples/947270_samples
947270: Form Designer Programmatical Samples
2 parents bb8d971 + c3bd1e6 commit 1e404d3

15 files changed

+368
-1
lines changed

‎Form Designer/Components/Layout/NavMenu.razor‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,72 @@
1010
<nav class="flex-column">
1111
<div class="nav-item px-3">
1212
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
13+
Add Form Fields
14+
</NavLink>
15+
</div>
16+
17+
<div class="nav-item px-3">
18+
<NavLink class="nav-link" href="setting">
19+
FormField Settings
20+
</NavLink>
21+
</div>
22+
23+
<div class="nav-item px-3">
24+
<NavLink class="nav-link" href="set-clear-mode">
25+
Set Form Field Mode
26+
</NavLink>
27+
</div>
28+
29+
<div class="nav-item px-3">
30+
<NavLink class="nav-link" href="update-apperance">
31+
Update Apperance
32+
</NavLink>
33+
</div>
34+
35+
<div class="nav-item px-3">
36+
<NavLink class="nav-link" href="update-value">
37+
Update Value Properties
38+
</NavLink>
39+
</div>
40+
41+
<div class="nav-item px-3">
42+
<NavLink class="nav-link" href="update-linked-properties">
43+
Linked Field Properties
44+
</NavLink>
45+
</div>
46+
47+
<div class="nav-item px-3">
48+
<NavLink class="nav-link" href="delete-all">
49+
Delete All Fields
50+
</NavLink>
51+
</div>
52+
53+
<div class="nav-item px-3">
54+
<NavLink class="nav-link" href="delete-selected">
55+
Delete Selected Field
56+
</NavLink>
57+
</div>
58+
59+
<div class="nav-item px-3">
60+
<NavLink class="nav-link" href="delete-Id">
61+
Delete Field By Id
62+
</NavLink>
63+
</div>
64+
65+
<div class="nav-item px-3">
66+
<NavLink class="nav-link" href="select-id">
67+
Select By ID
68+
</NavLink>
69+
</div>
70+
71+
<div class="nav-item px-3">
72+
<NavLink class="nav-link" href="select-field">
73+
Select Field
74+
</NavLink>
75+
</div>
76+
77+
<div class="nav-item px-3">
78+
<NavLink class="nav-link" href="visibility">
1379
Visibility of Form Field
1480
</NavLink>
1581
</div>

‎Form Designer/Components/Pages/AddFormField.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/"
2+
3+
<!-- PDF Viewer component with reference binding and document loading -->
4+
<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
5+
<PdfViewerEvents DocumentLoaded="@AddFormFields"></PdfViewerEvents>
6+
</SfPdfViewer2>
7+
8+
@code {
9+
// Reference to the PDF Viewer instance
10+
private SfPdfViewer2 viewer;
11+
12+
// Path to the PDF document
13+
private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
14+
15+
// Method triggered when the document is loaded
16+
private async Task AddFormFields()
17+
{
18+
// Define various form fields with their properties and positions
19+
List<FormFieldInfo> formFields = new List<FormFieldInfo>
20+
{
21+
new ButtonField { Name = "Button Field", Bounds = new Bound { X = 278, Y = 157, Width = 150, Height = 40 } },
22+
new TextBoxField { Name = "TextBox Field", Bounds = new Bound { X = 278, Y = 247, Width = 200, Height = 24 } },
23+
new PasswordField { Name = "Password Field", Bounds = new Bound { X = 278, Y = 323, Width = 200, Height = 24 } },
24+
new CheckBoxField { Name = "CheckBox Field1", IsChecked = false, Bounds = new Bound { X = 278, Y = 398, Width = 20, Height = 20 } },
25+
new CheckBoxField { Name = "CheckBox Field2", IsChecked = false, Bounds = new Bound { X = 386, Y = 398, Width = 20, Height = 20 } },
26+
new RadioButtonField { Name = "RadioButton", Value = "Value1", IsSelected = false, Bounds = new Bound { X = 278, Y = 470, Width = 20, Height = 20 } },
27+
new RadioButtonField { Name = "RadioButton", Value = "Value2", IsSelected = false, Bounds = new Bound { X = 386, Y = 470, Width = 20, Height = 20 } },
28+
new DropDownField { Name = "DropDown Field", Bounds = new Bound { X = 278, Y = 536, Width = 200, Height = 24 } },
29+
new ListBoxField { Name = "ListBox Field", Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 } },
30+
new SignatureField { Name = "Signature Field", Bounds = new Bound { X = 278, Y = 686, Width = 200, Height = 63 } }
31+
};
32+
33+
// Add form fields asynchronously to the PDF Viewer
34+
await viewer.AddFormFieldsAsync(formFields);
35+
}
36+
}

‎Form Designer/Components/Pages/DeleteAllFields.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@page "/delete-all"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Button to delete all form fields -->
5+
<SfButton onclick="@DeleteAllFormFields">Delete All Form Fields</SfButton>
6+
7+
<!-- PDF Viewer component with reference binding and document loading -->
8+
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Path to the PDF document
16+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
17+
18+
private async Task DeleteAllFormFields()
19+
{
20+
// Deletes all form fields from the PDF Viewer.
21+
await viewer.DeleteFormFieldsAsync(true);
22+
}
23+
}

‎Form Designer/Components/Pages/DeleteById.razor‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@page "/delete-Id"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Delete form fields by ID -->
5+
<SfButton @onclick="DeleteFormFields">Delete Form Field By ID</SfButton>
6+
7+
<!-- PDF Viewer component with reference binding and document loading -->
8+
<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Path to the PDF document that will be loaded into the viewer
16+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
17+
18+
// Method to delete form fields based on their ID
19+
private async Task DeleteFormFields()
20+
{
21+
List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
22+
await viewer.DeleteFormFieldsAsync(new List<string> { formFields[0].Id }); // Delete form fields by ID
23+
}
24+
}

‎Form Designer/Components/Pages/DeleteSelectedField.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@page "/delete-selected"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Button to delete the selected form fields -->
5+
<SfButton onclick="@DeleteSelectedFormField">Delete Selected Form Field</SfButton>
6+
7+
<!-- PDF Viewer component with reference binding and document loading -->
8+
<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Path to the PDF document
16+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
17+
18+
private async Task DeleteSelectedFormField()
19+
{
20+
// Delete selected form field from the PDF Viewer.
21+
await viewer.DeleteFormFieldsAsync(false);
22+
}
23+
}

‎Form Designer/Components/Pages/FieldSetting.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@page "/setting"
2+
3+
<!-- PDF Viewer component with reference binding and document loading -->
4+
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
5+
<!-- Form field settings with specified thickness -->
6+
<FormFieldSettings Thickness="@thickness"></FormFieldSettings>
7+
<!-- Event triggered when the document is loaded -->
8+
<PdfViewerEvents DocumentLoaded="@AddFormFields"></PdfViewerEvents>
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Default thickness value for form fields
16+
private double thickness { get; set; } = 4;
17+
18+
// Path to the PDF document to be loaded in the viewer
19+
private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
20+
21+
// Method triggered when the document is loaded
22+
private async Task AddFormFields()
23+
{
24+
// Define a new ListBox form field with specified name and position
25+
ListBoxField listBox = new ListBoxField
26+
{
27+
Name = "ListBox Field",
28+
Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 }
29+
};
30+
31+
// Add the form field asynchronously to the PDF Viewer
32+
await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { listBox });
33+
}
34+
}

‎Form Designer/Components/Pages/SelectByField.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@page "/select-field"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Button to trigger form field selection -->
5+
<SfButton @onclick="SelectFormField">Select Form Field</SfButton>
6+
7+
<!-- PDF Viewer component with reference binding and document loading -->
8+
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Path to the PDF document that will be loaded in the viewer
16+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
17+
18+
// Method to select the first available form field in the document
19+
private async Task SelectFormField()
20+
{
21+
// Retrieve all form fields present in the PDF
22+
List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
23+
// Select the first form field from the list
24+
FormFieldInfo formField = formFields[3];
25+
await viewer.SelectFormFieldAsync(formField);
26+
27+
}
28+
}

‎Form Designer/Components/Pages/SelectFieldById.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@page "/select-id"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Button to select a form field by its ID -->
5+
<SfButton @onclick="SelectFormFieldByID">Select Form Field By ID</SfButton>
6+
7+
<!-- PDF Viewer component with reference binding and document loading -->
8+
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
9+
</SfPdfViewer2>
10+
11+
@code {
12+
// Reference to the PDF Viewer instance
13+
private SfPdfViewer2 viewer;
14+
15+
// Path to the PDF document that will be loaded in the viewer
16+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
17+
18+
// Method to select a form field by ID (filters only TextBox fields)
19+
private async Task SelectFormFieldByID()
20+
{
21+
// Retrieve all form fields currently present in the PDF
22+
List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
23+
// Select the form field asynchronously using its ID
24+
await viewer.SelectFormFieldAsync(formFields[0]);
25+
26+
}
27+
}

‎Form Designer/Components/Pages/SetMode.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@page "/set-clear-mode"
2+
@using Syncfusion.Blazor.Buttons
3+
4+
<!-- Buttons to set and clear the form field drawing mode -->
5+
<SfButton @onclick="SetFormDrawingMode">Set Form Field Type</SfButton>
6+
<SfButton @onclick="ClearFormDrawingMode">Clear Form Field Type</SfButton>
7+
8+
<!-- PDF Viewer component -->
9+
<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
10+
</SfPdfViewer2>
11+
12+
@code {
13+
// Reference to the PDF Viewer instance
14+
private SfPdfViewer2 viewer;
15+
16+
// Path to the PDF document to be loaded in the viewer
17+
private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
18+
19+
// Method to enable form field drawing mode with a specific field type
20+
async Task SetFormDrawingMode()
21+
{
22+
// Sets the form field drawing mode to DropDown, allowing users to add dropdown fields
23+
await viewer.SetFormDrawingModeAsync(FormFieldType.DropDown);
24+
}
25+
26+
// Method to disable form field drawing mode
27+
async Task ClearFormDrawingMode()
28+
{
29+
// Clears the form field drawing mode, preventing further form field additions
30+
await viewer.SetFormDrawingModeAsync();
31+
}
32+
}

‎Form Designer/Components/Pages/UpdateApperanceProperties.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@page "/update-apperance"
2+
3+
<!-- PDF Viewer component with reference binding and document loading -->
4+
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
5+
<PdfViewerEvents DocumentLoaded="@UpdateFormField"></PdfViewerEvents>
6+
</SfPdfViewer2>
7+
8+
@code {
9+
private SfPdfViewer2 viewer;
10+
private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
11+
12+
private async Task UpdateFormField()
13+
{
14+
// Retrieve the list of added form fields
15+
List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
16+
FormFieldInfo buttonField = formFields[0];
17+
buttonField.BackgroundColor = "#008000";
18+
buttonField.BorderColor = "#FFFF00";
19+
buttonField.Thickness = 2;
20+
// Update form fields in the viewer with new properties
21+
await viewer.UpdateFormFieldsAsync(new List<FormFieldInfo> { buttonField });
22+
}
23+
}

0 commit comments

Comments
 (0)