Skip to content

Commit 8b64190

Browse files
987332: Update Annotation and Form designer
1 parent ec97ca5 commit 8b64190

36 files changed

+1567
-582
lines changed

Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/annotation-event.md

Lines changed: 781 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
layout: post
3+
title: Annotations in mobile view in ASP.NET MVC Pdf viewer | Syncfusion
4+
description: Learn here all about Annotations in mobile view in Syncfusion ASP.NET MVC Pdf viewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: Annotations in mobile view
7+
publishingplatform: ASP.NET MVC
8+
documentation: ug
9+
---
10+
# Annotations in mobile view in ASP.NET MVC Pdf viewer control
11+
12+
## To Open the Annotation Toolbar
13+
14+
**Step 1:** To enable the annotation toolbar, click the editAnnotation toolbar.
15+
16+
![Alt text](../images/edit-annotation.png)
17+
18+
**Step 2:** After enabling the annotation toolbar.
19+
20+
![Alt text](../images/after-enabling-annotation-toolbar.png)
21+
22+
## To add sticky notes annotation
23+
24+
**Step 1:** click sticky notes icon and then click in the page where you want to add this.
25+
26+
![Alt text](../images/add-sticky-notes.png)
27+
28+
**Step 2:** Click in the page to add the sticky notes annotation.
29+
30+
![Alt text](../images/sticky-notes-in-page.png)
31+
32+
## To add text markup annotation
33+
34+
**Step 1:** click any one of the text markup icon, then select the text you want to mark, then touch the selected text to apply the markup annotation.
35+
36+
![Alt text](../images/select-text.png)
37+
38+
**Step 2:** Add the text markup annotation in the PDF page
39+
40+
![Alt text](../images/add-text-markup.png)
41+
42+
## To add shape and measure annotations
43+
44+
**Step 1:** click the shape/measure icon in the toolbar. It will show the toolbar with shape/measure types.
45+
46+
![Alt text](../images/add-shapes.png)
47+
48+
**Step 2:** Click the shape/measure type and add annotation to the page.
49+
50+
![Alt text](../images/open-radius.png)
51+
52+
**Step 3:** Add the annotation in the PDF page.
53+
54+
![Alt text](../images/radius-annotation.png)
55+
56+
## To add the stamp annotation
57+
58+
**Step 1:** click the stamp icon and select the stamp type from the menu items.
59+
60+
![Alt text](../images/open-stamp.png)
61+
62+
**Step 2:** Add the stamp annotation in the page.
63+
64+
![Alt text](../images/add-revised.png)
65+
66+
## To add signature
67+
68+
**Step 1:** click the signature icon. This will open the signature canvas to draw signature. After drawn the sign, should click the create button and touch the viewer to add the signature.
69+
70+
![Alt text](../images/add-signature.png)
71+
72+
**Step 2:** Add the signature in the page.
73+
74+
![Alt text](../images/adding-signature.png)
75+
76+
## To add ink annotation
77+
78+
**Step 1:** Click the ink icon tool and draw in the page.
79+
80+
![Alt text](../images/open-ink.png)
81+
82+
**Step 2:** Add the ink annotation in the page.
83+
84+
![Alt text](../images/ink-annotation.png)
85+
86+
## Change Annotation Change (Before adding)
87+
88+
**Step 1:** We can change the properties before adding the annotation.
89+
90+
**Step 2:** Click the annotation icon, this will show the toolbar with corresponding properties. We can change the property and add the annotation in the page.
91+
92+
![Alt text](../images/open-fillcolor.png)
93+
94+
## Change Annotation Property (After Adding)
95+
96+
**Step 1:** We can change the annotation property after adding the annotation.
97+
98+
**Step 2:** Select the added annotation, it will show the corresponding property tool. This will help us to change the property of the annotation.
99+
100+
![Alt text](../images/change-property.png)
101+
102+
## Delete Annotation
103+
104+
**Step 1:** To delete the annotation, first select the annotation, it will show the property toolbar. In the property tool there is an icon to delete the annotation.
105+
106+
![Alt text](../images/delete-icon.png)
107+
108+
## Open Comment Panel
109+
110+
**Step 1:** We can open the comment panel through the icon in the property tool or through the annotation toolbar.
111+
112+
![Alt text](../images/open-comment.png)
113+
114+
**Step 1:** After opening the comment panel
115+
116+
![Alt text](../images/comment-panel.png)
117+
118+
## Close the comment panel
119+
120+
**Step 1:** To close the comment panel, click the close button.
121+
122+
![Alt text](../images/close-comment-panel.png)
Lines changed: 109 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
---
22
layout: post
3-
title: Comments in ASP.NET MVC PDF Viewer Component | Syncfusion
4-
description: Learn here all about Comments in Syncfusion ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: Comments in ASP.NET MVC PDF Viewer control | Syncfusion
4+
description: Learn about comments, replies, and status in the Syncfusion ASP.NET MVC PDF Viewer control (Essential JS 2).
55
platform: document-processing
6-
control: Comments
6+
control: PDF Viewer
77
publishingplatform: ASP.NET MVC
88
documentation: ug
99
---
1010

