Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f2aab4c
984774: Update the documentation corrections
Tamilselvan-Durairaj Oct 13, 2025
a6165ce
984774: Update the CI failure
Tamilselvan-Durairaj Oct 13, 2025
c2847ff
984774: Reverted the changes
Tamilselvan-Durairaj Oct 13, 2025
206b810
984774: Update the toolbar section corrections
Tamilselvan-Durairaj Oct 13, 2025
68706cd
984774: Update the navigation and command manager section
Tamilselvan-Durairaj Oct 13, 2025
a0a32a0
984774: Update corrections in the text search and navigation
Tamilselvan-Durairaj Oct 13, 2025
74e5744
984774: Update the corrections in the mobile mode
Tamilselvan-Durairaj Oct 13, 2025
f70a4a5
984774: Update corrections in the redaction section
Tamilselvan-Durairaj Oct 13, 2025
f5785f6
984774: Update the correction in the form designer
Tamilselvan-Durairaj Oct 13, 2025
0aa888f
984774: Update the corrections in the pdfviewer faqs
Tamilselvan-Durairaj Oct 14, 2025
cc2bede
Merge branch 'development' of https://github.com/syncfusion-content/d…
Tamilselvan-Durairaj Oct 14, 2025
7fd9ced
984774: Update CI issue
Tamilselvan-Durairaj Oct 14, 2025
bd42c1c
984774: Update the review correction in the print files
Tamilselvan-Durairaj Oct 14, 2025
141b7b2
984774: Update the review correction for cancel operation
Tamilselvan-Durairaj Oct 14, 2025
74d2e77
Merge branch 'development' of https://github.com/syncfusion-content/d…
Tamilselvan-Durairaj Oct 14, 2025
5842161
984774: Update smart pdfviewer changes
Tamilselvan-Durairaj Oct 14, 2025
4a453bc
984774: Update the changes
Tamilselvan-Durairaj Oct 14, 2025
1cddc1b
984774: Update the text search event content
Tamilselvan-Durairaj Oct 14, 2025
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
8 changes: 4 additions & 4 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@
</li>
<li>Deployment
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application">Windows Subsystem for Linux</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/deployment/wsl-application">Windows Subsystem for Linux</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/deployment/aws-beanstalk-deployment">AWS Elastic Beanstalk</a></li>
</ul>
</li>
Expand All @@ -513,7 +513,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/blazor/save-pdf-file/to-box-cloud-file-storage">To Box cloud file storage</a></li>
</ul>
</li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/toolbar">Toolbar</a>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/toolbar-overview">Toolbar</a>
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/toolbar/primary-toolbar-customization">Primary Toolbar Customization</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/toolbar/annotation-toolbar-customization">Annotation Toolbar Customization</a></li>
Expand All @@ -523,7 +523,7 @@
</ul>
</li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/command-manager">Command Manager</a></li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation">Interactive PDF Navigation</a>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation-overview">Interactive PDF Navigation</a>
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/page-navigation">Page Navigation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/bookmark-navigation">Bookmark Navigation</a></li>
Expand Down Expand Up @@ -572,7 +572,7 @@
</li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/form-filling">Form Filling</a></li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/print">Print</a></li>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/document-security">Document security</a>
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/document-security-overview">Document security</a>
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/document-security/password-protected">Password Protected</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/document-security/permission">Permission</a></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ control: SfPdfViewer
documentation: ug
---

# Annotations in mobile view

This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel.

# To open the annotation toolbar
## To open the annotation toolbar

To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.

Expand Down Expand Up @@ -107,13 +109,13 @@ When finished, tap the Ink Annotation icon again to exit drawing mode. The prope

![Complete an ink annotation in Blazor SfPdfViewer](../images/complete-ink-annotation.png)

## Change annotation properties (Before adding)
## Change annotation properties before adding

Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties.

![Change properties before adding an annotation in Blazor SfPdfViewer](../images/property-change-before-adding.gif)

## Change annotation properties (After adding)
## Change annotation properties after adding

After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation.

Expand All @@ -134,3 +136,7 @@ Open the comments panel from the **more option** menu at the right end of the mo
To close the comments panel, tap the Close icon within the panel.

![Comments panel displayed in Blazor SfPdfViewer](../images/open-cooment-panel.png)

## See Also

* [Annotation Toolbar in Mobile mode](../annotation/annotations-in-mobile-view)
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ N> Deleting the root comment from the comment panel also deletes the associated

