Skip to content

380478: FormDesigner folder is modified as hotfix branch #2893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 18, 2024
Merged

380478: FormDesigner folder is modified as hotfix branch #2893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6707b8d
380478: commit
Apr 16, 2024
b6bab36
380478: missed files added commit
Apr 17, 2024
a4a68d2
380478: publishing platform commit
Apr 17, 2024
0eeb839
380478: title commit
Apr 17, 2024
52fe060
380478: commit
Apr 17, 2024
40ba5a0
380478: toc commit
Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions ...able-PDF-forms/create-programmatically.md → .../form-designer/create-programmatically.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Create Programmatically in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
description: Learn here all about Create Programmatically in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Create Programmatically
publishingplatform: ej2-asp-core-mvc
publishingplatform: ##Platform_Name##
documentation: ug
---

Expand Down Expand Up @@ -69,7 +69,7 @@ Using updateFormField method, Form Field can be updated programmatically. We sho
function documentLoad() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textfield", bounds: { X: 300, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 300, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.updateFormField(pdfviewer.formFieldCollections[0], { backgroundColor: 'red' });
}
</script>
Expand All @@ -85,7 +85,7 @@ Using updateFormField method, Form Field can be updated programmatically. We sho
function documentLoad() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textfield", bounds: { X: 300, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 300, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.updateFormField(pdfviewer.formFieldCollections[0], { backgroundColor: 'red' });
}
</script>
Expand All @@ -107,7 +107,7 @@ Using deleteFormField method, the form field can be deleted programmatically. We
function documentLoad() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textfield", bounds: { X: 300, Y: 229, Width: 150,Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 300, Y: 229, Width: 150,Height: 24 } });
viewer.formDesignerModule.deleteFormField(pdfviewer.formFieldCollections[0]);
}
</script>
Expand All @@ -123,7 +123,7 @@ Using deleteFormField method, the form field can be deleted programmatically. We
function documentLoad() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textfield", bounds: { X: 300, Y: 229, Width: 150,Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 300, Y: 229, Width: 150,Height: 24 } });
viewer.formDesignerModule.deleteFormField(pdfviewer.formFieldCollections[0]);
}
</script>
Expand All @@ -135,7 +135,7 @@ Using deleteFormField method, the form field can be deleted programmatically. We

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](../../../pdfviewer/images/saveformfield.gif)
![Alt text](../../pdfviewer/images/saveformfield.gif)

You can invoke download action using following code snippet.

Expand Down Expand Up @@ -175,7 +175,7 @@ You can invoke download action using following code snippet.

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](../../../pdfviewer/images/printformfield.gif)
![Alt text](../../pdfviewer/images/printformfield.gif)

You can invoke print action using the following code snippet.,

Expand Down Expand Up @@ -218,7 +218,7 @@ You can invoke print action using the following code snippet.,

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](../../../pdfviewer/images/openexistingpdf.gif)
![Alt text](../../pdfviewer/images/openexistingpdf.gif)

## Validate form fields

Expand All @@ -234,7 +234,7 @@ Add the following code snippet to validate the form fields,
</div>
<script>
function validateFormFields(args) {
var nonfilledFormFields = args.nonFillableFields;
var non_filledFormFields = args.nonFillableFields;
}
</script>

Expand All @@ -247,7 +247,7 @@ Add the following code snippet to validate the form fields,
</div>
<script>
function validateFormFields(args) {
var nonfilledFormFields = args.nonFillableFields;
var non_filledFormFields = args.nonFillableFields;
}
</script>

Expand Down Expand Up @@ -667,7 +667,7 @@ The following code example explains how to update the properties of the signatur

</script>

![Signature Field Settings](../../../pdfviewer/images/signature_field.png)
![Signature Field Settings](../../pdfviewer/images/signature_field.png)

The following code example explains how to update the properties of the initial field added to the document from the form designer toolbar.