11+
# Comments in ASP.NET MVC PDF Viewer control
1112

12-
# Comments in the ASP.NET MVC PDF Viewer component
13-
14-
The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents:
13+
The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
1514

1615
* Shape annotation
1716
* Stamp annotation
@@ -21,11 +20,11 @@ The PDF Viewer control provides options to add, edit, and delete the comments to
2120
* Free text annotation
2221
* Ink annotation
2322

24-
![Comments](../images/commentannot.png)
23+
![Comment panel overview](../images/commentannot.png)
2524

2625
## Adding a comment to the annotation
2726

28-
Annotation comment, comment replies, and status can be added to the PDF document using the comment panel.
27+
Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
2928

3029
### Comment panel
3130

@@ -34,78 +33,142 @@ Annotation comments can be added to the PDF using the comment panel. The comment
3433
1. Using the annotation menu
3534

3635
* Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
37-
* Click the Comment Panel button. A comment panel will appear.
36+
* Click the Comment Panel button. The comment panel opens.
3837

3938
2. Using Context menu
4039

41-
* Select annotation in the PDF document and right-click it.
42-
* Select the comment option in the context menu that appears.
40+
* Select the annotation in the PDF document and right-click it.
41+
* Select Comment from the context menu.
4342

4443
3. Using the Mouse click
4544

46-
* Select annotation in the PDF document and double click it, a comment panel will appear.
45+
* Select the annotation in the PDF document and double-click it. The comment panel opens.
4746

48-
If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel.
47+
If the comment panel is already open, select the annotation and add comments using the panel.
4948

5049
### Adding comments
5150

52-
* Select annotation in the PDF document and click it.
53-
* The selected annotation comment container is highlighted in the comment panel.
54-
* Now, you can add comment and comment replies using the comment panel.
51+
* Select the annotation in the PDF document.
52+
* The corresponding comment thread is highlighted in the comment panel.
53+
* Add comments and replies using the comment panel.
5554

56-
![AddingComments](../images/stickycomment.png)
55+
![Adding comments to a sticky note annotation](../images/stickycomment.png)
5756

5857
### Adding Comment Replies
5958

60-
* The PDF Viewer control provides an option to add multiple replies to the comment.
61-
* After adding the annotation comment, you can add a reply to the comment.
59+
* Multiple replies can be added to a comment.
60+
* After adding a comment, add replies as needed.
6261

6362
### Adding Comment or Reply Status
6463

65-
* Select the Annotation Comments in the comment panel.
66-
* Click the more options button showing in the Comments or reply container.
67-
* Select the Set Status option in the context menu that appears.
68-
* Select the status of the annotation comment in the context menu that appears.
64+
* Select the annotation comment in the comment panel.
65+
* Click More options in the comment or reply container.
66+
* Select Set Status from the context menu.
67+
* Choose a status for the comment.
6968

70-
![CommentStatus](../images/commentstatus.png)
69+
![Set status for a comment](../images/commentstatus.png)
7170

7271
### Editing the comments and comments replies of the annotations
7372

74-
The comment, comment replies, and status of the annotation can be edited using the comment panel.
73+
Comments, replies, and status can be edited using the comment panel.
7574

7675
### Editing the Comment or Comment Replies
7776

78-
The annotation comment and comment replies can be edited in the following ways:
77+
Edit comments and replies in the following ways:
7978

8079
1. Using the Context menu
8180