### Show or hide the Comment panel

The SfPdfViewer component provides an option to show or hide the comment panel by using the `CommentPanelVisible` property.
The SfPdfViewer component provides an option to show or hide the comment panel by using the [CommentPanelVisible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CommentPanelVisible) property.

The following code snippet explains how to show the comment panel.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ Adjust the annotation opacity using the range slider in the Edit Opacity tool.

## Setting default properties during control initialization

Default properties for free text annotations can be set during component initialization using FreeTextSettings. These values apply to newly created annotations. Any subsequent changes made from the annotation toolbar affect only annotations created afterward.
Default properties for free text annotations can be set during component initialization using [FreeTextSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FreeTextSettings). These values apply to newly created annotations. Any subsequent changes made from the annotation toolbar affect only annotations created afterward.

```cshtml

Expand Down Expand Up @@ -281,8 +281,10 @@ If a custom font is not installed on the system, use FallbackFontCollection to e
pdfViewer.FallbackFontCollection.Add("Courier New", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Fonts/COUR.ttf")));
}
}

```
### Adding Custom Font Families to the Annotation Toolbar Dropdown

Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar.

```cshtml
Expand Down Expand Up @@ -364,4 +366,5 @@ The following example illustrates loading custom fonts in FreeText annotations u
## See also

* [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically)
* [How to Load the Font Collection in SfPdfViewer](../how-to/load-font-collection)

* [How to Load the Font Collection in SfPdfViewer](../faqs/how-to-load-font-collection)
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ The SfPdfViewer component supports importing and exporting annotations as a JSON

## Importing annotation using SfPdfViewer API

Annotations can also be imported from a JSON or XFDF file, or from an in-memory object, in code-behind using the ImportAnnotationAsync method. The following example uses the SfPdfViewer2 component.
Annotations can also be imported from a JSON or XFDF file, or from an in-memory object, in code-behind using the [ImportAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportAnnotationAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_) method. The following example uses the SfPdfViewer2 component.

Supported formats:
- [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDataFormat.html#Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_Json)
Expand Down Expand Up @@ -99,7 +99,7 @@ N> The Export Annotations option is disabled when the loaded PDF document does n

## Exporting annotation using SfPdfViewer API

Annotations can also be exported as a file or as a stream in code-behind using the ExportAnnotationAsync and ExportAnnotationAsStreamAsync methods. Supported formats:
Annotations can also be exported as a file or as a stream in code-behind using the [ExportAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_) and [ExportAnnotationAsStreamAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportAnnotationAsStreamAsync_Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_) methods. Supported formats:

- [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDataFormat.html#Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_Json)
- [XFDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDataFormat.html#Syncfusion_Blazor_SfPdfViewer_AnnotationDataFormat_Xfdf)
Expand Down Expand Up @@ -153,4 +153,4 @@ Annotations can also be exported as a file or as a stream in code-behind using t

## See also

* [How to import annotations as objects](../how-to/import-annotations-as-objects)
* [How to import annotations as objects](../faqs/how-to-import-annotations-as-objects)
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Control the transparency using the range slider in the Edit Opacity tool.

## Setting default properties during the control initialization

Default properties for ink annotations can be configured before rendering the component using InkAnnotationSettings. After interacting with the toolbar, subsequent annotations will use the most recently selected values.
Default properties for ink annotations can be configured before rendering the component using [InkAnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InkAnnotationSettings). After interacting with the toolbar, subsequent annotations will use the most recently selected values.

```cshtml

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ The properties of line-based annotations such as Distance and Perimeter can be e

## Setting default properties during control initialization

Set default properties for measurement annotations before initializing the control using DistanceSettings, PerimeterSettings, AreaSettings, RadiusSettings, and VolumeSettings.
Set default properties for measurement annotations before initializing the control using [DistanceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DistanceSettings), [PerimeterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PerimeterSettings), [AreaSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AreaSettings), [RadiusSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_RadiusSettings), and [VolumeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_VolumeSettings).