Expand Down Expand Up @@ -704,7 +704,7 @@ window.onload = function () {

</script>

![Initial Field Settings](../../../pdfviewer/images/InitialField.png)
![Initial Field Settings](../../pdfviewer/images/InitialField.png)

### Textbox field settings

Expand Down Expand Up @@ -840,7 +840,7 @@ window.onload = function () {

</script>

![Textbox Field Settings](../../../pdfviewer/images/Textbox.png)
![Textbox Field Settings](../../pdfviewer/images/Textbox.png)

### Password field settings

Expand Down Expand Up @@ -972,7 +972,7 @@ window.onload = function () {

</script>

![Password Field Settings](../../../pdfviewer/images/Password.png)
![Password Field Settings](../../pdfviewer/images/Password.png)

### CheckBox field settings

Expand Down Expand Up @@ -1080,7 +1080,7 @@ window.onload = function () {

</script>

![CheckBox Field Settings](../../../pdfviewer/images/Checkbox.png)
![CheckBox Field Settings](../../pdfviewer/images/Checkbox.png)

### RadioButton field settings

Expand Down Expand Up @@ -1190,7 +1190,7 @@ window.onload = function () {

</script>

![RadioButton Field Settings](../../../pdfviewer/images/Radiobutton.png)
![RadioButton Field Settings](../../pdfviewer/images/Radiobutton.png)

### ListBox field settings

Expand All @@ -1213,7 +1213,7 @@ The following code example explains how to update the ListBox field properties o
function updateProperties() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
var formField = viewer.retrieveFormFields();
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1255,7 +1255,7 @@ The following code example explains how to update the ListBox field properties o
function updateProperties() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
var formField = viewer.retrieveFormFields();
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1292,7 +1292,7 @@ The following code example explains how to update the properties of the listbox

window.onload = function () {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1335,7 +1335,7 @@ window.onload = function () {

</script>

![ListBox Field Settings](../../../pdfviewer/images/Listbox.png)
![ListBox Field Settings](../../pdfviewer/images/Listbox.png)

### DropDown field settings

Expand All @@ -1358,7 +1358,7 @@ The following code example explains how to update the DropDown field properties
function updateProperties() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
var formField = viewer.retrieveFormFields();
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1400,7 +1400,7 @@ The following code example explains how to update the DropDown field properties
function updateProperties() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
var formField = viewer.retrieveFormFields();
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1437,7 +1437,7 @@ The following code example explains how to update the properties of the dropdown

window.onload = function () {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
const customOptions = [
var customOptions = [
{ itemName: 'item1', itemValue: 'item1' },
{ itemName: 'item2', itemValue: 'item2' },
{ itemName: 'item3', itemValue: 'item3' }
Expand Down Expand Up @@ -1480,4 +1480,4 @@ window.onload = function () {

</script>

![DropDownBox Field Settings](../../../pdfviewer/images/Dropdown.png)
![DropDownBox Field Settings](../../pdfviewer/images/Dropdown.png)
16 changes: 8 additions & 8 deletions ...create-with-user-interface-interaction.md → ...create-with-user-interface-interaction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: User Interface Interaction in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
description: Learn how User Interface Interaction in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Create With User Interface Interaction
publishingplatform: ej2-asp-core-mvc
publishingplatform: ##Platform_Name##
documentation: ug
---

Expand Down Expand Up @@ -49,35 +49,35 @@ We should inject FormDesigner module and set enableFormDesignerToolbar as true t

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](../../../pdfviewer/images/addformfield.gif)
![Alt text](../../pdfviewer/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](../../../pdfviewer/images/dragformfield.gif)
![Alt text](../../pdfviewer/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](../../../pdfviewer/images/resizeformfield.gif)
![Alt text](../../pdfviewer/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](../../../pdfviewer/images/generalproperties.png)
![Alt text](../../pdfviewer/images/generalproperties.png)

![Alt text](../../../pdfviewer/images/appearanceproperties.png)
![Alt text](../../pdfviewer/images/appearanceproperties.png)

![Alt text](../../../pdfviewer/images/dropdownproperties.png)
![Alt text](../../pdfviewer/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](../../../pdfviewer/images/clipboardformfield.png)
![Alt text](../../pdfviewer/images/clipboardformfield.png)

## Undo and Redo

Expand Down
Loading