82-
* Select the Annotation Comments in the comment panel.
83-
* Click the More options button showing in the Comments or reply container.
84-
* Select the Edit option in the context menu that appears.
85-
* Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
81+
* Select the annotation comment in the comment panel.
82+
* Click More options in the comment or reply container.
83+
* Select Edit from the context menu.
84+
* An editable text box appears. Change the content of the comment or reply.
8685

8786
2. Using the Mouse Click
8887

89-
* Select the annotation comments in the comment panel.
90-
* Double click the comment or comment reply content.
91-
* Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
88+
* Select the annotation comment in the comment panel.
89+
* Double-click the comment or reply content.
90+
* An editable text box appears. Change the content of the comment or reply.
9291

9392
### Editing Comment or Reply Status
9493

95-
* Select the Annotation Comments in the comment panel.
96-
* Click the more options button showing in the Comments or reply container.
97-
* Select the Set Status option in the context menu that appears.
98-
* Select the status of the annotation comment in the context menu that appears.
99-
* Status ‘None is the default state. If the status is set to ‘None,’ the comments or reply does not appear.
94+
* Select the annotation comment in the comment panel.
95+
* Click More options in the comment or reply container.
96+
* Select Set Status from the context menu.
97+
* Choose a status for the comment.
98+
* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible.
10099

101-
![CommentEdit](../images/commentsedit.png)
100+
![Edit comments and replies](../images/commentsedit.png)
102101

103102
### Delete Comment or Comment Replies
104103

105-
* Select the Annotation Comments in the comment panel.
106-
* Click the more options button shown in the Comments or reply container.
107-
* Select the Delete option in the context menu that appears.
108-
109-
![CommentEdit](../images/commentsdelete.png)
110-
111-
N>The annotation will be deleted on deleting the comment using comment panel.
104+
* Select the annotation comment in the comment panel.
105+
* Click More options in the comment or reply container.
106+
* Select Delete from the context menu.
107+
108+
![Delete comments or replies](../images/commentsdelete.png)
109+
110+
>Deleting the root comment from the comment panel also deletes the associated annotation.
111+
112+
## How to check the comments added by the user
113+
114+
Comments added to the PDF document can be read using the annotation's `comments` property.
115+
116+
The following example logs comments in response to a button click.
117+
118+
{% tabs %}
119+
{% highlight html tabtitle="Standalone" %}
120+
121+
<div id="e-pv-e-sign-pdfViewer-div">
122+
<button id="checkComments" onclick="checkComments()">Check Comments</button>
123+
@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
124+
</div>
125+
126+
<script type="text/javascript">
127+
function checkComments() {
128+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
129+
var annotationCollections = viewer.annotationCollection;
130+
for (var x = 0; x < annotationCollections.length; x++) {
131+
//Prints the annotation id in the console window.
132+
console.log("annotation Id : " + annotationCollections[x].annotationId);
133+
var comments = annotationCollections[x].comments;
134+
for (var y = 0; y < comments.length; y++) {
135+
var comment = comments[y];
136+
//Prints the PDF document's comments in the console window.
137+
console.log("comment" + "[" + y + "] :" + comment.note);
138+
}
139+
var note = annotationCollections[x].note;
140+
console.log("note : " + note);
141+
}
142+
}
143+
</script>
144+
145+
{% endhighlight %}
146+
147+
{% highlight html tabtitle="Server-Backed" %}
148+
149+
<div id="e-pv-e-sign-pdfViewer-div">
150+
<button id="checkComments" onclick="checkComments()">Check Comments</button>
151+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
152+
</div>
153+
154+
<script type="text/javascript">
155+
function checkComments() {
156+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
157+
var annotationCollections = viewer.annotationCollection;
158+
for (var x = 0; x < annotationCollections.length; x++) {
159+
//Prints the annotation id in the console window.
160+
console.log("annotation Id : " + annotationCollections[x].annotationId);
161+
var comments = annotationCollections[x].comments;
162+
for (var y = 0; y < comments.length; y++) {
163+
var comment = comments[y];
164+
//Prints the PDF document's comments in the console window.
165+
console.log("comment" + "[" + y + "] :" + comment.note);
166+
}
167+
var note = annotationCollections[x].note;
168+
console.log("note : " + note);
169+
}
170+
}
171+
</script>
172+
173+
{% endhighlight %}
174+
{% endtabs %}

0 commit comments

Comments
 (0)