```cshtml
Expand Down Expand Up @@ -169,7 +169,7 @@ The supported units of measurement for measurement annotations are:

## Setting default scale ratio settings during control initialization

Set default scale ratio settings for measurement annotations before initializing the control using ScaleRatioSettings, as shown below.
Set default scale ratio settings for measurement annotations before initializing the control using [ScaleRatioSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerMeasurementSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerMeasurementSettings_ScaleRatio), as shown below.

```cshtml
Expand All @@ -193,6 +193,7 @@ Set default scale ratio settings for measurement annotations before initializing
ConversionUnit = CalibrationUnit.Cm
};
}
```

## Add measurement annotation programmatically
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Properties for line-based shapes (Line and Arrow) can be adjusted in the Line Pr

## Setting default properties during control initialization

Default properties for shape annotations can be configured during initialization using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. These apply when the corresponding shape is created from the toolbar or programmatically.
Default properties for shape annotations can be configured during initialization using [LineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LineSettings), [ArrowSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AreaSettings), [RectangleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_RectangleSettings), [CircleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CircleSettings), and [PolygonSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PolygonSettings). These apply when the corresponding shape is created from the toolbar or programmatically.

```cshtml
Expand Down Expand Up @@ -190,7 +190,7 @@ The appearance of an annotation’s selector can be customized using [Annotation

## Add shape annotation Programmatically

The Blazor SfPdfViewer supports programmatic creation of shape annotationsRectangle, Line, Arrow, Circle, and Polygonusing [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_). Ensure the document is loaded and the component reference is available before invoking API calls.
The Blazor SfPdfViewer supports programmatic creation of shape annotations Rectangle, Line, Arrow, Circle, and Polygon using [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_). Ensure the document is loaded and the component reference is available before invoking API calls.

Below is an example demonstrating how to use this method to add a shape annotation to a PDF document:

Expand Down Expand Up @@ -320,7 +320,7 @@ The following code demonstrates how to delete multiple annotations at once in PD

## Edit shape annotation Programmatically

Shape annotationsRectangle, Line, Arrow, Circle, and Polygoncan be edited programmatically using [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_). Retrieve the target annotation from [GetAnnotationsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetAnnotationsAsync) and update the desired properties before submitting the edit.
Shape annotations Rectangle, Line, Arrow, Circle, and Polygon can be edited programmatically using [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_). Retrieve the target annotation from [GetAnnotationsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetAnnotationsAsync) and update the desired properties before submitting the edit.

Below is an example demonstrating how to edit a shape annotation programmatically:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ N> Only JPEG (JPG/JPEG) image formats are supported for custom stamp annotations

## Setting default properties during control initialization

Default properties for stamp annotations can be configured before the component is created by using `StampSettings`. These defaults apply to newly added stamp annotations.
Default properties for stamp annotations can be configured before the component is created by using [StampSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_StampSettings). These defaults apply to newly added stamp annotations.

After changing the default opacity using the Edit Opacity tool, the currently selected value is applied to subsequent stamps.

Expand Down Expand Up @@ -81,7 +81,7 @@ After changing the default opacity using the Edit Opacity tool, the currently se

## Adding a custom stamp to the PDF document via PdfViewerCustomStampSettings

An image can be added as a custom stamp icon by using the `CustomStamps` property of the `PdfViewerCustomStampSettings` class.
An image can be added as a custom stamp icon by using the [CustomStamps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCustomStampSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerCustomStampSettings_CustomStamps) property of the [PdfViewerCustomStampSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CustomStampSettings) class.

The following example illustrates how to add an image as a stamp annotation in the SfPdfViewer.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Use the menu in the Comment panel to modify or delete comments, replies, and the

## Setting default properties during control initialization

Set default properties for sticky notes annotations before initializing the control using StickyNotesSettings.
Set default properties for sticky notes annotations before initializing the control using [StickyNotesSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_StickyNotesSettings).

After changing the default opacity using the Edit Opacity tool, the values are updated to the selected settings.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ Change the annotation opacity using the range slider in the **Edit Opacity** too

## Text markup annotation settings

Set default properties for text markup annotations before rendering the component using the `HighlightSettings`, `UnderlineSettings`, `StrikethroughSettings`, and `SquigglySettings` parameters.
Set default properties for text markup annotations before rendering the component using the [HighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HighlightSettings), [UnderlineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UnderlineSettings), [StrikethroughSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_StrikethroughSettings), and [SquigglySettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SquigglySettings) parameters.

N> After changing the default color and opacity using the **Edit Color** and **Edit Opacity** tools, those values become the new defaults for subsequent annotations.

Expand Down Expand Up @@ -398,4 +398,4 @@ N> Alternatively, the annotation can be deleted using its annotation ID with the

## See also

* [How to change the highlight color of the text](../how-to/change-the-highlighted-color-of-the-text)
* [How to change the highlight color of the text](../faqs/how-to-change-the-highlighted-color-of-the-text)
Loading