| Server IP : 212.252.79.165 / Your IP : 216.73.217.172 [ Web Server : Apache System : Linux 212-252-79-165.cprapid.com 5.15.0-153-generic #163-Ubuntu SMP Thu Aug 7 16:37:18 UTC 2025 x86_64 User : cehaburo ( 1001) PHP Version : 8.1.33 Disable Function : exec,passthru,shell_exec,system Domains : 48 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/cehaburo/www/pdfjs/doc/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PDFJS Express WebViewer Namespace: UI</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.pdftron.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">PDFJS Express WebViewer</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="Core.html">Core</a></li><li><a href="Core.Actions.html">Core.Actions</a></li><li><a href="Core.Annotations.html">Core.Annotations</a></li><li><a href="Core.ContentEdit.html">Core.ContentEdit</a></li><li><a href="Core.Math.html">Core.Math</a></li><li><a href="Core.PartRetrievers.html">Core.PartRetrievers</a></li><li><a href="Core.Search.html">Core.Search</a></li><li><a href="Core.Tools.html">Core.Tools</a></li><li><a href="UI.html">UI</a></li><li><a href="UI.Fonts.html">UI.Fonts</a></li><li><a href="UI.Hotkeys.html">UI.Hotkeys</a></li><li><a href="UI.NotesPanel.html">UI.NotesPanel</a></li><li><a href="UI.TabManager.html">UI.TabManager</a></li><li><a href="UI.ThumbnailsPanel.html">UI.ThumbnailsPanel</a></li><li><a href="UI.VerificationOptions.html">UI.VerificationOptions</a></li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="Core.Actions.Action.html">Core.Actions.Action</a></li><li><a href="Core.Actions.Dest.html">Core.Actions.Dest</a></li><li><a href="Core.Actions.GoTo.html">Core.Actions.GoTo</a></li><li><a href="Core.Actions.GoToR.html">Core.Actions.GoToR</a></li><li><a href="Core.Actions.Hide.html">Core.Actions.Hide</a></li><li><a href="Core.Actions.JavaScript.html">Core.Actions.JavaScript</a></li><li><a href="Core.Actions.Named.html">Core.Actions.Named</a></li><li><a href="Core.Actions.ResetForm.html">Core.Actions.ResetForm</a></li><li><a href="Core.Actions.SubmitForm.html">Core.Actions.SubmitForm</a></li><li><a href="Core.Actions.URI.html">Core.Actions.URI</a></li><li><a href="Core.AnnotationHistoryManager.html">Core.AnnotationHistoryManager</a></li><li><a href="Core.AnnotationManager.html">Core.AnnotationManager</a></li><li><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></li><li><a href="Core.Annotations.ArcAnnotation.html">Core.Annotations.ArcAnnotation</a></li><li><a href="Core.Annotations.Border.html">Core.Annotations.Border</a></li><li><a href="Core.Annotations.BoxControlHandle.html">Core.Annotations.BoxControlHandle</a></li><li><a href="Core.Annotations.BoxSelectionModel.html">Core.Annotations.BoxSelectionModel</a></li><li><a href="Core.Annotations.ButtonWidgetAnnotation.html">Core.Annotations.ButtonWidgetAnnotation</a></li><li><a href="Core.Annotations.CalloutControlHandle.html">Core.Annotations.CalloutControlHandle</a></li><li><a href="Core.Annotations.CalloutSelectionModel.html">Core.Annotations.CalloutSelectionModel</a></li><li><a href="Core.Annotations.CanvasHelper.html">Core.Annotations.CanvasHelper</a></li><li><a href="Core.Annotations.CaretAnnotation.html">Core.Annotations.CaretAnnotation</a></li><li><a href="Core.Annotations.CheckButtonWidgetAnnotation.html">Core.Annotations.CheckButtonWidgetAnnotation</a></li><li><a href="Core.Annotations.ChoiceWidgetAnnotation.html">Core.Annotations.ChoiceWidgetAnnotation</a></li><li><a href="Core.Annotations.Color.html">Core.Annotations.Color</a></li><li><a href="Core.Annotations.ControlHandle.html">Core.Annotations.ControlHandle</a></li><li><a href="Core.Annotations.CustomAnnotation.html">Core.Annotations.CustomAnnotation</a></li><li><a href="Core.Annotations.DatePickerWidgetAnnotation.html">Core.Annotations.DatePickerWidgetAnnotation</a></li><li><a href="Core.Annotations.EllipseAnnotation.html">Core.Annotations.EllipseAnnotation</a></li><li><a href="Core.Annotations.FileAttachmentAnnotation.html">Core.Annotations.FileAttachmentAnnotation</a></li><li><a href="Core.Annotations.Font.html">Core.Annotations.Font</a></li><li><a href="Core.Annotations.Forms.html">Core.Annotations.Forms</a></li><li><a href="Core.Annotations.Forms.EmbeddedJS.html">Core.Annotations.Forms.EmbeddedJS</a></li><li><a href="Core.Annotations.Forms.Field.html">Core.Annotations.Forms.Field</a></li><li><a href="Core.Annotations.Forms.FieldManager.html">Core.Annotations.Forms.FieldManager</a></li><li><a href="Core.Annotations.FreeHandAnnotation.html">Core.Annotations.FreeHandAnnotation</a></li><li><a href="Core.Annotations.FreeTextAnnotation.html">Core.Annotations.FreeTextAnnotation</a></li><li><a href="Core.Annotations.FreeTextAnnotation.RichTextEditor.html">Core.Annotations.FreeTextAnnotation.RichTextEditor</a></li><li><a href="Core.Annotations.FreeTextSelectionModel.html">Core.Annotations.FreeTextSelectionModel</a></li><li><a href="Core.Annotations.HTMLAnnotation.html">Core.Annotations.HTMLAnnotation</a></li><li><a href="Core.Annotations.IPathAnnotation.html">Core.Annotations.IPathAnnotation</a></li><li><a href="Core.Annotations.LineAnnotation.html">Core.Annotations.LineAnnotation</a></li><li><a href="Core.Annotations.LineControlHandle.html">Core.Annotations.LineControlHandle</a></li><li><a href="Core.Annotations.LineSelectionModel.html">Core.Annotations.LineSelectionModel</a></li><li><a href="Core.Annotations.Link.html">Core.Annotations.Link</a></li><li><a href="Core.Annotations.ListWidgetAnnotation.html">Core.Annotations.ListWidgetAnnotation</a></li><li><a href="Core.Annotations.MarkupAnnotation.html">Core.Annotations.MarkupAnnotation</a></li><li><a href="Core.Annotations.Model3D.html">Core.Annotations.Model3D</a></li><li><a href="Core.Annotations.PathControlHandle.html">Core.Annotations.PathControlHandle</a></li><li><a href="Core.Annotations.PathSelectionModel.html">Core.Annotations.PathSelectionModel</a></li><li><a href="Core.Annotations.PolygonAnnotation.html">Core.Annotations.PolygonAnnotation</a></li><li><a href="Core.Annotations.PolygonControlHandle.html">Core.Annotations.PolygonControlHandle</a></li><li><a href="Core.Annotations.PolygonSelectionModel.html">Core.Annotations.PolygonSelectionModel</a></li><li><a href="Core.Annotations.PolylineAnnotation.html">Core.Annotations.PolylineAnnotation</a></li><li><a href="Core.Annotations.PopupAnnotation.html">Core.Annotations.PopupAnnotation</a></li><li><a href="Core.Annotations.RadioButtonWidgetAnnotation.html">Core.Annotations.RadioButtonWidgetAnnotation</a></li><li><a href="Core.Annotations.RectangleAnnotation.html">Core.Annotations.RectangleAnnotation</a></li><li><a href="Core.Annotations.RedactionAnnotation.html">Core.Annotations.RedactionAnnotation</a></li><li><a href="Core.Annotations.RedactionSelectionModel.html">Core.Annotations.RedactionSelectionModel</a></li><li><a href="Core.Annotations.RotationControlHandle.html">Core.Annotations.RotationControlHandle</a></li><li><a href="Core.Annotations.RotationUtils.html">Core.Annotations.RotationUtils</a></li><li><a href="Core.Annotations.SelectionAlgorithm.html">Core.Annotations.SelectionAlgorithm</a></li><li><a href="Core.Annotations.SelectionModel.html">Core.Annotations.SelectionModel</a></li><li><a href="Core.Annotations.SignatureWidgetAnnotation.html">Core.Annotations.SignatureWidgetAnnotation</a></li><li><a href="Core.Annotations.SoundAnnotation.html">Core.Annotations.SoundAnnotation</a></li><li><a href="Core.Annotations.StampAnnotation.html">Core.Annotations.StampAnnotation</a></li><li><a href="Core.Annotations.StickyAnnotation.html">Core.Annotations.StickyAnnotation</a></li><li><a href="Core.Annotations.TextHighlightAnnotation.html">Core.Annotations.TextHighlightAnnotation</a></li><li><a href="Core.Annotations.TextMarkupAnnotation.html">Core.Annotations.TextMarkupAnnotation</a></li><li><a href="Core.Annotations.TextRedactAnnotation.html">Core.Annotations.TextRedactAnnotation</a></li><li><a href="Core.Annotations.TextSelectionModel.html">Core.Annotations.TextSelectionModel</a></li><li><a href="Core.Annotations.TextSquigglyAnnotation.html">Core.Annotations.TextSquigglyAnnotation</a></li><li><a href="Core.Annotations.TextStrikeoutAnnotation.html">Core.Annotations.TextStrikeoutAnnotation</a></li><li><a href="Core.Annotations.TextUnderlineAnnotation.html">Core.Annotations.TextUnderlineAnnotation</a></li><li><a href="Core.Annotations.TextWidgetAnnotation.html">Core.Annotations.TextWidgetAnnotation</a></li><li><a href="Core.Annotations.WidgetAnnotation.html">Core.Annotations.WidgetAnnotation</a></li><li><a href="Core.Annotations.WidgetFlags.html">Core.Annotations.WidgetFlags</a></li><li><a href="Core.Annotations.XFDFUtils.html">Core.Annotations.XFDFUtils</a></li><li><a href="Core.Bookmark.html">Core.Bookmark</a></li><li><a href="Core.DisplayMode.html">Core.DisplayMode</a></li><li><a href="Core.DisplayModeManager.html">Core.DisplayModeManager</a></li><li><a href="Core.Document.html">Core.Document</a></li><li><a href="Core.DocumentViewer.html">Core.DocumentViewer</a></li><li><a href="Core.EditBoxManager.html">Core.EditBoxManager</a></li><li><a href="Core.EventHandler.html">Core.EventHandler</a></li><li><a href="Core.Math.Matrix.html">Core.Math.Matrix</a></li><li><a href="Core.Math.Point.html">Core.Math.Point</a></li><li><a href="Core.Math.Quad.html">Core.Math.Quad</a></li><li><a href="Core.Math.Rect.html">Core.Math.Rect</a></li><li><a href="Core.Math.TransformationBuilder.html">Core.Math.TransformationBuilder</a></li><li><a href="Core.MeasurementManager.html">Core.MeasurementManager</a></li><li><a href="Core.PartRetrievers.PartRetriever.html">Core.PartRetrievers.PartRetriever</a></li><li><a href="Core.Scale.html">Core.Scale</a></li><li><a href="Core.Tools.AnnotationEditTool.html">Core.Tools.AnnotationEditTool</a></li><li><a href="Core.Tools.AnnotationSelectTool.html">Core.Tools.AnnotationSelectTool</a></li><li><a href="Core.Tools.ArcCreateTool.html">Core.Tools.ArcCreateTool</a></li><li><a href="Core.Tools.ArcMeasurementCreateTool.html">Core.Tools.ArcMeasurementCreateTool</a></li><li><a href="Core.Tools.AreaMeasurementCreateTool.html">Core.Tools.AreaMeasurementCreateTool</a></li><li><a href="Core.Tools.ArrowCreateTool.html">Core.Tools.ArrowCreateTool</a></li><li><a href="Core.Tools.CalloutCreateTool.html">Core.Tools.CalloutCreateTool</a></li><li><a href="Core.Tools.ChangeViewCreateTool.html">Core.Tools.ChangeViewCreateTool</a></li><li><a href="Core.Tools.CheckBoxFormFieldCreateTool.html">Core.Tools.CheckBoxFormFieldCreateTool</a></li><li><a href="Core.Tools.CloudyRectangularAreaMeasurementTool.html">Core.Tools.CloudyRectangularAreaMeasurementTool</a></li><li><a href="Core.Tools.ComboBoxFormFieldCreateTool.html">Core.Tools.ComboBoxFormFieldCreateTool</a></li><li><a href="Core.Tools.ContentEditTool.html">Core.Tools.ContentEditTool</a></li><li><a href="Core.Tools.CountMeasurementCreateTool.html">Core.Tools.CountMeasurementCreateTool</a></li><li><a href="Core.Tools.DateFreeTextCreateTool.html">Core.Tools.DateFreeTextCreateTool</a></li><li><a href="Core.Tools.DistanceMeasurementCreateTool.html">Core.Tools.DistanceMeasurementCreateTool</a></li><li><a href="Core.Tools.EllipseCreateTool.html">Core.Tools.EllipseCreateTool</a></li><li><a href="Core.Tools.EllipseMeasurementCreateTool.html">Core.Tools.EllipseMeasurementCreateTool</a></li><li><a href="Core.Tools.EraserTool.html">Core.Tools.EraserTool</a></li><li><a href="Core.Tools.FileAttachmentCreateTool.html">Core.Tools.FileAttachmentCreateTool</a></li><li><a href="Core.Tools.FreeHandCreateTool.html">Core.Tools.FreeHandCreateTool</a></li><li><a href="Core.Tools.FreeHandHighlightCreateTool.html">Core.Tools.FreeHandHighlightCreateTool</a></li><li><a href="Core.Tools.FreeTextCreateTool.html">Core.Tools.FreeTextCreateTool</a></li><li><a href="Core.Tools.GenericAnnotationCreateTool.html">Core.Tools.GenericAnnotationCreateTool</a></li><li><a href="Core.Tools.LineCreateTool.html">Core.Tools.LineCreateTool</a></li><li><a href="Core.Tools.ListBoxFormFieldCreateTool.html">Core.Tools.ListBoxFormFieldCreateTool</a></li><li><a href="Core.Tools.MarqueeZoomTool.html">Core.Tools.MarqueeZoomTool</a></li><li><a href="Core.Tools.PageCoordinate.html">Core.Tools.PageCoordinate</a></li><li><a href="Core.Tools.PanTool.html">Core.Tools.PanTool</a></li><li><a href="Core.Tools.PerimeterMeasurementCreateTool.html">Core.Tools.PerimeterMeasurementCreateTool</a></li><li><a href="Core.Tools.PolygonCloudCreateTool.html">Core.Tools.PolygonCloudCreateTool</a></li><li><a href="Core.Tools.PolygonCreateTool.html">Core.Tools.PolygonCreateTool</a></li><li><a href="Core.Tools.PolylineCreateTool.html">Core.Tools.PolylineCreateTool</a></li><li><a href="Core.Tools.RadioButtonFormFieldCreateTool.html">Core.Tools.RadioButtonFormFieldCreateTool</a></li><li><a href="Core.Tools.RectangleCreateTool.html">Core.Tools.RectangleCreateTool</a></li><li><a href="Core.Tools.RectangularAreaMeasurementTool.html">Core.Tools.RectangularAreaMeasurementTool</a></li><li><a href="Core.Tools.RedactionCreateTool.html">Core.Tools.RedactionCreateTool</a></li><li><a href="Core.Tools.RubberStampCreateTool.html">Core.Tools.RubberStampCreateTool</a></li><li><a href="Core.Tools.SignatureCreateTool.html">Core.Tools.SignatureCreateTool</a></li><li><a href="Core.Tools.StampCreateTool.html">Core.Tools.StampCreateTool</a></li><li><a href="Core.Tools.StickyCreateTool.html">Core.Tools.StickyCreateTool</a></li><li><a href="Core.Tools.TextAnnotationCreateTool.html">Core.Tools.TextAnnotationCreateTool</a></li><li><a href="Core.Tools.TextFormFieldCreateTool.html">Core.Tools.TextFormFieldCreateTool</a></li><li><a href="Core.Tools.TextHighlightCreateTool.html">Core.Tools.TextHighlightCreateTool</a></li><li><a href="Core.Tools.TextSelectTool.html">Core.Tools.TextSelectTool</a></li><li><a href="Core.Tools.TextSquigglyCreateTool.html">Core.Tools.TextSquigglyCreateTool</a></li><li><a href="Core.Tools.TextStrikeoutCreateTool.html">Core.Tools.TextStrikeoutCreateTool</a></li><li><a href="Core.Tools.TextTool.html">Core.Tools.TextTool</a></li><li><a href="Core.Tools.TextUnderlineCreateTool.html">Core.Tools.TextUnderlineCreateTool</a></li><li><a href="Core.Tools.Tool.html">Core.Tools.Tool</a></li><li><a href="TextHighlightAnnotation.html">TextHighlightAnnotation</a></li><li><a href="UI.Header.html">UI.Header</a></li><li><a href="UI.MentionsManager.html">UI.MentionsManager</a></li><li><a href="WebViewerInstance.html">WebViewerInstance</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="Core.AnnotationHistoryManager.html#event:historyChanged">Core.AnnotationHistoryManager#event:historyChanged</a></li><li><a href="Core.AnnotationManager.html#event:addReply">Core.AnnotationManager#event:addReply</a></li><li><a href="Core.AnnotationManager.html#event:annotationChanged">Core.AnnotationManager#event:annotationChanged</a></li><li><a href="Core.AnnotationManager.html#event:annotationDeselected">Core.AnnotationManager#event:annotationDeselected</a></li><li><a href="Core.AnnotationManager.html#event:annotationDoubleClicked">Core.AnnotationManager#event:annotationDoubleClicked</a></li><li><a href="Core.AnnotationManager.html#event:annotationHidden">Core.AnnotationManager#event:annotationHidden</a></li><li><a href="Core.AnnotationManager.html#event:annotationsDrawn">Core.AnnotationManager#event:annotationsDrawn</a></li><li><a href="Core.AnnotationManager.html#event:annotationSelected">Core.AnnotationManager#event:annotationSelected</a></li><li><a href="Core.AnnotationManager.html#event:deleteReply">Core.AnnotationManager#event:deleteReply</a></li><li><a href="Core.AnnotationManager.html#event:fieldChanged">Core.AnnotationManager#event:fieldChanged</a></li><li><a href="Core.AnnotationManager.html#event:fileAttachmentDataAvailable">Core.AnnotationManager#event:fileAttachmentDataAvailable</a></li><li><a href="Core.AnnotationManager.html#event:setNoteText">Core.AnnotationManager#event:setNoteText</a></li><li><a href="Core.AnnotationManager.html#event:updateAnnotationPermission">Core.AnnotationManager#event:updateAnnotationPermission</a></li><li><a href="Core.Annotations.Forms.Field.html#event:calculate">Core.Annotations.Forms.Field#event:calculate</a></li><li><a href="Core.Annotations.Forms.Field.html#event:change">Core.Annotations.Forms.Field#event:change</a></li><li><a href="Core.Annotations.Forms.Field.html#event:commit">Core.Annotations.Forms.Field#event:commit</a></li><li><a href="Core.ContentEdit.html#event:editBoxesAvailable">Core.ContentEdit#event:editBoxesAvailable</a></li><li><a href="Core.ContentEdit.html#event:textContentUpdated">Core.ContentEdit#event:textContentUpdated</a></li><li><a href="Core.Document.html#event:colorSeparationAdded">Core.Document#event:colorSeparationAdded</a></li><li><a href="Core.Document.html#event:layersUpdated">Core.Document#event:layersUpdated</a></li><li><a href="Core.DocumentViewer.html#event:activeSearchResultChanged">Core.DocumentViewer#event:activeSearchResultChanged</a></li><li><a href="Core.DocumentViewer.html#event:annotationsLoaded">Core.DocumentViewer#event:annotationsLoaded</a></li><li><a href="Core.DocumentViewer.html#event:beforeDocumentLoaded">Core.DocumentViewer#event:beforeDocumentLoaded</a></li><li><a href="Core.DocumentViewer.html#event:beginRendering">Core.DocumentViewer#event:beginRendering</a></li><li><a href="Core.DocumentViewer.html#event:click">Core.DocumentViewer#event:click</a></li><li><a href="Core.DocumentViewer.html#event:dblClick">Core.DocumentViewer#event:dblClick</a></li><li><a href="Core.DocumentViewer.html#event:displayModeUpdated">Core.DocumentViewer#event:displayModeUpdated</a></li><li><a href="Core.DocumentViewer.html#event:displayPageLocation">Core.DocumentViewer#event:displayPageLocation</a></li><li><a href="Core.DocumentViewer.html#event:documentLoaded">Core.DocumentViewer#event:documentLoaded</a></li><li><a href="Core.DocumentViewer.html#event:documentUnloaded">Core.DocumentViewer#event:documentUnloaded</a></li><li><a href="Core.DocumentViewer.html#event:embeddedThumbnailComplete">Core.DocumentViewer#event:embeddedThumbnailComplete</a></li><li><a href="Core.DocumentViewer.html#event:finishedRendering">Core.DocumentViewer#event:finishedRendering</a></li><li><a href="Core.DocumentViewer.html#event:fitModeUpdated">Core.DocumentViewer#event:fitModeUpdated</a></li><li><a href="Core.DocumentViewer.html#event:keyDown">Core.DocumentViewer#event:keyDown</a></li><li><a href="Core.DocumentViewer.html#event:keyUp">Core.DocumentViewer#event:keyUp</a></li><li><a href="Core.DocumentViewer.html#event:mouseEnter">Core.DocumentViewer#event:mouseEnter</a></li><li><a href="Core.DocumentViewer.html#event:mouseLeave">Core.DocumentViewer#event:mouseLeave</a></li><li><a href="Core.DocumentViewer.html#event:mouseLeftDown">Core.DocumentViewer#event:mouseLeftDown</a></li><li><a href="Core.DocumentViewer.html#event:mouseLeftUp">Core.DocumentViewer#event:mouseLeftUp</a></li><li><a href="Core.DocumentViewer.html#event:mouseMove">Core.DocumentViewer#event:mouseMove</a></li><li><a href="Core.DocumentViewer.html#event:mouseRightDown">Core.DocumentViewer#event:mouseRightDown</a></li><li><a href="Core.DocumentViewer.html#event:mouseRightUp">Core.DocumentViewer#event:mouseRightUp</a></li><li><a href="Core.DocumentViewer.html#event:notify">Core.DocumentViewer#event:notify</a></li><li><a href="Core.DocumentViewer.html#event:pageComplete">Core.DocumentViewer#event:pageComplete</a></li><li><a href="Core.DocumentViewer.html#event:pageNumberUpdated">Core.DocumentViewer#event:pageNumberUpdated</a></li><li><a href="Core.DocumentViewer.html#event:pagesUpdated">Core.DocumentViewer#event:pagesUpdated</a></li><li><a href="Core.DocumentViewer.html#event:rotationUpdated">Core.DocumentViewer#event:rotationUpdated</a></li><li><a href="Core.DocumentViewer.html#event:searchInProgress">Core.DocumentViewer#event:searchInProgress</a></li><li><a href="Core.DocumentViewer.html#event:searchResultsChanged">Core.DocumentViewer#event:searchResultsChanged</a></li><li><a href="Core.DocumentViewer.html#event:tap">Core.DocumentViewer#event:tap</a></li><li><a href="Core.DocumentViewer.html#event:textSelected">Core.DocumentViewer#event:textSelected</a></li><li><a href="Core.DocumentViewer.html#event:toolModeUpdated">Core.DocumentViewer#event:toolModeUpdated</a></li><li><a href="Core.DocumentViewer.html#event:toolUpdated">Core.DocumentViewer#event:toolUpdated</a></li><li><a href="Core.DocumentViewer.html#event:zoomUpdated">Core.DocumentViewer#event:zoomUpdated</a></li><li><a href="Core.EditBoxManager.html#event:editorBlur">Core.EditBoxManager#event:editorBlur</a></li><li><a href="Core.EditBoxManager.html#event:editorFocus">Core.EditBoxManager#event:editorFocus</a></li><li><a href="Core.EditBoxManager.html#event:editorSelectionChanged">Core.EditBoxManager#event:editorSelectionChanged</a></li><li><a href="Core.EditBoxManager.html#event:editorTextChanged">Core.EditBoxManager#event:editorTextChanged</a></li><li><a href="Core.MeasurementManager.html#event:scaleUpdated">Core.MeasurementManager#event:scaleUpdated</a></li><li><a href="Core.Tools.ArcCreateTool.html#event:annotationAdded">Core.Tools.ArcCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ArcCreateTool.html#event:annotationCreated">Core.Tools.ArcCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.ArcMeasurementCreateTool.html#event:annotationAdded">Core.Tools.ArcMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ArcMeasurementCreateTool.html#event:annotationCreated">Core.Tools.ArcMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.AreaMeasurementCreateTool.html#event:annotationAdded">Core.Tools.AreaMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.AreaMeasurementCreateTool.html#event:annotationCreated">Core.Tools.AreaMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.ArrowCreateTool.html#event:annotationAdded">Core.Tools.ArrowCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ArrowCreateTool.html#event:annotationCreated">Core.Tools.ArrowCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.CalloutCreateTool.html#event:annotationAdded">Core.Tools.CalloutCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.CalloutCreateTool.html#event:annotationCreated">Core.Tools.CalloutCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.ChangeViewCreateTool.html#event:annotationAdded">Core.Tools.ChangeViewCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ChangeViewCreateTool.html#event:annotationCreated">Core.Tools.ChangeViewCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.CheckBoxFormFieldCreateTool.html#event:annotationAdded">Core.Tools.CheckBoxFormFieldCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.CheckBoxFormFieldCreateTool.html#event:annotationCreated">Core.Tools.CheckBoxFormFieldCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.CloudyRectangularAreaMeasurementTool.html#event:annotationAdded">Core.Tools.CloudyRectangularAreaMeasurementTool#event:annotationAdded</a></li><li><a href="Core.Tools.CloudyRectangularAreaMeasurementTool.html#event:annotationCreated">Core.Tools.CloudyRectangularAreaMeasurementTool#event:annotationCreated</a></li><li><a href="Core.Tools.ComboBoxFormFieldCreateTool.html#event:annotationAdded">Core.Tools.ComboBoxFormFieldCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ComboBoxFormFieldCreateTool.html#event:annotationCreated">Core.Tools.ComboBoxFormFieldCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.CountMeasurementCreateTool.html#event:annotationAdded">Core.Tools.CountMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.CountMeasurementCreateTool.html#event:annotationCreated">Core.Tools.CountMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.CropCreateTool.html#event:cropApplied">Core.Tools.CropCreateTool#event:cropApplied</a></li><li><a href="Core.Tools.DateFreeTextCreateTool.html#event:annotationAdded">Core.Tools.DateFreeTextCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.DateFreeTextCreateTool.html#event:annotationCreated">Core.Tools.DateFreeTextCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.DistanceMeasurementCreateTool.html#event:annotationAdded">Core.Tools.DistanceMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.DistanceMeasurementCreateTool.html#event:annotationCreated">Core.Tools.DistanceMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.EllipseCreateTool.html#event:annotationAdded">Core.Tools.EllipseCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.EllipseCreateTool.html#event:annotationCreated">Core.Tools.EllipseCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.EllipseMeasurementCreateTool.html#event:annotationAdded">Core.Tools.EllipseMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.EllipseMeasurementCreateTool.html#event:annotationCreated">Core.Tools.EllipseMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.EraserTool.html#event:annotationAdded">Core.Tools.EraserTool#event:annotationAdded</a></li><li><a href="Core.Tools.EraserTool.html#event:annotationCreated">Core.Tools.EraserTool#event:annotationCreated</a></li><li><a href="Core.Tools.EraserTool.html#event:erasingAnnotation">Core.Tools.EraserTool#event:erasingAnnotation</a></li><li><a href="Core.Tools.FreeHandCreateTool.html#event:annotationAdded">Core.Tools.FreeHandCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.FreeHandCreateTool.html#event:annotationCreated">Core.Tools.FreeHandCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.FreeHandHighlightCreateTool.html#event:annotationAdded">Core.Tools.FreeHandHighlightCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.FreeHandHighlightCreateTool.html#event:annotationCreated">Core.Tools.FreeHandHighlightCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.FreeTextCreateTool.html#event:annotationAdded">Core.Tools.FreeTextCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.FreeTextCreateTool.html#event:annotationCreated">Core.Tools.FreeTextCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.GenericAnnotationCreateTool.html#event:annotationAdded">Core.Tools.GenericAnnotationCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.GenericAnnotationCreateTool.html#event:annotationCreated">Core.Tools.GenericAnnotationCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.LineCreateTool.html#event:annotationAdded">Core.Tools.LineCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.LineCreateTool.html#event:annotationCreated">Core.Tools.LineCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.ListBoxFormFieldCreateTool.html#event:annotationAdded">Core.Tools.ListBoxFormFieldCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.ListBoxFormFieldCreateTool.html#event:annotationCreated">Core.Tools.ListBoxFormFieldCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.PerimeterMeasurementCreateTool.html#event:annotationAdded">Core.Tools.PerimeterMeasurementCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.PerimeterMeasurementCreateTool.html#event:annotationCreated">Core.Tools.PerimeterMeasurementCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.PolygonCloudCreateTool.html#event:annotationAdded">Core.Tools.PolygonCloudCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.PolygonCloudCreateTool.html#event:annotationCreated">Core.Tools.PolygonCloudCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.PolygonCreateTool.html#event:annotationAdded">Core.Tools.PolygonCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.PolygonCreateTool.html#event:annotationCreated">Core.Tools.PolygonCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.PolylineCreateTool.html#event:annotationAdded">Core.Tools.PolylineCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.PolylineCreateTool.html#event:annotationCreated">Core.Tools.PolylineCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.RadioButtonFormFieldCreateTool.html#event:annotationAdded">Core.Tools.RadioButtonFormFieldCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.RadioButtonFormFieldCreateTool.html#event:annotationCreated">Core.Tools.RadioButtonFormFieldCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.RectangleCreateTool.html#event:annotationAdded">Core.Tools.RectangleCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.RectangleCreateTool.html#event:annotationCreated">Core.Tools.RectangleCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.RectangularAreaMeasurementTool.html#event:annotationAdded">Core.Tools.RectangularAreaMeasurementTool#event:annotationAdded</a></li><li><a href="Core.Tools.RectangularAreaMeasurementTool.html#event:annotationCreated">Core.Tools.RectangularAreaMeasurementTool#event:annotationCreated</a></li><li><a href="Core.Tools.RedactionCreateTool.html#event:annotationAdded">Core.Tools.RedactionCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.RedactionCreateTool.html#event:annotationCreated">Core.Tools.RedactionCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.RubberStampCreateTool.html#event:annotationAdded">Core.Tools.RubberStampCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.SignatureCreateTool.html#event:annotationAdded">Core.Tools.SignatureCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.SignatureCreateTool.html#event:fileRejected">Core.Tools.SignatureCreateTool#event:fileRejected</a></li><li><a href="Core.Tools.SignatureCreateTool.html#event:locationSelected">Core.Tools.SignatureCreateTool#event:locationSelected</a></li><li><a href="Core.Tools.SignatureCreateTool.html#event:signatureDeleted">Core.Tools.SignatureCreateTool#event:signatureDeleted</a></li><li><a href="Core.Tools.SignatureCreateTool.html#event:signatureSaved">Core.Tools.SignatureCreateTool#event:signatureSaved</a></li><li><a href="Core.Tools.StampCreateTool.html#event:annotationAdded">Core.Tools.StampCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.StampCreateTool.html#event:fileRejected">Core.Tools.StampCreateTool#event:fileRejected</a></li><li><a href="Core.Tools.StickyCreateTool.html#event:annotationAdded">Core.Tools.StickyCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.StickyCreateTool.html#event:annotationCreated">Core.Tools.StickyCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextAnnotationCreateTool.html#event:annotationAdded">Core.Tools.TextAnnotationCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextAnnotationCreateTool.html#event:annotationCreated">Core.Tools.TextAnnotationCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextFormFieldCreateTool.html#event:annotationAdded">Core.Tools.TextFormFieldCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextFormFieldCreateTool.html#event:annotationCreated">Core.Tools.TextFormFieldCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextHighlightCreateTool.html#event:annotationAdded">Core.Tools.TextHighlightCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextHighlightCreateTool.html#event:annotationCreated">Core.Tools.TextHighlightCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextSelectTool.html#event:selectionComplete">Core.Tools.TextSelectTool#event:selectionComplete</a></li><li><a href="Core.Tools.TextSquigglyCreateTool.html#event:annotationAdded">Core.Tools.TextSquigglyCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextSquigglyCreateTool.html#event:annotationCreated">Core.Tools.TextSquigglyCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextStrikeoutCreateTool.html#event:annotationAdded">Core.Tools.TextStrikeoutCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextStrikeoutCreateTool.html#event:annotationCreated">Core.Tools.TextStrikeoutCreateTool#event:annotationCreated</a></li><li><a href="Core.Tools.TextUnderlineCreateTool.html#event:annotationAdded">Core.Tools.TextUnderlineCreateTool#event:annotationAdded</a></li><li><a href="Core.Tools.TextUnderlineCreateTool.html#event:annotationCreated">Core.Tools.TextUnderlineCreateTool#event:annotationCreated</a></li><li><a href="UI.MentionsManager.html#event:mentionChanged">UI.MentionsManager#event:mentionChanged</a></li><li><a href="UI.html#event:annotationFilterChanged">UI#event:annotationFilterChanged</a></li><li><a href="UI.html#event:beforeTabChanged">UI#event:beforeTabChanged</a></li><li><a href="UI.html#event:documentLoaded">UI#event:documentLoaded</a></li><li><a href="UI.html#event:documentMerged">UI#event:documentMerged</a></li><li><a href="UI.html#event:dragOutline">UI#event:dragOutline</a></li><li><a href="UI.html#event:fileDownloaded">UI#event:fileDownloaded</a></li><li><a href="UI.html#event:finishedSavingPDF">UI#event:finishedSavingPDF</a></li><li><a href="UI.html#event:fullscreenModeToggled">UI#event:fullscreenModeToggled</a></li><li><a href="UI.html#event:loaderror">UI#event:loaderror</a></li><li><a href="UI.html#event:outlineBookmarksChanged">UI#event:outlineBookmarksChanged</a></li><li><a href="UI.html#event:panelResized">UI#event:panelResized</a></li><li><a href="UI.html#event:selectedThumbnailChanged">UI#event:selectedThumbnailChanged</a></li><li><a href="UI.html#event:tabAdded">UI#event:tabAdded</a></li><li><a href="UI.html#event:tabDeleted">UI#event:tabDeleted</a></li><li><a href="UI.html#event:tabMoved">UI#event:tabMoved</a></li><li><a href="UI.html#event:themeChanged">UI#event:themeChanged</a></li><li><a href="UI.html#event:thumbnailDragged">UI#event:thumbnailDragged</a></li><li><a href="UI.html#event:thumbnailDropped">UI#event:thumbnailDropped</a></li><li><a href="UI.html#event:toolbarGroupChanged">UI#event:toolbarGroupChanged</a></li><li><a href="UI.html#event:userBookmarksChanged">UI#event:userBookmarksChanged</a></li><li><a href="UI.html#event:viewerLoaded">UI#event:viewerLoaded</a></li><li><a href="UI.html#event:visibilityChanged">UI#event:visibilityChanged</a></li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="global.html#getInstance">getInstance</a></li><li><a href="global.html#WebViewer">WebViewer</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<h1 class="page-title">Namespace: UI</h1>
<section>
<header>
<h2>
UI
</h2>
</header>
<article>
<div class="container-overview">
<div class="description">WebViewer Instance UI namespace.
Contains functions and properties related to UI related parts of WebViewer</div>
<dl class="details">
</dl>
<h3>Example</h3>
<pre class="sunlight-highlight-javascript">webViewerInstance.UI.someProperty
webViewerInstance.UI.someAPI()</pre>
</div>
<h3 class="subsection-title">Classes</h3>
<dl>
<dt><a href="UI.Header.html">Header</a></dt>
<dd></dd>
<dt><a href="UI.MentionsManager.html">MentionsManager</a></dt>
<dd></dd>
</dl>
<h3 class="subsection-title">Namespaces</h3>
<dl>
<dt><a href="namespaces.html#UI.Fonts"><a href="UI.Fonts.html">Fonts</a></a></dt>
<dd></dd>
<dt><a href="namespaces.html#UI.Hotkeys"><a href="UI.Hotkeys.html">Hotkeys</a></a></dt>
<dd></dd>
<dt><a href="namespaces.html#UI.NotesPanel"><a href="UI.NotesPanel.html">NotesPanel</a></a></dt>
<dd></dd>
<dt><a href="namespaces.html#UI.TabManager"><a href="UI.TabManager.html">TabManager</a></a></dt>
<dd></dd>
<dt><a href="namespaces.html#UI.ThumbnailsPanel"><a href="UI.ThumbnailsPanel.html">ThumbnailsPanel</a></a></dt>
<dd></dd>
<dt><a href="namespaces.html#UI.VerificationOptions"><a href="UI.VerificationOptions.html">VerificationOptions</a></a></dt>
<dd></dd>
</dl>
<h3 class="subsection-title">Members</h3>
<dl>
<hr>
<dt class="name" id=".annotationPopup">
<h4 id=".annotationPopup"><span class="type-signature"><static> </span>annotationPopup</h4>
</dt>
<dd>
<div class="description">
An instance of Popup that can be used to edit items in the annotation popup component
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.Popup.html">UI.Popup</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.Popup.html">UI.Popup</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.annotationPopup.someAPI();
});</pre>
</dd>
<hr>
<dt class="name" id=".contextMenuPopup">
<h4 id=".contextMenuPopup"><span class="type-signature"><static> </span>contextMenuPopup</h4>
</dt>
<dd>
<div class="description">
An instance of Popup that can be used to edit items in the context menu popup component
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.Popup.html">UI.Popup</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.Popup.html">UI.Popup</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.contextMenuPopup.someAPI();
});</pre>
</dd>
<hr>
<dt class="name" id=".Events">
<h4 id=".Events"><span class="type-signature"><static> </span>Events</h4>
</dt>
<dd>
<div class="description">
Contains string enums for WebViewer UI events.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>ANNOTATION_FILTER_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:annotationFilterChanged">UI.Events.annotationFilterChanged</a></td>
</tr>
<tr>
<td class="name"><code>DOCUMENT_LOADED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:documentLoaded">UI.Events.documentLoaded</a></td>
</tr>
<tr>
<td class="name"><code>DOCUMENT_MERGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:documentMerged">UI.Events.documentMerged</a></td>
</tr>
<tr>
<td class="name"><code>FILE_DOWNLOADED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:fileDownloaded">UI.Events.fileDownloaded</a></td>
</tr>
<tr>
<td class="name"><code>FINISHED_SAVING_PDF</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:finishedSavingPDF">UI.Events.finishedSavingPDF</a></td>
</tr>
<tr>
<td class="name"><code>LOAD_ERROR</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:loaderror">UI.Events.loaderror</a></td>
</tr>
<tr>
<td class="name"><code>DRAG_OUTLINE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:dragOutline">UI.Events.dragOutline</a></td>
</tr>
<tr>
<td class="name"><code>DROP_OUTLINE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:dragOutline">UI.Events.dragOutline</a></td>
</tr>
<tr>
<td class="name"><code>PANEL_RESIZED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:panelResized">UI.Events.panelResized</a></td>
</tr>
<tr>
<td class="name"><code>THEME_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:themeChanged">UI.Events.themeChanged</a></td>
</tr>
<tr>
<td class="name"><code>TOOLBAR_GROUP_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:toolbarGroupChanged">UI.Events.toolbarGroupChanged</a></td>
</tr>
<tr>
<td class="name"><code>SELECTED_THUMBNAIL_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:selectedThumbnailChanged">UI.Events.selectedThumbnailChanged</a></td>
</tr>
<tr>
<td class="name"><code>THUMBNAIL_DRAGGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:thumbnailDragged">UI.Events.thumbnailDragged</a></td>
</tr>
<tr>
<td class="name"><code>THUMBNAIL_DROPPED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:thumbnailDropped">UI.Events.thumbnailDropped</a></td>
</tr>
<tr>
<td class="name"><code>USER_BOOKMARKS_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:userBookmarksChanged">UI.Events.userBookmarksChanged</a></td>
</tr>
<tr>
<td class="name"><code>OUTLINE_BOOKMARKS_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:outlineBookmarksChanged">UI.Events.outlineBookmarksChanged</a></td>
</tr>
<tr>
<td class="name"><code>VIEWER_LOADED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:viewerLoaded">UI.Events.viewerLoaded</a></td>
</tr>
<tr>
<td class="name"><code>VISIBILITY_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:visibilityChanged">UI.Events.visibilityChanged</a></td>
</tr>
<tr>
<td class="name"><code>FULLSCREEN_MODE_TOGGLED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:fullscreenModeToggled">UI.Events.fullscreenModeToggled</a></td>
</tr>
<tr>
<td class="name"><code>BEFORE_TAB_CHANGED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:beforeTabChanged">UI.Events.beforeTabChanged</a></td>
</tr>
<tr>
<td class="name"><code>TAB_DELETED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:tabDeleted">UI.Events.tabDeleted</a></td>
</tr>
<tr>
<td class="name"><code>TAB_ADDED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:tabAdded">UI.Events.tabAdded</a></td>
</tr>
<tr>
<td class="name"><code>TAB_MOVED</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><a href="UI.html#event:tabMoved">UI.Events.tabMoved</a></td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...).then(function(instance) {
const UIEvents = instance.UI.Events;
instance.UI.addEventListener(UIEvents.ANNOTATION_FILTER_CHANGED, e => {
const { types, authors, colors } = e.detail;
console.log(types, authors, colors);
});
});</pre>
</dd>
<hr>
<dt class="name" id=".Feature">
<h4 id=".Feature"><span class="type-signature"><static> </span>Feature</h4>
</dt>
<dd>
<div class="description">
Contains string enums for all features for WebViewer UI
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>Measurement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Measurement tools that can create annotations to measure distance, perimeter and area.</td>
</tr>
<tr>
<td class="name"><code>Ribbons</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A collection of toolbar groups to switch between.</td>
</tr>
<tr>
<td class="name"><code>Annotations</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Render annotations in the document and be able to edit them.</td>
</tr>
<tr>
<td class="name"><code>Download</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A download button to download the current document.</td>
</tr>
<tr>
<td class="name"><code>FilePicker</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ctrl/Cmd + O hotkey and a open file button that can be clicked to load local files.</td>
</tr>
<tr>
<td class="name"><code>LocalStorage</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Store and retrieve tool styles from window.localStorage.</td>
</tr>
<tr>
<td class="name"><code>NotesPanel</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A panel that displays information of listable annotations.</td>
</tr>
<tr>
<td class="name"><code>Print</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ctrl/Cmd + P hotkey and a print button that can be clicked to print the current document.</td>
</tr>
<tr>
<td class="name"><code>Redaction</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Redaction tools that can redact text or areas. Need fullAPI to be on to use this feature.</td>
</tr>
<tr>
<td class="name"><code>TextSelection</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to select text in a document.</td>
</tr>
<tr>
<td class="name"><code>TouchScrollLock</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Lock document scrolling in one direction in mobile devices.</td>
</tr>
<tr>
<td class="name"><code>Copy</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to copy text or annotations use Ctrl/Cmd + C hotkeys or the copy button.</td>
</tr>
<tr>
<td class="name"><code>MultipleViewerMerging</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to drag and drop pages from one instance of WebViewer into another</td>
</tr>
<tr>
<td class="name"><code>ThumbnailMerging</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to drag and drop a file into the thumbnail panel to merge</td>
</tr>
<tr>
<td class="name"><code>ThumbnailReordering</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to reorder pages using the thumbnail panel</td>
</tr>
<tr>
<td class="name"><code>PageNavigation</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to navigate through pages using mouse wheel, arrow up/down keys and the swipe gesture.</td>
</tr>
<tr>
<td class="name"><code>MouseWheelZoom</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to zoom when holding ctrl/cmd + mouse wheel.</td>
</tr>
<tr>
<td class="name"><code>Search</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ctrl/Cmd + F hotkey and a search button that can be clicked to search the current document.</td>
</tr>
<tr>
<td class="name"><code>MathSymbols</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to add math symbols in free text editor</td>
</tr>
<tr>
<td class="name"><code>OutlineEditing</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to add, move and delete outlines in the outlines panel. This feature is only available when `fullAPI: true` is used.</td>
</tr>
<tr>
<td class="name"><code>NotesPanelVirtualizedList</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Ability to use a virtualized list in the note panel. Will limit the number of notes rendered on the DOM</td>
</tr>
<tr>
<td class="name"><code>NotesShowLastUpdatedDate</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Show last updated date in notes panel instead of created date</td>
</tr>
<tr>
<td class="name"><code>MultiTab</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">toggle feature to open multiple documents in the same viewer instance</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var Feature = instance.UI.Feature;
instance.UI.enableFeatures([Feature.Measurement]);
instance.UI.disableFeatures([Feature.Copy]);
});</pre>
</dd>
<hr>
<dt class="name" id=".FitMode">
<h4 id=".FitMode"><span class="type-signature"><static> </span>FitMode</h4>
</dt>
<dd>
<div class="description">
Contains all possible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>FitPage</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A fit mode where the zoom level is fixed to the width or height of the page, whichever is smaller.</td>
</tr>
<tr>
<td class="name"><code>FitWidth</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A fit mode where the zoom level is fixed to the width of the page.</td>
</tr>
<tr>
<td class="name"><code>Zoom</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A fit mode where the zoom level is not fixed.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var FitMode = instance.UI.FitMode;
instance.UI.setFitMode(FitMode.FitWidth);
});</pre>
</dd>
<hr>
<dt class="name" id=".hotkeys">
<h4 id=".hotkeys"><span class="type-signature"><static> </span>hotkeys</h4>
</dt>
<dd>
<div class="description">
An instance of Hotkeys that can be used to enable, disable or register custom hotkeys in the viewer
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Class.<<a href="UI.Hotkeys.html">UI.Hotkeys</a>></span>
</li>
</ul>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.Hotkeys.html">UI.Hotkeys</a></li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt class="name" id=".iframeWindow">
<h4 id=".iframeWindow"><span class="type-signature"><static> </span>iframeWindow</h4>
</dt>
<dd>
<div class="description">
WebViewer iframe window object
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Window</span>
</li>
</ul>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const iframeWindow = instance.UI.iframeWindow;
// iframeWindow.SomeNamespace
// iframeWindow.document.querySelector('.some-element');
});</pre>
</dd>
<hr>
<dt class="name" id=".LayoutMode">
<h4 id=".LayoutMode"><span class="type-signature"><static> </span>LayoutMode</h4>
</dt>
<dd>
<div class="description">
Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>Single</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Only the current page will be visible.</td>
</tr>
<tr>
<td class="name"><code>Continuous</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">All pages are visible in one column.</td>
</tr>
<tr>
<td class="name"><code>Facing</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Up to two pages will be visible.</td>
</tr>
<tr>
<td class="name"><code>FacingContinuous</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">All pages visible in two columns.</td>
</tr>
<tr>
<td class="name"><code>FacingCover</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">All pages visible in two columns, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)</td>
</tr>
<tr>
<td class="name"><code>FacingCoverContinuous</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">All pages visible, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const LayoutMode = instance.UI.LayoutMode;
instance.UI.setLayoutMode(LayoutMode.Single);
});</pre>
</dd>
<hr>
<dt class="name" id=".mentions">
<h4 id=".mentions"><span class="type-signature"><static> </span>mentions</h4>
</dt>
<dd>
<div class="description">
An instance of MentionsManager that can be used to allow mentioning people in a textarea in the notes panel.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.MentionsManager.html">UI.MentionsManager</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.MentionsManager.html">UI.MentionsManager</a></li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt class="name" id=".NotesPanelSortStrategy">
<h4 id=".NotesPanelSortStrategy"><span class="type-signature"><static> </span>NotesPanelSortStrategy</h4>
</dt>
<dd>
<div class="description">
Contains string enums for all the possible sorting algorithms available in NotesPanel.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>POSITION</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by position.</td>
</tr>
<tr>
<td class="name"><code>CREATED_DATE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by creation date.</td>
</tr>
<tr>
<td class="name"><code>MODIFIED_DATE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by last modification date.</td>
</tr>
<tr>
<td class="name"><code>STATUS</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by status.</td>
</tr>
<tr>
<td class="name"><code>AUTHOR</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by the author.</td>
</tr>
<tr>
<td class="name"><code>TYPE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by type.</td>
</tr>
<tr>
<td class="name"><code>COLOR</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sort notes by color.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const sortStrategy = instance.UI.NotesPanelSortStrategy;
instance.UI.setNotesPanelSortStrategy(sortStrategy.AUTHOR);
});</pre>
</dd>
<hr>
<dt class="name" id=".pageManipulationsOverlay">
<h4 id=".pageManipulationsOverlay"><span class="type-signature"><static> </span>pageManipulationsOverlay</h4>
</dt>
<dd>
<div class="description">
An instance of PageManipulationsOverlay that can be used to edit the items included in the overlay
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.PageManipulationOverlay.html">UI.PageManipulationOverlay</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.PageManipulationOverlay.html">UI.PageManipulationOverlay</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.pageManipulationOverlay.someAPI();
})</pre>
</dd>
<hr>
<dt class="name" id=".RedactionSearchPatterns">
<h4 id=".RedactionSearchPatterns"><span class="type-signature"><static> </span>RedactionSearchPatterns</h4>
</dt>
<dd>
<div class="description">
Available search patterns that can be passed to <a href="UI.html#.replaceRedactionSearchPattern">UI.replaceRedactionSearchPattern</a>. <br/><br/>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">string</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>EMAILS</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Search pattern for emails</td>
</tr>
<tr>
<td class="name"><code>CREDIT_CARDS</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Search pattern for credit card numbers</td>
</tr>
<tr>
<td class="name"><code>PHONE_NUMBERS</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Search pattern for phone numbers</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt class="name" id=".settingsMenuOverlay">
<h4 id=".settingsMenuOverlay"><span class="type-signature"><static> </span>settingsMenuOverlay</h4>
</dt>
<dd>
<div class="description">
An instance of MenuOverlay that can be used to edit items in the settings menu overlay component.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.MenuOverlay.html">UI.MenuOverlay</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.MenuOverlay.html">UI.MenuOverlay</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.settingsMenuOverlay.someAPI();
});</pre>
</dd>
<hr>
<dt class="name" id=".textPopup">
<h4 id=".textPopup"><span class="type-signature"><static> </span>textPopup</h4>
</dt>
<dd>
<div class="description">
An instance of Popup that can be used to edit items in the text popup component
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.Popup.html">UI.Popup</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.Popup.html">UI.Popup</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.textPopup.someAPI();
});</pre>
</dd>
<hr>
<dt class="name" id=".thumbnailControlMenu">
<h4 id=".thumbnailControlMenu"><span class="type-signature"><static> </span>thumbnailControlMenu</h4>
</dt>
<dd>
<div class="description">
An instance of ThumbnailControlMenu that can be used to edit the items included in the thumbnail menu overlay
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="UI.ThumbnailControlMenu.html">UI.ThumbnailControlMenu</a></span>
</li>
</ul>
<dl class="details">
<dt class="implements">Implements:</dt>
<dd class="implements"><ul>
<li><a href="UI.ThumbnailControlMenu.html">UI.ThumbnailControlMenu</a></li>
</ul></dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function (instance) {
instance.UI.thumbnailControlMenu.someAPI();
})</pre>
</dd>
<hr>
<dt class="name" id=".ToolbarGroup">
<h4 id=".ToolbarGroup"><span class="type-signature"><static> </span>ToolbarGroup</h4>
</dt>
<dd>
<div class="description">
Contains string enums for all toolbar options for WebViewer.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>VIEW</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the view group.</td>
</tr>
<tr>
<td class="name"><code>ANNOTATE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the annotate group.</td>
</tr>
<tr>
<td class="name"><code>SHAPES</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the shapes group.</td>
</tr>
<tr>
<td class="name"><code>INSERT</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the insert group.</td>
</tr>
<tr>
<td class="name"><code>MEASURE</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the measure group.</td>
</tr>
<tr>
<td class="name"><code>EDIT</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the edit group.</td>
</tr>
<tr>
<td class="name"><code>FILL_AND_SIGN</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the fill and sign group.</td>
</tr>
<tr>
<td class="name"><code>FORMS</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the current toolbar as the forms group.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setToolbarGroup(instance.UI.ToolbarGroup.VIEW);
});</pre>
</dd>
<hr>
<dt class="name" id="VerificationOptions">
<h4 id="VerificationOptions"><span class="type-signature"></span>VerificationOptions</h4>
</dt>
<dd>
<div class="description">
VerificationOptions namespace
</div>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.VerificationOptions.html">VerificationOptions</a></li>
</ul>
</dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id=".addCustomModal"><span class="type-signature"><static> </span>addCustomModal(options)</h4>
</dt>
<dd>
<div class="description">
Add custom modal element to WebViewer.
<br /><br />
Controlling custom modals is done using the element API, for example <a href="UI.html#.openElements">openElements</a>, <a href="UI.html#.closeElements">closeElements</a>, <a href="UI.html#.toggleElement">toggleElement</a>, and <a href="UI.html#.disableElements">disableElements</a>.
dateElement string passed on these function should be same as you set in options.dataElement.
<br /><br />
Every custom modal will add new <div> element with <b>CustomModal</b> and <b><options.dataElement string></b> set as class attribute
Modal with identical <em>options.dataElement</em> will get replaced by the latest modal options.
<br /><br />
For styling these components, see <a href="https://www.pdftron.com/documentation/web/guides/customizing-styles/" target="_blank">Customizing WebViewer UI Styles</a>
<br /><br />
Note that in most cases WebViewer is run inside an iframe and in order for <i>options.disableEscapeKeyDown</i> to automatically work, the iframe must be the
active element. This can be done by setting the focus to the iframe programmatically.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">Unique name of custom modal.</td>
</tr>
<tr>
<td class="name"><code>disableBackdropClick</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Disable closing modal when user clicks outside of content area</td>
</tr>
<tr>
<td class="name"><code>disableEscapeKeyDown</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Disable closing modal when user hit escape from keyboard</td>
</tr>
<tr>
<td class="name"><code>render</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.renderCustomModal">UI.renderCustomModal</a></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">Function rendering custom model contents, this is optional</td>
</tr>
<tr>
<td class="name"><code>header</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">JSON object with title, className, style and children parameter</td>
</tr>
<tr>
<td class="name"><code>body</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">JSON object with title, className, style and children parameter</td>
</tr>
<tr>
<td class="name"><code>footer</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">JSON object with title, className, style and children parameter</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...).then(function(instance) {
const modal = {
dataElement: 'meanwhileInFinlandModal',
header: {
title: 'Modal header',
className: 'myCustomModal-header',
style: {}, // optional inline styles
children: []
},
body: {
className: 'myCustomModal-body',
style: {}, // optional inline styles
children: [ divInput1, divInput2 ], // HTML dom elements
},
footer: {
className: 'myCustomModal-footer footer',
style: {}, // optional inline styles
children: [
{
title: 'Cancel',
button: true,
style: {},
className: 'modal-button cancel-form-field-button',
onClick: (e) => { console.log('ff') }
},
{
title: 'OK',
button: true,
style: {},
className: 'modal-button confirm ok-btn',
onClick: (e) => { console.log('xx') }
},
]
}
};
instance.UI.addCustomModal(modal);
instance.UI.openElements([modal.dataElement]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".addDateTimeFormat"><span class="type-signature"><static> </span>addDateTimeFormat(dateTimeFormat)</h4>
</dt>
<dd>
<div class="description">
Adds a date and time format for the UI date and time dropdowns.
List of formats can be found here: <a href="https://github.com/iamkun/dayjs/blob/v1.11.1/docs/en/API-reference.md#format-formatstringwithtokens-string">dayjs API</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dateTimeFormat</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">An object containing the date and time formats with the respective keys. At least one of the date or time keys must be present.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>date</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">String of date format</td>
</tr>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">String of time format</td>
</tr>
<tr>
<td class="name"><code>timeFirst</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Boolean value to indicate if time should be before date in UI</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.addDateTimeFormat({
date: 'MM/DD/YYYY',
time: 'HH:mm:ss',
timeFirst: true
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".addEventListener"><span class="type-signature"><static> </span>addEventListener(eventName, listener)</h4>
</dt>
<dd>
<div class="description">
Add an event listener for the given WebViewer UI event.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">UI event name.</td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Callback function that will be invoked when the event is dispatched.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.addEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, e => {
const { types, authors, colors } = e.detail;
console.log(types, authors, colors);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".addRedactionSearchPattern"><span class="type-signature"><static> </span>addRedactionSearchPattern(searchPattern)</h4>
</dt>
<dd>
<div class="description">
Adds a new search pattern to the redaction search panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchPattern</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.RedactionSearchPattern">UI.RedactionSearchPattern</a></span>
</td>
<td class="description last">A search pattern to add to the redaction search panel</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.addRedactionSearchPattern(
{
label: 'Social Security Number',
icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 30 30"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
type: 'socialSecurityNumber',
regex: /\b\d{3}-?\d{2}-?\d{4}\b/,
}
);
});
// Or to search kewyord(s):
WebViewer(...)
.then(function(instance) {
instance.UI.addRedactionSearchPattern(
{
label: 'Confidential Information',
type: 'confidentialInformation',
regex: /confidential information/i, //Regex based search for text, case insensitive
}
);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".addSearchListener"><span class="type-signature"><static> </span>addSearchListener(searchListener)</h4>
</dt>
<dd>
<div class="description">
Adds a listener function to be called when search is completed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchListener</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.searchListener">UI.searchListener</a></span>
</td>
<td class="description last">Callback function that will be triggered when search completed</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
function searchListener(searchValue, options, results) {
console.log(searchValue, options, results);
};
instance.UI.addSearchListener(searchListener);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".addSortStrategy"><span class="type-signature"><static> </span>addSortStrategy(sortStrategy)</h4>
</dt>
<dd>
<div class="description">
Adds a sorting strategy in notes panel.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>sortStrategy</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Sorting strategy that will be used to sort notes
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the strategy, which will be shown in notes panel's dropdown</td>
</tr>
<tr>
<td class="name"><code>getSortedNotes</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.getSortedNotes">UI.getSortedNotes</a></span>
</td>
<td class="description last">Function that takes unsorted notes (annotations) and returns them sorted</td>
</tr>
<tr>
<td class="name"><code>shouldRenderSeparator</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.shouldRenderSeparator">UI.shouldRenderSeparator</a></span>
</td>
<td class="description last">Function that returns when a separator should be rendered</td>
</tr>
<tr>
<td class="name"><code>getSeparatorContent</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.getSeparatorContent">UI.getSeparatorContent</a></span>
</td>
<td class="description last">Function that returns the content of a separator</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var mySortStrategy = {
name: 'annotationType',
getSortedNotes: function(notes) {
return notes.sort(function(a ,b) {
if (a.Subject < b.Subject) return -1;
if (a.Subject > b.Subject) return 1;
if (a.Subject === b.Subject) return 0;
});
},
shouldRenderSeparator: function(prevNote, currNote) {
return prevNote.Subject !== currNote.Subject;
},
getSeparatorContent: function(prevNote, currNote) {
return currNote.Subject;
}
};
instance.UI.addSortStrategy(mySortStrategy);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".cancelPrint"><span class="type-signature"><static> </span>cancelPrint()</h4>
</dt>
<dd>
<div class="description">
Stops on-going page processing to cancel a print job.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.print();
instance.UI.cancelPrint();
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".closeDocument"><span class="type-signature"><static> </span>closeDocument()</h4>
</dt>
<dd>
<div class="description">
Closes the document that's currently opened.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A promise resolved after document is closed.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Promise.<void></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
setTimeout(function() {
instance.UI.closeDocument().then(function() {
console.log('Document is closed');
});
}, 3000);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".closeElements"><span class="type-signature"><static> </span>closeElements(dataElements)</h4>
</dt>
<dd>
<div class="description">
Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElements</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// closes (hides) text popup and left panel in the UI
instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".createToolbarGroup"><span class="type-signature"><static> </span>createToolbarGroup(toolbarGroup)</h4>
</dt>
<dd>
<div class="description">
Creates a new Toolbar group (Ribbon)
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolbarGroup</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">The label for the new Toolbar Group or the key value to get the label from translation files.
<p>Refer to the lib/ui/i18n folder to find the existing keys in the translation files</p></td>
</tr>
<tr>
<td class="name"><code>dataElementSuffix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The suffix value you want to use to select your Toolbar group by data element.
All toolbar groups have the data element in this format <strong>toolbarGroup-<dataElementSuffix></strong>.</p> <p>For example, if you set the dataElementSuffix as 'Draw',
the dataElement of your ribbon will be <strong>toolbarGroup-Draw</strong></p></td>
</tr>
<tr>
<td class="name"><code>children</code></td>
<td class="type">
<span class="param-type">Array</span>
</td>
<td class="attributes">
</td>
<td class="description last">A list of elements to be added on the toolbar group header.
Check <a href="https://www.pdftron.com/documentation/web/guides/customizing-header/#header-items">this guide</a> to see the available options to be used as a toolbar group child.</td>
</tr>
<tr>
<td class="name"><code>useDefaultElements</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>If true, the common elements used in most toolbar groups will be added to the children list.</p>
<p>These elements are a spacer in the beginning and at the end of the header, the undo and redo buttons, and the eraser button.</p>
<p>In the example below you can see these elements being added. By default, the value will be false and these elements will not be added.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { annotationManager, documentViewer } = instance.Core;
const annotHistoryManager = documentViewer.getAnnotationHistoryManager();
// In case you want to use the Toolbar Group label with translation, you can
// set the values with the setTranslations API and use the translation key
// as the name parameter
instance.UI.setTranslations('en',
{
'option.toolbarGroup.draw': 'Draw'
}
);
instance.UI.createToolbarGroup(
{
name: 'option.toolbarGroup.draw',
dataElementSuffix: 'Draw',
useDefaultElements: false,
children: [
{ type: 'spacer' },
{
type: 'toolGroupButton',
toolGroup: 'freeHandTools',
dataElement: 'freeHandToolGroupButton',
title: 'annotation.freehand'
},
{
type: 'toolGroupButton',
toolGroup: 'ellipseAreaTools',
dataElement: 'ellipseAreaToolGroupButton',
title: 'annotation.areaMeasurement'
},
{
type: 'toolGroupButton',
toolGroup: 'rectangleTools',
dataElement: 'shapeToolGroupButton',
title: 'annotation.rectangle'
},
{ type: 'divider'},
// Undo Button
{
type: 'actionButton',
style: { 'marginLeft': '0px' },
dataElement: 'undoButton',
title: 'action.undo',
img: 'icon-operation-undo',
onClick: () => {
annotHistoryManager.undo();
},
isNotClickableSelector: () => !annotHistoryManager.canUndo()
},
// Redo Button
{
type: 'actionButton',
dataElement: 'redoButton',
title: 'action.redo',
img: 'icon-operation-redo',
onClick: () => {
annotHistoryManager.redo();
},
isNotClickableSelector: () => !annotHistoryManager.canRedo()
},
{ type: 'toolButton', toolName: 'AnnotationEraserTool' },
{ type: 'spacer', hidden: ['tablet', 'mobile', 'small-mobile'] }
]
})
}
})</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".dangerouslySetNoteTransformFunction"><span class="type-signature"><static> </span>dangerouslySetNoteTransformFunction(noteTransformFunction)</h4>
</dt>
<dd>
<div class="description">
Accepts a function that will be called every time a note in the left panel is rendered.
This function can be used to add, edit or hide the contents of the note.
<br><br>
<span style='font-size: 18px'><b>Please carefully read the documentation and the notes below before using this API</b></span><br><br>
<b>This API is experimental and should be used sparingly.</b> If you find you are heavily relying on this function,
it is recommended that you <a href='https://www.pdftron.com/documentation/web/guides/advanced-customization/'>fork the UI repo</a> and make the changes directly in the source code (Note.js).
<br><br>
The structure of the HTML that is passed into this function may change may change without notice in any release. <b>Please make sure
to test this function thoroughly when upgrading WebViewer versions.</b>
<br><br>
There may be unexpected behaviour when using this API. The HTML that is provided is controlled by React, and sometimes React will override any changes you make.
If you find any unexpected behaviour when using this API, then this API probably won't work for your use case and you will have to make the changes directly in the source code.
<br><br>
<b>Do not use document.createElement to create DOM elements</b>. Instead, use the provided `createElement` utility function provided as the third parameter.
<b>Do not use HTMLElement.removeChild or any other APIs that remove elements from the DOM.</b> Doing so will cause React to lose reference to this node, and will crash.
If you need to hide an HTML element, set the style to `display: none` instead.
<br><br>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>noteTransformFunction</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.NoteTransformFunction">UI.NoteTransformFunction</a></span>
</td>
<td class="description last">The function that will be used to transform notes in the left panel</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">Webviewer(...)
.then(instance => {
instance.UI.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
// Change the title of every note
wrapper.querySelector('.author-and-time>span').innerHTML = 'My custom note title';
// Add a button that alerts the user when clicked
const button = createElement('button');
button.onmousedown = (e) => {
if(state.isSelected) {
alert('Hello world!');
} else {
alert('Goodbye world!');
}
};
button.innerHTML = 'Alert me'
wrapper.appendChild(button);
// Add a button that makes the annotation blue
const button = createElement('button');
button.onmousedown = (e) => {
state.annotation.StrokeColor = new instance.Annotations.Color(0, 0, 255);
instance.UI.annotManager.redrawAnnotation(state.annotation)
};
button.innerHTML = 'Make me blue'
wrapper.appendChild(button);
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableClearSearchOnPanelClose"><span class="type-signature"><static> </span>disableClearSearchOnPanelClose()</h4>
</dt>
<dd>
<div class="description">
Disable clearing search results when user closes search panel. When disabled, search results are kept even if user
closes and reopens search panel.
Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableClearSearchOnPanelClose();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableDesktopOnlyMode"><span class="type-signature"><static> </span>disableDesktopOnlyMode()</h4>
</dt>
<dd>
<div class="description">
Disables desktop only mode on WebViewer UI.
This means that at small browser width/height, mobile/tablet CSS styling will be applied.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableDesktopOnlyMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableElements"><span class="type-signature"><static> </span>disableElements(dataElements)</h4>
</dt>
<dd>
<div class="description">
Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElements</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Examples</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// remove left panel and left panel button from the DOM
instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});</pre>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// remove the 'Edit' toolbar group
instance.UI.disableElements(['toolbarGroup-Edit']);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableFadePageNavigationComponent"><span class="type-signature"><static> </span>disableFadePageNavigationComponent()</h4>
</dt>
<dd>
<div class="description">
Always keep the Page Navigation Component on screen. Default behaviour is to fade it after certain period of inactivity.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Keeps the page navigation component on screen all the time
instance.UI.disableFadePageNavigationComponent();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableFeatures"><span class="type-signature"><static> </span>disableFeatures(features)</h4>
</dt>
<dd>
<div class="description">
Disable certain features in the WebViewer UI.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>features</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of features to disable.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.Feature">UI.Feature</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableFeatures(instance.Feature.Measurement);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableHighContrastMode"><span class="type-signature"><static> </span>disableHighContrastMode()</h4>
</dt>
<dd>
<div class="description">
Turns high contrast mode off.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableHighContrastMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableNativeScrolling"><span class="type-signature"><static> </span>disableNativeScrolling()</h4>
</dt>
<dd>
<div class="description">
Disable native mobile device scrolling behavior if it had previously been enabled. Note that native mobile device scrolling behavior is off by default.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
UI.disableNativeScrolling();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableNoteSubmissionWithEnter"><span class="type-signature"><static> </span>disableNoteSubmissionWithEnter()</h4>
</dt>
<dd>
<div class="description">
Disable the ability to submit notes by only pressing Enter if it had previously been enabled.
This will revert note submission to the default which is Ctrl/Cmd + Enter.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableNoteSubmissionWithEnter();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disablePageDeletionConfirmationModal"><span class="type-signature"><static> </span>disablePageDeletionConfirmationModal()</h4>
</dt>
<dd>
<div class="description">
Disable the confirmation modal when deleting a page from the thumbnail view
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disablePageDeletionConfirmationModal();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableReplyForAnnotations"><span class="type-signature"><static> </span>disableReplyForAnnotations(isReplyDisabledCallback)</h4>
</dt>
<dd>
<div class="description">
Disable reply for annotations if the callback function returns true. The callback function gets evaluated when the Comments panel is open, an annotation is selected, and the selected annotation has a comment.
Only one callback function will be stored and invoked. If multiple criteria is needed to disable replies you must write them in a single callback function.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>isReplyDisabledCallback</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.disableReplyForAnnotationsCallback">UI.disableReplyForAnnotationsCallback</a></span>
</td>
<td class="description last">Callback function that returns true if reply will be disabled for the annotation passed in. False otherwise.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(instance => {
// disable reply for Freehand annotations
instance.UI.disableReplyForAnnotations((annotation) => {
return annotation instanceof instance.Annotations.FreeHandAnnotation;
});
// disable reply for annotations authored by Guest
instance.UI.disableReplyForAnnotations((annotation) => {
return annotation['Author'] === 'Guest';
});
// disable reply for annotations created more than 10 seconds ago
instance.UI.disableReplyForAnnotations((annotation) => {
const createdDate = new Date(annotation['DateCreated']);
const todayDate = new Date();
return (todayDate - createdDate) > 10000;
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableToolDefaultStyleUpdateFromAnnotationPopup"><span class="type-signature"><static> </span>disableToolDefaultStyleUpdateFromAnnotationPopup()</h4>
</dt>
<dd>
<div class="description">
Disables syncing of annotation style updates to the associated tool that created the annotation.
So if an annotation's style is changed the tool default styles will not be updated.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.disableToolDefaultStyleUpdateFromAnnotationPopup();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableTools"><span class="type-signature"><static> </span>disableTools( [toolNames])</h4>
</dt>
<dd>
<div class="description">
Disable multiple tools. This API uses disableElements internally to remove tool buttons from the DOM, and also disable the corresponding hotkeys.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolNames</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
|
<span class="param-type">Array.<<a href="Core.Tools.html#.ToolNames">Core.Tools.ToolNames</a>></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
all tools
</td>
<td class="description last">Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be disabled.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { Tools } = instance.Core;
// disable sticky annotation tool and free text tool
instance.UI.disableTools([Tools.ToolNames.STICKY, Tools.ToolNames.FREETEXT]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".displayErrorMessage"><span class="type-signature"><static> </span>displayErrorMessage(message)</h4>
</dt>
<dd>
<div class="description">
Displays the custom error message
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>message</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">An error message</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.displayErrorMessage('My error message');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".dispose"><span class="type-signature"><static> </span>dispose()</h4>
</dt>
<dd>
<div class="description">
Cleans up listeners and data from the WebViewer instance. Should be called when removing the WebViewer instance from the DOM.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A promise that resolves when disposing has been completed
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Promise.<void></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">webViewerInstance.UI.dispose()</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".downloadPdf"><span class="type-signature"><static> </span>downloadPdf( [options])</h4>
</dt>
<dd>
<div class="description">
Downloads the pdf document with or without annotations added by WebViewer UI.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object that contains the following download options.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>filename</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">The filename of the downloaded document.</td>
</tr>
<tr>
<td class="name"><code>downloadType</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'pdf'
</td>
<td class="description last">The type to download the file as, by default this is "pdf". PDF and image files can only be downloaded as PDFs, but office files can be downloaded as "pdf" or as "office" if you want to get the original file without annotations.</td>
</tr>
<tr>
<td class="name"><code>xfdfString</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">An xfdf string containing annotation data to be used when downloading. Use this option instead of `includeAnnotations` if not all annotations need to be contained in the downloaded file.</td>
</tr>
<tr>
<td class="name"><code>includeAnnotations</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Whether or not to include annotations added by WebViewer UI.</td>
</tr>
<tr>
<td class="name"><code>flatten</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Whether or not to flatten all the annotations in the downloaded document. Only useful fullAPI is enabled and either `xfdfString` or `includeAnnotations` is used.</td>
</tr>
<tr>
<td class="name"><code>documentToBeDownloaded</code></td>
<td class="type">
<span class="param-type"><a href="Core.Document.html">Core.Document</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">A document to be download instead of the one loaded by Document Viewer.</td>
</tr>
<tr>
<td class="name"><code>useDisplayAuthor</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Whether to export annotations with the Display Author name from annotationManager.getDisplayAuthor()</td>
</tr>
<tr>
<td class="name"><code>flags</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
Core.SaveOptions.REMOVE_UNUSED
</td>
<td class="description last">The flags with which to save the document. Possible values include `Core.SaveOptions.REMOVE_UNUSED` (remove unused objects during save) and `Core.SaveOptions.LINEARIZED` (optimize the document for fast web view and remove unused objects).</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A promise that is resolved once the document is downloaded.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Promise.<any></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(async function(instance) {
const docViewer = instance.Core.documentViewer;
const annotManager = instance.Core.annotationManager;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', async function() {
// download pdf without annotations added by WebViewer UI
await instance.UI.downloadPdf({
includeAnnotations: false,
});
console.log('Downloaded the first time!')
// download pdf with all annotations flattened
await instance.UI.downloadPdf({
includeAnnotations: true,
flatten: true,
});
console.log('Downloaded a second time!')
// download pdf without links
const xfdfString = await annotManager.exportAnnotations({ links: false });
await instance.UI.downloadPdf({
xfdfString: xfdfString,
});
console.log('Downloaded a third time!')
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableClearSearchOnPanelClose"><span class="type-signature"><static> </span>enableClearSearchOnPanelClose()</h4>
</dt>
<dd>
<div class="description">
Enable clearing search results when user closes search panel. When this is enabled and user closes search panel
all search results are cleared.
Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Will not affect on mobile devices
instance.UI.enableClearSearchOnPanelClose();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableDesktopOnlyMode"><span class="type-signature"><static> </span>enableDesktopOnlyMode()</h4>
</dt>
<dd>
<div class="description">
Enables desktop only mode on WebViewer UI.
This means that at small browser width/height, mobile/tablet CSS styling will not be applied.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableDesktopOnlyMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableElements"><span class="type-signature"><static> </span>enableElements(dataElements)</h4>
</dt>
<dd>
<div class="description">
Remount the hidden elements in the DOM.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElements</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// remove left panel and left panel button from the DOM
instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableFadePageNavigationComponent"><span class="type-signature"><static> </span>enableFadePageNavigationComponent()</h4>
</dt>
<dd>
<div class="description">
Fade the Page Navigation Component after it has not been interacted with. Reappears whenever the document is scrolled.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Sets behaviour to fade the page navigation component.
// enabled by default
instance.UI.enableFadePageNavigationComponent();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableFeatures"><span class="type-signature"><static> </span>enableFeatures(features)</h4>
</dt>
<dd>
<div class="description">
Enable certain features in the WebViewer UI.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>features</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of features to enable.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.Feature">UI.Feature</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableFeatures(instance.Feature.Measurement);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableHighContrastMode"><span class="type-signature"><static> </span>enableHighContrastMode()</h4>
</dt>
<dd>
<div class="description">
Turns high contrast mode on to help with accessibility.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableHighContrastMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableNativeScrolling"><span class="type-signature"><static> </span>enableNativeScrolling()</h4>
</dt>
<dd>
<div class="description">
Enable native mobile device scrolling behavior. By default custom behavior is used to handle vertical and horizontal scroll locking.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableNativeScrolling();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableNoteSubmissionWithEnter"><span class="type-signature"><static> </span>enableNoteSubmissionWithEnter()</h4>
</dt>
<dd>
<div class="description">
Enable the ability to submit notes by only pressing Enter. Default mode is Ctrl/Cmd + Enter.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableNoteSubmissionWithEnter();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enablePageDeletionConfirmationModal"><span class="type-signature"><static> </span>enablePageDeletionConfirmationModal()</h4>
</dt>
<dd>
<div class="description">
Enable the confirmation modal when deleting a page from the thumbnail view
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enablePageDeletionConfirmationModal();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableToolDefaultStyleUpdateFromAnnotationPopup"><span class="type-signature"><static> </span>enableToolDefaultStyleUpdateFromAnnotationPopup()</h4>
</dt>
<dd>
<div class="description">
Enables syncing of annotation style updates to the associated tool that created the annotation.
Note that this is enabled by default.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.enableToolDefaultStyleUpdateFromAnnotationPopup();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".enableTools"><span class="type-signature"><static> </span>enableTools( [toolNames])</h4>
</dt>
<dd>
<div class="description">
Enable multiple tools.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolNames</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
all tools
</td>
<td class="description last">Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be enabled.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// enable sticky annotation tool and free text tool
instance.UI.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".exportBookmarks"><span class="type-signature"><static> </span>exportBookmarks()</h4>
</dt>
<dd>
<div class="description">
Returns a dictionary with page indices as keys and the bookmark text as the values
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Save the annotation data for doc123
const bookmarks = instance.UI.exportBookmarks();
const bookmarksString = JSON.stringify(bookmarks);
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'POST',
body: bookmarksString // written into a json file on server
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".extractPagesWithAnnotations"><span class="type-signature"><static> </span>extractPagesWithAnnotations(pageNumbersToExtract)</h4>
</dt>
<dd>
<div class="description">
Extract pages from the current document
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageNumbersToExtract</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">An array of pages to extract from the document. Annotations on the pages are included</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A promise that resolve to a <a href='https://developer.mozilla.org/en-US/docs/Web/API/File' target='_blank'>File object</a>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Promise.<File></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// 6.0 and after
WebViewer(...)
.then(function(instance) {
instance.UI.extractPagesWithAnnotations ([1,2,3]).then(function(fileData){
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".focusNote"><span class="type-signature"><static> </span>focusNote(annotationId)</h4>
</dt>
<dd>
<div class="description">
Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotationId</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Id of an annotation.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var annotManager = instance.Core.annotationManager;
annotManager.addEventListener('annotationChanged', function(annotations, action) {
annotations.forEach(function(annotation) {
// Focus the note when annotation is created
if (action === 'add' && annotation.Listable) {
instance.UI.focusNote(annotation.Id); // note it is a capital i
}
});
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getAnnotationReadState"><span class="type-signature"><static> </span>getAnnotationReadState(annotationId)</h4>
</dt>
<dd>
<div class="description">
Return the read/unread state of an annotation. True for read, false for unread.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotationId</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Id of the annotation.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Throws:</h5>
<div class="param-desc">
Will throw an error if the annotation with the given ID does not exist.
</div>
<h5>Returns:</h5>
<div class="param-desc">
Whether the annotation is read.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const isAnnotationRead = instance.UI.getAnnotationReadState('test-annotation-id');</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getAvailableLanguages"><span class="type-signature"><static> </span>getAvailableLanguages()</h4>
</dt>
<dd>
<div class="description">
Returns all available languages as a list.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
All available languages
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<string></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.getAvailableLanguages());
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getCustomData"><span class="type-signature"><static> </span>getCustomData()</h4>
</dt>
<dd>
<div class="description">
A getter that returns a stringified version of the 'custom' property that is passed to the WebViewer constructor
<a href='https://www.pdftron.com/documentation/web/guides/config-files/#passing-custom-data' target='_blank'>Refer to the passing custom data section</a>.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
returns a stringified version of the 'custom' property that is passed to the WebViewer constructor
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".getFitMode"><span class="type-signature"><static> </span>getFitMode()</h4>
</dt>
<dd>
<div class="description">
Return the current fit mode of the WebViewerInstance UI.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Current fit mode
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
console.log(instance.UI.getFitMode());
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getIsHighContrastMode"><span class="type-signature"><static> </span>getIsHighContrastMode()</h4>
</dt>
<dd>
<div class="description">
Check whether high contrast mode is enabled or not.
</div>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>since version 8.0. Use isHighContrastModeEnabled Instead</li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.getIsHighContrastMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getLayoutMode"><span class="type-signature"><static> </span>getLayoutMode()</h4>
</dt>
<dd>
<div class="description">
Return the current layout mode of the WebViewerInstance.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Current layout mode
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
console.log(instance.UI.getLayoutMode());
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getMaxZoomLevel"><span class="type-signature"><static> </span>getMaxZoomLevel()</h4>
</dt>
<dd>
<div class="description">
Return the max zoom level
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
max zoom level
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
console.log(instance.UI.getMaxZoomLevel());
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getMinZoomLevel"><span class="type-signature"><static> </span>getMinZoomLevel()</h4>
</dt>
<dd>
<div class="description">
Return the min zoom level
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
min zoom level
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
console.log(instance.UI.getMinZoomLevel());
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getSelectedThumbnailPageNumbers"><span class="type-signature"><static> </span>getSelectedThumbnailPageNumbers()</h4>
</dt>
<dd>
<div class="description">
Get the currently selected pages
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
an array of select page numbers
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<number></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// 6.0 and after
WebViewer(...)
.then(function(instance) {
instance.UI.getSelectedThumbnailPageNumbers();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getToolMode"><span class="type-signature"><static> </span>getToolMode()</h4>
</dt>
<dd>
<div class="description">
Return the current tool object.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Instance of the current tool
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Core.Tools.Tool.html">Core.Tools.Tool</a></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.getToolMode().name, instance.UI.getToolMode());
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".getWatermarkModalOptions"><span class="type-signature"><static> </span>getWatermarkModalOptions()</h4>
</dt>
<dd>
<div class="description">
Gets the watermark options created in print modal.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Returns the watermark options created in print modal.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".getZoomLevel"><span class="type-signature"><static> </span>getZoomLevel()</h4>
</dt>
<dd>
<div class="description">
Return the current zoom level
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Zoom level (0 ~ 1)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
console.log(instance.UI.getZoomLevel());
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".hideOutlineControl"><span class="type-signature"><static> </span>hideOutlineControl()</h4>
</dt>
<dd>
<div class="description">
hide outline control
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.hideOutlineControl();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".importBookmarks"><span class="type-signature"><static> </span>importBookmarks(bookmarks)</h4>
</dt>
<dd>
<div class="description">
Imports user bookmarks
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>bookmarks</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}. Behaviour is undefined otherwise.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// load the user bookmarks data for id 'doc123'
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'GET'
}).then(function(response) {
if (response.status === 200) {
response.text().then(function(bookmarksString) {
// {"0":"Bookmark 1","2":"Bookmark 2"}
const bookmarks = JSON.parse(bookmarksString);
instance.UI.importBookmarks(bookmarks);
});
}
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isElementDisabled"><span class="type-signature"><static> </span>isElementDisabled(dataElement)</h4>
</dt>
<dd>
<div class="description">
Returns whether the element is disabled.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element attribute value for a DOM element. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether the element is disabled.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.isElementDisabled('leftPanel'));
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isElementOpen"><span class="type-signature"><static> </span>isElementOpen(dataElement)</h4>
</dt>
<dd>
<div class="description">
Returns whether the element is open.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element attribute value for a DOM element. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether the element is open.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.isElementOpen('leftPanel'));
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isFullscreen"><span class="type-signature"><static> </span>isFullscreen()</h4>
</dt>
<dd>
<div class="description">
Returns whether in fullscreen mode.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether in fullscreen mode.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.isFullscreen());
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isHighContrastModeEnabled"><span class="type-signature"><static> </span>isHighContrastModeEnabled()</h4>
</dt>
<dd>
<div class="description">
Check whether high contrast mode is enabled or not.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.isHighContrastModeEnabled();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isInDesktopOnlyMode"><span class="type-signature"><static> </span>isInDesktopOnlyMode()</h4>
</dt>
<dd>
<div class="description">
Returns a boolean to denote if the UI is in desktop only mode.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
boolean to denote if the UI is in desktop only mode
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.isInDesktopOnlyMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".isToolDisabled"><span class="type-signature"><static> </span>isToolDisabled(toolName)</h4>
</dt>
<dd>
<div class="description">
Returns whether the tool is disabled.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether the tool is disabled.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
console.log(instance.UI.isToolDisabled());
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".loadDocument"><span class="type-signature"><static> </span>loadDocument(documentPath [, options])</h4>
</dt>
<dd>
<div class="description">
Load a document inside WebViewer UI.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>documentPath</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">File</span>
|
<span class="param-type">Blob</span>
|
<span class="param-type"><a href="Core.Document.html">Core.Document</a></span>
|
<span class="param-type">Core.PDFNet.PDFDoc</span>
</td>
<td class="attributes">
</td>
<td class="description last">Path to the document OR <a href='https://developer.mozilla.org/en-US/docs/Web/API/File' target='_blank'>File object</a> if opening local file.</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.loadDocumentOptions">UI.loadDocumentOptions</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Additional options</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
documentId: '1',
filename: 'sample-1.pdf'
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".openElements"><span class="type-signature"><static> </span>openElements(dataElements)</h4>
</dt>
<dd>
<div class="description">
Sets visibility states of the elements to be visible. Note that openElements works only for panel/overlay/popup/modal elements.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElements</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// opens (shows) text popup and annotation popup in the UI
instance.UI.openElements([ 'menuOverlay', 'leftPanel' ]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".overrideSearchExecution"><span class="type-signature"><static> </span>overrideSearchExecution(overrideSearchExecutionCallback)</h4>
</dt>
<dd>
<div class="description">
Add custom override function for default search on UI.
overrideSearchExecutionCallback function will be executed with search value and search options
when user executes search from UI. This function won't be executed when search is triggered through programmatic searches.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>overrideSearchExecutionCallback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Function that will executed instead of default search functionality.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
function searchFn(searchValue, options) {
console.log(searchValue, options);
};
instance.UI.overrideSearchExecution(searchFn);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".print"><span class="type-signature"><static> </span>print()</h4>
</dt>
<dd>
<div class="description">
Print the current document.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.print();
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".printInBackground"><span class="type-signature"><static> </span>printInBackground( [options])</h4>
</dt>
<dd>
<div class="description">
Programmatically print the document without opening a modal with the print options provided. Not supported by legacy-ui
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Options for the printing.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pagesToPrint</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Optionally pass in the pages you want to print. By default, all pages will be printed.</td>
</tr>
<tr>
<td class="name"><code>includeAnnotations</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">If true, will print the documents with the annotations</td>
</tr>
<tr>
<td class="name"><code>includeComments</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">If true, will append comments to the document printed</td>
</tr>
<tr>
<td class="name"><code>isPrintCurrentView</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">If true, will print the current viewport view of the current page</td>
</tr>
<tr>
<td class="name"><code>maintainPageOrientation</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">If true, will maintain the pages orientation as set in the webviewer during printing</td>
</tr>
<tr>
<td class="name"><code>onProgress</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">A callback function that is executed on each page processed</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.printInBackground({
includeComments:true,
includeAnnotations: true,
maintainPageOrientation: true,
onProgress: function(pageNumber, htmlElement) {},
});
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".registerTool"><span class="type-signature"><static> </span>registerTool(properties [, annotationConstructor] [, customAnnotationCheckFunc])</h4>
</dt>
<dd>
<div class="description">
Registers tool in the document viewer tool mode map, and adds a button object to be used in the header. See <a href='https://www.pdftron.com/documentation/web/guides/customizing-tools' target='_blank'>Customizing tools</a> to learn how to make a tool.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>properties</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="description last">Tool properties.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">Name of the tool.</td>
</tr>
<tr>
<td class="name"><code>toolObject</code></td>
<td class="type">
<span class="param-type"><a href="Core.Tools.Tool.html">Core.Tools.Tool</a></span>
</td>
<td class="attributes">
</td>
<td class="description last">Instance of the tool.</td>
</tr>
<tr>
<td class="name"><code>buttonImage</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">Path to an image or base64 data for the tool button.</td>
</tr>
<tr>
<td class="name"><code>buttonName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Name of the tool button that will be used in data-element.</td>
</tr>
<tr>
<td class="name"><code>buttonGroup</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Group of the tool button belongs to.</td>
</tr>
<tr>
<td class="name"><code>tooltip</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Tooltip of the tool button.</td>
</tr>
<tr>
<td class="name"><code>showColor</code></td>
<td class="type">
<span class="param-type">'always'</span>
|
<span class="param-type">'active'</span>
|
<span class="param-type">'never'</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Controls when the tool button should show the color.</td>
</tr>
<tr>
<td class="name"><code>showPresets</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Option to whether show or hide preset styles. Default is true.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>annotationConstructor</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Deprecated Please use customAnnotationCheckFunc instead. Will be removed in the future.</td>
</tr>
<tr>
<td class="name"><code>customAnnotationCheckFunc</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Function that takes in a parameter of an annotation. Returns a boolean if the specified annotation is a certain type of annotation. This function is used by the viewer to check if the annotation passed in is associated(created) with the registered tool.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// assume myCustomTool and myCustomAnnotation are already defined
const myTool = {
toolName: 'MyTool',
toolObject: myCustomTool,
buttonImage: 'path/to/image',
buttonName: 'myToolButton',
buttonGroup: 'miscTools',
tooltip: 'MyTooltip'
};
instance.UI.registerTool(myTool, undefined, annot => annot && annot.isCustomAnnot);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".reloadOutline"><span class="type-signature"><static> </span>reloadOutline()</h4>
</dt>
<dd>
<div class="description">
Reloads the Bookmark Outline in the WebViewer UI.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { documentViewer } = instance.Core;
// you must have a document loaded when calling this api
documentViewer.addEventListener('documentLoaded', async () => {
const doc = documentViewer.getDocument();
const pdfDoc = await doc.getPDFDoc();
const firstBookmark = await doc.getFirstBookmark();
const bookmarkToDelete = await firstBookmark.find('bookmark-to-delete');
if (bookmarkToDelete !== null && await bookmarkToDelete.isValid()) {
await bookmarkToDelete.delete();
instance.UI.reloadOutline();
}
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".removeEventListener"><span class="type-signature"><static> </span>removeEventListener(eventName, listener)</h4>
</dt>
<dd>
<div class="description">
"Remove an event listener for the given WebViewer UI event.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">UI event name.</td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Event handler function that should no longer be bound to the event.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const listener = e => {
const { types, authors, colors } = e.detail;
console.log(types, authors, colors);
instance.UI.removeEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, listener);
};
instance.UI.addEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, listener);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".removeRedactionSearchPattern"><span class="type-signature"><static> </span>removeRedactionSearchPattern(searchPattern)</h4>
</dt>
<dd>
<div class="description">
Removes a search pattern from the redaction search panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchPattern</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.RedactionSearchPatterns">UI.RedactionSearchPatterns</a></span>
|
<span class="param-type">string</span>
</td>
<td class="description last">A search pattern to remove from the redaction search panel. If you added a custom search pattern with <a href="UI.html#.addRedactionSearchPattern">UI.addRedactionSearchPattern</a>, you must pass the type of the search pattern you added.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.removeRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS);
});
// If you added a custom search pattern for Social Security Number where the type is 'socialSecurityNumber'.
WebViewer(...)
.then(function(instance) {
instance.UI.removeRedactionSearchPattern('socialSecurityNumber');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".removeSearchListener"><span class="type-signature"><static> </span>removeSearchListener(listener)</h4>
</dt>
<dd>
<div class="description">
Removes the search listener function.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.searchListener">UI.searchListener</a></span>
</td>
<td class="description last">Search listener function that was added.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
function searchListener(searchValue, options, results) {
console.log(searchValue, options, results);
};
instance.UI.addSearchListener(searchListener);
instance.UI.removeSearchListener(searchListener);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".replaceRedactionSearchPattern"><span class="type-signature"><static> </span>replaceRedactionSearchPattern(searchPattern, regex)</h4>
</dt>
<dd>
<div class="description">
Sets a specific regex to be used when searching for one of the supported patterns in the redaction search panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchPattern</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.RedactionSearchPatterns">UI.RedactionSearchPatterns</a></span>
</td>
<td class="description last">A search pattern for which the regex should be replaced</td>
</tr>
<tr>
<td class="name"><code>regex</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The regex to be used for the search pattern</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.replaceRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS, /\w+@\w+\.\w+/);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".searchText"><span class="type-signature"><static> </span>searchText(searchValue [, options])</h4>
</dt>
<dd>
<div class="description">
Searches the document one by one for the text matching searchValue. To go to the next result this
function must be called again. Once document end is reach it will jump back to the first found result.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchValue</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">The text value to look for.</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Search options.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>caseSensitive</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search with matching cases.</td>
</tr>
<tr>
<td class="name"><code>wholeWord</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search whole words only.</td>
</tr>
<tr>
<td class="name"><code>wildcard</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search a string with a wildcard *. For example, *viewer.</td>
</tr>
<tr>
<td class="name"><code>regex</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search for a regex string. For example, www(.*)com.</td>
</tr>
<tr>
<td class="name"><code>searchUp</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search up the document (backwards).</td>
</tr>
<tr>
<td class="name"><code>ambientString</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Get the ambient string in the result.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.searchText('test', {
caseSensitive: true,
wholeWord: true
});
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".searchTextFull"><span class="type-signature"><static> </span>searchTextFull(searchValue [, options])</h4>
</dt>
<dd>
<div class="description">
Searches the full document for the texts matching searchValue.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchValue</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">The text value to look for.</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Search options.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>caseSensitive</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search with matching cases.</td>
</tr>
<tr>
<td class="name"><code>wholeWord</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search whole words only.</td>
</tr>
<tr>
<td class="name"><code>wildcard</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search a string with a wildcard *. For example, *viewer.</td>
</tr>
<tr>
<td class="name"><code>regex</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Search for a regex string. For example, www(.*)com.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.searchTextFull('test', {
wholeWord: true
});
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".selectThumbnailPages"><span class="type-signature"><static> </span>selectThumbnailPages(pageNumbers)</h4>
</dt>
<dd>
<div class="description">
Select thumbnails in the thumbnail panel. This requires the "ThumbnailMultiselect" feature to be enabled
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageNumbers</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">array of page numbers to select</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// 6.1 and after
WebViewer(...)
.then(function(instance) {
instance.UI.enableFeatures(['ThumbnailMultiselect']);
const pageNumbersToSelect = [1, 2, 3];
instance.UI.selectThumbnailPages(pageNumbersToSelect);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setActiveHeaderGroup"><span class="type-signature"><static> </span>setActiveHeaderGroup(headerGroup)</h4>
</dt>
<dd>
<div class="description">
Sets a header group to be rendered in the Header element. This API comes useful when replacing the entire header items in small screens.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>headerGroup</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the header group to be rendered. Default WebViewer UI has eight header groups: 'default', 'small-mobile-more-buttons', 'toolbarGroup-View', 'toolbarGroup-Annotate', 'toolbarGroup-Shapes', 'toolbarGroup-Insert', 'toolbarGroup-Measure', and 'toolbarGroup-Edit'.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setActiveHeaderGroup('toolbarGroup-Annotate'); // switch to 'Annotate' group header
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setActiveLeftPanel"><span class="type-signature"><static> </span>setActiveLeftPanel(dataElement)</h4>
</dt>
<dd>
<div class="description">
Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// open left panel
instance.UI.openElements([ 'leftPanel' ]);
// view outlines panel
instance.UI.setActiveLeftPanel('outlinesPanel');</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setActivePalette"><span class="type-signature"><static> </span>setActivePalette(toolName, colorPalette)</h4>
</dt>
<dd>
<div class="description">
Sets the active color palette of a tool and its associated annotation
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
<tr>
<td class="name"><code>colorPalette</code></td>
<td class="type">
<span class="param-type">'text'</span>
|
<span class="param-type">'border'</span>
|
<span class="param-type">'fill'</span>
</td>
<td class="description last">The palette to be activated. One of 'text', 'border' and 'fill'.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setActivePalette('AnnotationCreateFreeText', 'fill')
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setAnnotationContentOverlayHandler"><span class="type-signature"><static> </span>setAnnotationContentOverlayHandler(customOverlayHandler)</h4>
</dt>
<dd>
<div class="description">
Adds a custom overlay to annotations on mouseHover, overriding the existing overlay.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>customOverlayHandler</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">A function that takes an annotation and returns a DOM Element, which is rendered as a tooltip when hovering over the annotation. Returning null or false will render nothing. Returning 'undefined' will use default behavior.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setAnnotationContentOverlayHandler(annotation => {
const div = document.createElement('div');
div.appendChild(document.createTextNode(`Created by: ${annotation.Author}`));
div.appendChild(document.createElement('br'));
div.appendChild(document.createTextNode(`Created on ${annotation.DateCreated}`));
return div;
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setAnnotationReadState"><span class="type-signature"><static> </span>setAnnotationReadState(options)</h4>
</dt>
<dd>
<div class="description">
Set the read/unread state of an annotation. The default state of annotations is read.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>isRead</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">whether setting the annotation to read state; false for setting it as unread.</td>
</tr>
<tr>
<td class="name"><code>annotationId</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Id of the annotation to be set.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setAnnotationReadState({ isRead: true, annotationId: 'test-annotation-id' });
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setColorPalette"><span class="type-signature"><static> </span>setColorPalette(An)</h4>
</dt>
<dd>
<div class="description">
Sets the colors in the palette globally or for specific tools and their associated annotations
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>An</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
|
<span class="param-type"><a href="UI.html#.PaletteOption">UI.PaletteOption</a></span>
</td>
<td class="description last">array of hex colors that will override the default colors for every tool.
An object can be passed to specify colors for particular tools.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// this sets the palette globally. All the tools will use these colors. Can use empty string for blank spaces and 'transparency' for a transparent color.
instance.UI.setColorPalette(['#FFFFFF', '', '#DDDDDD', 'transparency']);
// use a different set of colors for the freetext and rectangle tool.
instance.UI.setColorPalette({
toolNames: ['AnnotationCreateFreeText', 'AnnotationCreateRectangle'],
colors: ['#333333'],
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomApplyRedactionsHandler"><span class="type-signature"><static> </span>setCustomApplyRedactionsHandler(customApplyRedactionsHandler)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>customApplyRedactionsHandler</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.CustomApplyRedactionsHandler">UI.CustomApplyRedactionsHandler</a></span>
</td>
<td class="description last">The function that will be invoked when clicking on the 'Redact All' button.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setCustomApplyRedactionsHandler((annotationsToRedact, originalApplyRedactionsFunction) => {
// custom code
...
originalApplyRedactionsFunction();
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomMeasurementOverlay"><span class="type-signature"><static> </span>setCustomMeasurementOverlay(customOverlayInfo)</h4>
</dt>
<dd>
<div class="description">
Adds a custom overlay to annotations if that annotation currently support it. Currently only the Ellipsis annotation supports it.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>customOverlayInfo</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">an array of customOverlay configurations. The configuration object has five properties: title, label, validate, value, and onChange</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setCustomMeasurementOverlayInfo([
{
title: "Radius Measurement", //Title for overlay
label: "Radius", // Label to be shown for the value
// Validate is a function to validate the annotation is valid for the current custom overlay
validate: annotation => annotation instanceof instance.Annotations.EllipseAnnotation,
// The value to be shown in the custom overlay
value: annotation => annotation.Width / 2,
// onChange will be called whenever the value in the overlay changes from user input
onChange: (e, annotation) => {
// Do something with the annot like resize/redraw
instance.Core.annotationManager.redrawAnnotation(annotation);
}
}
])
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomModal"><span class="type-signature"><static> </span>setCustomModal(options)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">Unique name of custom modal.</td>
</tr>
<tr>
<td class="name"><code>disableBackdropClick</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Disable closing modal when user clicks outside of content area</td>
</tr>
<tr>
<td class="name"><code>disableEscapeKeyDown</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Disable closing modal when user hit escape from keyboard</td>
</tr>
<tr>
<td class="name"><code>render</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.renderCustomModal">UI.renderCustomModal</a></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">Function rendering custom model contents</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>since version 8.5. Use <a href="UI.html#.addCustomModal">addCustomModal</a> instead</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomNoteFilter"><span class="type-signature"><static> </span>setCustomNoteFilter(filterAnnotation)</h4>
</dt>
<dd>
<div class="description">
Filter the annotations shown in the notes panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>filterAnnotation</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.filterAnnotation">UI.filterAnnotation</a></span>
</td>
<td class="description last">Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// only show annotations that are created by John
instance.UI.setCustomNoteFilter(function(annotation) {
return annotation.Author === 'John';
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomNoteSelectionFunction"><span class="type-signature"><static> </span>setCustomNoteSelectionFunction(customNoteSelectionFunction)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>customNoteSelectionFunction</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.CustomNoteSelectionFunction">UI.CustomNoteSelectionFunction</a></span>
</td>
<td class="description last">The function that will be invoked when clicking on a note in notes panel.
The function will only be invoked when the underlying annotation is not already selected.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setCustomNoteSelectionFunction(annotation => {
// some code
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setCustomPanel"><span class="type-signature"><static> </span>setCustomPanel(options)</h4>
</dt>
<dd>
<div class="description">
Adds a custom panel in left panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>tab</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Tab options.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element for tab.</td>
</tr>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tooltip for tab.</td>
</tr>
<tr>
<td class="name"><code>img</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Url for an image.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>panel</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Panel options.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element for panel.</td>
</tr>
<tr>
<td class="name"><code>render</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.renderCustomPanel">UI.renderCustomPanel</a></span>
</td>
<td class="description last">Function that returns panel element.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var myCustomPanel = {
tab:{
dataElement: 'customPanelTab',
title: 'customPanelTab',
img: 'https://www.pdftron.com/favicon-32x32.png',
},
panel: {
dataElement: 'customPanel',
render: function() {
var div = document.createElement('div');
div.innerHTML = 'Hello World';
return div;
}
}
};
instance.UI.setCustomPanel(myCustomPanel);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setDefaultPrintOptions"><span class="type-signature"><static> </span>setDefaultPrintOptions(options)</h4>
</dt>
<dd>
<div class="description">
Sets the default print options.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">The default print options of the document to print. Must be an object.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>includeComments</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether or not will print the documents with the comments</td>
</tr>
<tr>
<td class="name"><code>includeAnnotations</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether or not will print the documents with the annotations</td>
</tr>
<tr>
<td class="name"><code>maintainPageOrientation</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether or not will maintain the pages orientation as set in the webviewer</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...) .then(function(instance) {
instance.UI.setDefaultPrintOptions({ includeComments: true, includeAnnotations: true });
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setDisplayedSignaturesFilter"><span class="type-signature"><static> </span>setDisplayedSignaturesFilter(filterFunction)</h4>
</dt>
<dd>
<div class="description">
Accepts a function that filters what saved signatures will be displayed in the signature annotation preset. Changing this function will instantly changes signatures displayed in the preset.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>filterFunction</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.SignatureFilterFunction">UI.SignatureFilterFunction</a></span>
</td>
<td class="description last">The function that will be used to filter signatrues displayed in the preset</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">Webviewer(...)
.then(instance => {
// Only signatures that have a value set for the 'isInitial' custom data property will display in the preset
instance.UI.setDisplayedSignaturesFilter((a) => a.getCustomData('isInitial'));
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setFitMode"><span class="type-signature"><static> </span>setFitMode(fitMode)</h4>
</dt>
<dd>
<div class="description">
Sets the fit mode of the viewer.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fitMode</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Fit mode of WebViewer.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.FitMode">UI.FitMode</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
var FitMode = instance.UI.FitMode;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.setFitMode(FitMode.FitWidth);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setHeaderItems"><span class="type-signature"><static> </span>setHeaderItems(headerCallback)</h4>
</dt>
<dd>
<div class="description">
Customize header. Refer to <a href='https://www.pdftron.com/documentation/web/guides/customizing-header' target='_blank'>Customizing header</a> for details.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>headerCallback</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.headerCallback">UI.headerCallback</a></span>
</td>
<td class="description last">Callback function to perform different operations on the header.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Examples</h5>
<pre class="sunlight-highlight-javascript">// Adding save annotations button to the end of the top header
WebViewer(...)
.then(function(instance) {
instance.UI.setHeaderItems(function(header) {
var myCustomButton = {
type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
onClick: function() {
}
}
header.push(myCustomButton);
});
});</pre>
<pre class="sunlight-highlight-javascript">// Removing existing buttons from the top header
WebViewer(...)
.then(function(instance) {
instance.UI.setHeaderItems(function(header) {
header.update([]);
});
});</pre>
<pre class="sunlight-highlight-javascript">// Appending logo to the 'Annotate' toolbar group and shifting existing buttons to the right
WebViewer(...)
.then(function(instance) {
instance.UI.setHeaderItems(function(header) {
header.getHeader('toolbarGroup-Annotate').unshift({
type: 'customElement',
render: function() {
var logo = document.createElement('img');
logo.src = 'https://www.pdftron.com/downloads/logo.svg';
logo.style.width = '200px';
logo.style.marginLeft = '10px';
logo.style.cursor = 'pointer';
logo.onclick = function() {
window.open('https://www.pdftron.com', '_blank');
}
return logo;
}
}, {
type: 'spacer'
});
});
});</pre>
<pre class="sunlight-highlight-javascript">// Moving the line tool from the 'Shapes' toolbar group to the 'Annotate' toolbar group
WebViewer(...)
.then(function(instance) {
instance.UI.setHeaderItems(function(header) {
header.getHeader('toolbarGroup-Annotate').push({ type: 'toolGroupButton', toolGroup: 'lineTools', dataElement: 'lineToolGroupButton', title: 'annotation.line' });
header.getHeader('toolbarGroup-Shapes').delete(6);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setHighContrastMode"><span class="type-signature"><static> </span>setHighContrastMode(useHighContrastMode)</h4>
</dt>
<dd>
<div class="description">
Turns high contrast mode on or off to help with accessibility.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>useHighContrastMode</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">If true then the UI will use high contrast colors to help with accessibility.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>since version 8.0. Use enableHighContrastMode or disableHighContrastMode Instead</li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// Using predefined string
WebViewer(...)
.then(function(instance) {
instance.UI.setHighContrastMode(true);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setIconColor"><span class="type-signature"><static> </span>setIconColor(toolName, colorPalette)</h4>
</dt>
<dd>
<div class="description">
Sets the color palette that will be used as a tool button's icon color.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
<tr>
<td class="name"><code>colorPalette</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The palette which will be used as a tool button's icon color. One of 'text', 'border' and 'fill'.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// sets the color in fill palette to be used as freetext tool button's icon color
// by default freetext tool button will use the color in text palette as its icon color
instance.UI.setIconColor('AnnotationCreateFreeText', 'fill')
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setLanguage"><span class="type-signature"><static> </span>setLanguage(language)</h4>
</dt>
<dd>
<div class="description">
Set the language of WebViewer UI.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>language</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The language WebViewer UI will use. By default, following languages are supported: en, zh_cn, fr.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setLanguage('fr'); // set the language to French
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setLayoutMode"><span class="type-signature"><static> </span>setLayoutMode(layoutMode)</h4>
</dt>
<dd>
<div class="description">
Sets the layout mode of the viewer.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>layoutMode</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Layout mode of WebViewerInstance UI.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.LayoutMode">UI.LayoutMode</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const docViewer = instance.Core.documentViewer;
const LayoutMode = instance.UI.LayoutMode;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.setLayoutMode(LayoutMode.FacingContinuous);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setMaxSignaturesCount"><span class="type-signature"><static> </span>setMaxSignaturesCount( [maxSignaturesCount])</h4>
</dt>
<dd>
<div class="description">
Set the number of signatures that can be stored in the WebViewer (default is 2)
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>maxSignaturesCount</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
2
</td>
<td class="description last">Number of signature webViewer can store</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setMaxSignaturesCount(5); // allow up to 5 stored signatures
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setMaxZoomLevel"><span class="type-signature"><static> </span>setMaxZoomLevel(zoomLevel)</h4>
</dt>
<dd>
<div class="description">
Sets the maximum zoom level allowed by the UI. Default is 9999%.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>zoomLevel</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</td>
<td class="description last">Zoom level in either number or percentage.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setMeasurementUnits"><span class="type-signature"><static> </span>setMeasurementUnits(units)</h4>
</dt>
<dd>
<div class="description">
Sets the units that will be displayed in the measurement tools' styles popup
Valid units are: 'mm', 'cm', 'm', 'km', 'mi', 'yd', 'ft', 'in', 'pt'
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>units</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">an object which contains the from units and to units</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setMeasurementUnits({
from: ['in', 'cm', 'm'],
to: ['cm', 'm', 'km']
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setMinZoomLevel"><span class="type-signature"><static> </span>setMinZoomLevel(zoomLevel)</h4>
</dt>
<dd>
<div class="description">
Sets the minimum zoom level allowed by the UI. Default is 5%.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>zoomLevel</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</td>
<td class="description last">Zoom level in either number or percentage.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setNoteDateFormat"><span class="type-signature"><static> </span>setNoteDateFormat(format)</h4>
</dt>
<dd>
<div class="description">
Sets the format for displaying the date when a note is create/modified. A list of formats can be found <a href="https://github.com/iamkun/dayjs/blob/master/docs/en/API-reference.md#format-formatstringwithtokens-string">dayjs API</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The format of date to display</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setNoteDateFormat('DD.MM.YYYY HH:MM');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setNotesPanelSortStrategy"><span class="type-signature"><static> </span>setNotesPanelSortStrategy(sortStrategy)</h4>
</dt>
<dd>
<div class="description">
Sets a sorting algorithm for the Notes Panel.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>sortStrategy</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the sort strategy algorithm. Check <a href="UI.html#.NotesPanelSortStrategy">UI.NotesPanelSortStrategy</a> for the options or use your own strategy.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.NotesPanelSortStrategy">UI.NotesPanelSortStrategy</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const sortStrategy = instance.UI.NotesPanelSortStrategy;
instance.UI.setNotesPanelSortStrategy(sortStrategy.TYPE); // sort notes by type
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setPageLabels"><span class="type-signature"><static> </span>setPageLabels(pageLabels)</h4>
</dt>
<dd>
<div class="description">
Sets page labels that will be displayed in UI. You may want to use this API if the document's page labels start with characters/numbers other than 1.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageLabels</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Page labels that will be displayed in UI.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.setPageLabels(['i', 'ii', 'iii', '4', '5']); // assume a document has 5 pages
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setPageReplacementModalFileList"><span class="type-signature"><static> </span>setPageReplacementModalFileList(list)</h4>
</dt>
<dd>
<div class="description">
Add a list of documents to the dropdown element of Page Replacement modal and provide a
way to retreive document for displaying Page Replacement modal.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>list</code></td>
<td class="type">
<span class="param-type">Array</span>
</td>
<td class="description last">An array of object for selection element. Object must have "id", "filename" properties and "onSelect" method.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const list = [
{id: '12', filename: 'file-one.pdf'},
{id: '13', filename: 'file-two.pdf'},
{id: '14', filename: 'foobar.pdf'}
];
const options = list.map(item => {
// Add "onSelect" method to each item, and return Document instance
item.onSelect = () => instance.Core.createDocument('https://localhost/files/webviewer-demo.pdf');
return item;
});
instance.UI.setPageReplacementModalFileList(options);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setPresetCropDimensions"><span class="type-signature"><static> </span>setPresetCropDimensions(presetName, newPreset)</h4>
</dt>
<dd>
<div class="description">
Sets preset crop dimensions to be used when selecting a preset crop in the document cropping popup
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>presetName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of a current preset or the name to give to a new preset</td>
</tr>
<tr>
<td class="name"><code>newPreset</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">A set of dimensions to use for a preset crop
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>yOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The amount of inches to move the cropped area from the top of the page</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The height of the area to crop the page to in inches</td>
</tr>
<tr>
<td class="name"><code>xOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The amount of inches to move the cropped area from the left of the page</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The width of the area to crop the page to in inches</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setPresetCropDimensions('Letter', {'yOffset': 0, 'height': 11, 'xOffset': 0, 'width': 8.5});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setPrintedNoteDateFormat"><span class="type-signature"><static> </span>setPrintedNoteDateFormat(format)</h4>
</dt>
<dd>
<div class="description">
Sets the format for displaying the date when a note is printed. A list of formats can be found <a href="https://github.com/iamkun/dayjs/blob/master/docs/en/API-reference.md#format-formatstringwithtokens-string">dayjs API</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The format of date to display</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setPrintedNoteDateFormat('DD.MM.YYYY HH:MM');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setPrintQuality"><span class="type-signature"><static> </span>setPrintQuality(quality)</h4>
</dt>
<dd>
<div class="description">
Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory. The viewer's default quality is 1.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>quality</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The quality of the document to print. Must be a positive number.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setPrintQuality(2);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setSelectedTab"><span class="type-signature"><static> </span>setSelectedTab(id, dataElement)</h4>
</dt>
<dd>
<div class="description">
Sets the currently selected tab of a Tabs component.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The id of the Tabs component to set.</td>
</tr>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The 'dataElement' attribute of the TabPanel component to select.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Set the currently selected tab of 'signatureModal' to be the 'Type' panel.
instance.UI.setSelectedTab('signatureModal', 'textSignaturePanelButton'); //'inkSignaturePanelButton', 'imageSignaturePanelButton'
// Set the currently selected tab of 'linkModal' to be the 'Page' panel.
instance.UI.setSelectedTab('linkModal', 'PageNumberPanelButton'); //'URLPanelButton'
// Set the currently selected tab of 'rubberStampTab' to be the 'Custom' panel.
instance.UI.setSelectedTab('rubberStampTab', 'customStampPanelButton'); //'standardStampPanelButton'
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setSignatureFonts"><span class="type-signature"><static> </span>setSignatureFonts(fonts)</h4>
</dt>
<dd>
<div class="description">
Set the fonts that are used when typing a signature in the signature dialog.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fonts</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
|
<span class="param-type"><a href="UI.html#.setSignatureFontsCallback">UI.setSignatureFontsCallback</a></span>
</td>
<td class="description last">An array of font families.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// 6.1
WebViewer(...)
.then(function(instance) {
instance.UI.setSignatureFonts(['GreatVibes-Regular']);
instance.UI.setSignatureFonts(currentFonts => [
...currentFonts,
'sans-serif',
]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setSwipeOrientation"><span class="type-signature"><static> </span>setSwipeOrientation(swipeOrientation)</h4>
</dt>
<dd>
<div class="description">
Sets the swipe orientation between pages of WebViewer UI on mobile devices. Default is horizontal.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>swipeOrientation</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The swipe orientation to navigate between pages. Available orientations are: horizontal, vertical and both.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setTheme"><span class="type-signature"><static> </span>setTheme(theme)</h4>
</dt>
<dd>
<div class="description">
Sets the theme of WebViewer UI. Please note that this does not work in IE11.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>theme</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Theme of WebViewerInstance UI.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="UI.html#.Theme">UI.Theme</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const theme = instance.UI.Theme;
instance.UI.setTheme(theme.DARK);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setToolbarGroup"><span class="type-signature"><static> </span>setToolbarGroup(groupDataElement [, pickTool])</h4>
</dt>
<dd>
<div class="description">
Sets the current active toolbar group.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>groupDataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">The groups dataElement. Default values are: toolbarGroup-View, toolbarGroup-Annotate,
toolbarGroup-Shapes, toolbarGroup-Insert, toolbarGroup-Measure, toolbarGroup-Edit, toolbarGroup-Forms</td>
</tr>
<tr>
<td class="name"><code>pickTool</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If true, after setting the toolbar group, the last picked tool for the group will be set as the current tool. Defaults to true.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
// Change the toolbar group to the `Shapes` group
instance.UI.setToolbarGroup('toolbarGroup-Shapes');</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setToolMode"><span class="type-signature"><static> </span>setToolMode(toolName)</h4>
</dt>
<dd>
<div class="description">
Sets tool mode.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type"><a href="Core.Tools.html#.ToolNames">Core.Tools.ToolNames</a></span>
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setToolMode('AnnotationEdit');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setTranslations"><span class="type-signature"><static> </span>setTranslations(language, translationObject)</h4>
</dt>
<dd>
<div class="description">
Add/Edit translations data for a specific language
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>language</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The language code for which you want to add/edit translation data</td>
</tr>
<tr>
<td class="name"><code>translationObject</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">A key/value object with the new/updated translations
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>key</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A key value for the new/updated translation.
Refer to the lib/ui/i18n folder to find the existing keys in the translation files</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">A value of the new/updated translation</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setTranslations('es',
{
'option.colorPalette.colorLabel': 'Etiqueta de color', //updates a pre-existing translation data
'action.newButton': 'Nuevo botón' // adds a new translation data
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setWv3dPropertiesPanelModelData"><span class="type-signature"><static> </span>setWv3dPropertiesPanelModelData(modelData)</h4>
</dt>
<dd>
<div class="description">
Set the WV3D Properties Panel with an array of model data objects
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>modelData</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array of objects defining 3d metadata properties.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setWv3dPropertiesPanelModelData([{'name':'roof', 'height':'55cm'}, {'name':'wall', 'height':'100cm'}]);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setWv3dPropertiesPanelSchema"><span class="type-signature"><static> </span>setWv3dPropertiesPanelSchema(schema)</h4>
</dt>
<dd>
<div class="description">
Set the configuration schema for the WV3D Properties Panel
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>schema</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Object containing options for configuring the 3d properties panel.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>headerName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Sets the Title Header</td>
</tr>
<tr>
<td class="name"><code>defaultValues</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Defines the key/value pairs that will appear under the title, outside of a group.</td>
</tr>
<tr>
<td class="name"><code>groups</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Defines the collapsible groups that appear below the default values.</td>
</tr>
<tr>
<td class="name"><code>groupOrder</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Defines the order of the groups. If a group is not included it is appended to the end of the defined groups.</td>
</tr>
<tr>
<td class="name"><code>removeEmptyRows</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Defines whether to remove rows that contain empty string values.</td>
</tr>
<tr>
<td class="name"><code>removeEmptyGroups</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Defines whether to remove groups that contain only empty string values.</td>
</tr>
<tr>
<td class="name"><code>createRawValueGroup</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Defines whether to create a final group that has all the raw values.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.setWv3dPropertiesPanelSchema({
headerName: 'Name',
defaultValues: {
Description: 'Description',
GlobalID: 'GlobalId',
Handle: 'handle',
EmptyRow1: 'EmptyRow1',
},
groups: {
SampleGroup01: {
SampleField01: 'Sample01',
SampleField02: 'Sample02',
SampleField03: 'Sample03',
EmptyRow2: 'EmptyRow2',
GrossFootprintArea: 'GrossFootprintArea',
GrossSideArea: 'GrossSideArea',
GrossVolume: 'GrossVolume',
},
SampleGroup02: {
SampleField01: 'Sample01',
SampleField02: 'Sample02',
SampleField03: 'Sample03',
},
SampleGroup03: {
ObjectType: 'Elephants',
EmptyRow3: 'Tigers',
ObjectPlacement: 'Bears',
},
},
groupOrder: ['Dimensions', 'RandomStuff'],
removeEmptyRows: false,
removeEmptyGroups: true,
createRawValueGroup: true,
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".setZoomLevel"><span class="type-signature"><static> </span>setZoomLevel(zoomLevel)</h4>
</dt>
<dd>
<div class="description">
Sets zoom level.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>zoomLevel</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</td>
<td class="description last">Zoom level in either number or percentage.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
var docViewer = instance.Core.documentViewer;
// you must have a document loaded when calling this api
docViewer.addEventListener('documentLoaded', function() {
instance.UI.setZoomLevel('150%'); // or setZoomLevel(1.5)
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".showErrorMessage"><span class="type-signature"><static> </span>showErrorMessage(message)</h4>
</dt>
<dd>
<div class="description">
Displays the custom error message
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>message</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">An error message</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>Since version 8.0. Use <a href="UI.html#.displayErrorMessage">displayErrorMessage</a> instead.</li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.showErrorMessage('My error message');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".showOutlineControl"><span class="type-signature"><static> </span>showOutlineControl()</h4>
</dt>
<dd>
<div class="description">
Show outline control
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.showOutlineControl();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".showWarningMessage"><span class="type-signature"><static> </span>showWarningMessage(options)</h4>
</dt>
<dd>
<div class="description">
Displays the custom error message
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">object</span>
</td>
<td class="description last">Warning string message to display or an object for controlling the warning popup
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>confirmBtnText</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The text that will be rendered in the confirm button</td>
</tr>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The title of the modal</td>
</tr>
<tr>
<td class="name"><code>message</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The text that will rendered in the body of the modal</td>
</tr>
<tr>
<td class="name"><code>onConfirm</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">The callback function that will be invoked when the user clicks the Confirm button. The callback must return a Promise that resolves.</td>
</tr>
<tr>
<td class="name"><code>onCancel</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">The callback function that will be invoked when the user clicks the Cancel button. The callback must return a Promise that resolves.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.showWarningMessage({
title: 'This is my warning modal title',
message: 'This is the body of my modal',
confirmBtnText: 'Okay!',
onConfirm: () => {
console.log('The user clicked the confirm button');
return Promise.resolve();
},
onCancel: () => {
console.log('The user clicked the cancel button');
return Promise.resolve();
},
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".syncNamespaces"><span class="type-signature"><static> </span>syncNamespaces(namespaces, otherInstances)</h4>
</dt>
<dd>
<div class="description">
Syncs the namespaces under the Core namespace for the window, this instance, as well as others instances.
<br/><br/>
This is required for interoperability between multiple instances of WebViewer since each loaded instance ends up with different class references despite sharing the same name.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>namespaces</code></td>
<td class="type">
<span class="param-type"><a href="WebViewerInstance.html">WebViewerInstance</a></span>
|
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="description last">The object containing the namespaces that will be used for all instances. This can be a WebViewer instance or an object with the namespaces inside.
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>PDFNet</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The PDFNet namespace. This is probably the most common that needs to be synced.</td>
</tr>
<tr>
<td class="name"><code>Actions</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The Actions namespace.</td>
</tr>
<tr>
<td class="name"><code>Annotations</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The Annotations namespace.</td>
</tr>
<tr>
<td class="name"><code>Math</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The Math namespace.</td>
</tr>
<tr>
<td class="name"><code>Tools</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The Tools namespace.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>otherInstances</code></td>
<td class="type">
<span class="param-type"><a href="WebViewerInstance.html">WebViewerInstance</a></span>
</td>
<td class="attributes">
<repeatable><br>
</td>
<td class="description last">Other instances that will share the same namespaces.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// Loaded PDFNet directly
const Core = window.Core;
const PDFNet = Core.PDFNet;
Core.setWorkerPath('../../../lib/core');
Core.enableFullPDF();
...
WebViewer(...)
.then(function(instance) {
// Force this instance to use the loaded PDFNet instead of the one loaded specific to this instance
instance.UI.syncNamespaces({ PDFNet });
// instance.UI.syncNamespaces({ PDFNet }, instance2, instance3); // Alternative; instance, instance2, and instance3 will share the same PDFNet namespace.
...
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".toggleElement"><span class="type-signature"><static> </span>toggleElement(dataElement)</h4>
</dt>
<dd>
<div class="description">
Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element attribute value for a DOM element. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>Since version 8.0. Use toggleElementVisibility instead.</li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".toggleElementVisibility"><span class="type-signature"><static> </span>toggleElementVisibility(dataElement)</h4>
</dt>
<dd>
<div class="description">
Toggles the visibility of the element to be visible/hidden. Note that toggleElementVisibility works only for panel/overlay/popup/modal elements.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">data-element attribute value for a DOM element. To find data-element of a DOM element, refer to <a href='https://www.pdftron.com/documentation/web/guides/hiding-elements/#finding-dataelement-attribute-values' target='_blank'>Finding data-element attribute values</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.toggleElementVisibility('leftPanel'); // open LeftPanel if it is closed, or vice versa
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".toggleFullScreen"><span class="type-signature"><static> </span>toggleFullScreen()</h4>
</dt>
<dd>
<div class="description">
Toggles full scree mode of the browser.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.toggleFullScreen();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".toggleReaderMode"><span class="type-signature"><static> </span>toggleReaderMode()</h4>
</dt>
<dd>
<div class="description">
Toggles Reader mode of the viewer.
Note that Reader mode only works with fullAPI enabled.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.toggleReaderMode();
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".unregisterTool"><span class="type-signature"><static> </span>unregisterTool(toolName)</h4>
</dt>
<dd>
<div class="description">
Unregisters tool in the document viewer tool mode map, and removes the button object.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.unregisterTool('MyTool');
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".unselectThumbnailPages"><span class="type-signature"><static> </span>unselectThumbnailPages(pageNumbers)</h4>
</dt>
<dd>
<div class="description">
Unselect selected thumbnails
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageNumbers</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">array of page numbers to unselect</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">// 6.1 and after
WebViewer(...)
.then(function(instance) {
const pageNumbersToUnselect = [1, 2];
instance.UI.unselectThumbnailPages(pageNumbersToUnselect);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".updateElement"><span class="type-signature"><static> </span>updateElement(dataElement, props)</h4>
</dt>
<dd>
<div class="description">
Update an element in the viewer.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dataElement</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">the data element of the element that will be updated. Only the data element of HTML elements that have 'Button' in the class name will work.</td>
</tr>
<tr>
<td class="name"><code>props</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">An object that is used to override an existing item's properties.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.updateElement('thumbnailsPanelButton', {
img: 'path/to/image',
title: 'new_tooltip',
})
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".updateTool"><span class="type-signature"><static> </span>updateTool(toolName [, properties])</h4>
</dt>
<dd>
<div class="description">
Update existing tool's properties.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">Name of the tool, either from <a href='https://www.pdftron.com/documentation/web/guides/annotations-and-tools/#list-of-tool-names' target='_blank'>tool names list</a> or the name you registered your custom tool with.</td>
</tr>
<tr>
<td class="name"><code>properties</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Tool properties
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>buttonImage</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Path to an image or base64 data for the tool button</td>
</tr>
<tr>
<td class="name"><code>buttonName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Name of the tool button that will be used in data-element</td>
</tr>
<tr>
<td class="name"><code>buttonGroup</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Group of the tool button belongs to</td>
</tr>
<tr>
<td class="name"><code>tooltip</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Tooltip of the tool button</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.updateTool('AnnotationCreateSticky', {
buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".useEmbeddedPrint"><span class="type-signature"><static> </span>useEmbeddedPrint( [use])</h4>
</dt>
<dd>
<div class="description">
Use/not use embedded printing. Only applicable to Chrome.
The printing process will be faster and the quality might be higher when using Chrome's native printing.
You may not want to use embedded printing if there are custom annotations in your document.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>use</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Whether or not to use embedded printing</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.useEmbeddedPrint(false); // disable embedded printing
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id=".willUseEmbeddedPrinting"><span class="type-signature"><static> </span>willUseEmbeddedPrinting()</h4>
</dt>
<dd>
<div class="description">
Returns whether Webviewer will use/not use embedded printing.
Will return false if the browser doesn't support embedded printing or if UI.useEmbeddedPrint is set to false.
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
instance.UI.willUseEmbeddedPrinting(); // Returns true/false if embedded printing is supported and enabled
});</pre>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<hr>
<dt class="name" id=".addTabOptions">
<h4 id=".addTabOptions">addTabOptions</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>loadDocumentOptions</code></td>
<td class="type">
<span class="param-type"><a href="UI.html#.loadDocumentOptions">UI.loadDocumentOptions</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The document loading options</td>
</tr>
<tr>
<td class="name"><code>setActive</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether to set the new tab as active immediately after adding it (default: true)</td>
</tr>
<tr>
<td class="name"><code>saveCurrentActiveTabState</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether to save the current tab annotations, scroll position, and zoom level before adding the new tab (only used when setActive=true) (default: true)</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".CustomApplyRedactionsHandler"><span class="type-signature"></span>CustomApplyRedactionsHandler(annotations, originalApplyRedactionsFunction)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotations</code></td>
<td class="type">
<span class="param-type">Array.<<a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a>></span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>originalApplyRedactionsFunction</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">The original applyRedactions function</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".CustomNoteSelectionFunction"><span class="type-signature"></span>CustomNoteSelectionFunction(annotation)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotation</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">A reference to the annotation object associated with the note</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".disableReplyForAnnotationsCallback"><span class="type-signature"></span>disableReplyForAnnotationsCallback(annotation)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to <a href="UI.html#.disableReplyForAnnotations">disableReplyForAnnotations</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotation</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Annotation object</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
True if replies for the annotation passed in should be disabled. False otherwise.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".filterAnnotation"><span class="type-signature"></span>filterAnnotation(annotation)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to <a href="UI.html#.setCustomNoteFilter">setCustomNoteFilter</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotation</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Annotation object</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether the annotation should be kept.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".getSeparatorContent"><span class="type-signature"></span>getSeparatorContent(prevNote, currNote, options)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to `sortStrategy.getSeparatorContent` in <a href="UI.html#.addSortStrategy">addSortStrategy</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>prevNote</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Previous note (annotation)</td>
</tr>
<tr>
<td class="name"><code>currNote</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Current note (annotation)</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Optional values
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageLabels</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">List of page label</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Content to be rendered in a separator
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".getSortedNotes"><span class="type-signature"></span>getSortedNotes(notes)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to `sortStrategy.getSortedNotes` in <a href="UI.html#.addSortStrategy">addSortStrategy</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>notes</code></td>
<td class="type">
<span class="param-type">Array.<<a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a>></span>
</td>
<td class="description last">List of unsorted notes (annotations)</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Sorted notes (annotations)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<<a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a>></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".headerCallback"><span class="type-signature"></span>headerCallback(header)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to <a href="UI.html#.setHeaderItems">setHeaderItems</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>header</code></td>
<td class="type">
<span class="param-type"><a href="UI.Header.html">UI.Header</a></span>
</td>
<td class="description last">Header instance with helper functions</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id=".loadDocumentOptions">
<h4 id=".loadDocumentOptions">loadDocumentOptions</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>extension</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The extension of the file. If file is a blob/file object or a URL without an extension then this is necessary so that WebViewer knows what type of file to load.</td>
</tr>
<tr>
<td class="name"><code>filename</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Filename of the document, which is used when downloading the PDF.</td>
</tr>
<tr>
<td class="name"><code>customHeaders</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object of custom HTTP headers to use when retrieving the document from the specified url.</td>
</tr>
<tr>
<td class="name"><code>webViewerServerCustomQuerypropertyeters</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object of custom query propertyeters to be appended to every WebViewer Server request.</td>
</tr>
<tr>
<td class="name"><code>documentId</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Unique id of the document.</td>
</tr>
<tr>
<td class="name"><code>withCredentials</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether or not cross-site requests should be made using credentials.</td>
</tr>
<tr>
<td class="name"><code>cacheKey</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">A key that will be used for caching the document on WebViewer Server.</td>
</tr>
<tr>
<td class="name"><code>officeOptions</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object that contains the options for an Office document.
<h6>Properties</h6>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>templateValues</code></td>
<td class="type">
<span class="param-type"><a href="Core.html#.TemplateData">Core.TemplateData</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If set, will perform template replacement with the data specified by this parameter</td>
</tr>
<tr>
<td class="name"><code>doTemplatePrep</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If set, it will interpret the office document as a template document and compile all of the template tags in the document</td>
</tr>
<tr>
<td class="name"><code>disableBrowserFontSubstitution</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">By default, office viewing takes a lightweight approach to font substitution, allowing the browser to select fonts when they are not embedded in the document itself.
While this means that WebViewer has access to all the fonts on the user's system, it also means that an office document may have a different "look" on different systems (depending on the fonts available) and when it is converted to PDF (as the PDF conversion routine cannot obtain low-level access to user fonts, for security reasons).
disableBrowserFontSubstitution prevents this browser substitution, forcing the WebViewer backend to handle all fonts. This means that viewing and conversion to PDF will be 100% consistent from system-to-system, at the expense of a slightly slower initial viewing time and higher bandwidth usage.
Using https://www.pdftron.com/documentation/web/faq/self-serve-substitute-fonts/ along with this option allows you to fully customize the substitution behaviour for all office files.</td>
</tr>
<tr>
<td class="name"><code>formatOptions</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object that contains formatting options for an Office document. Same options as allowed here Core.PDFNet.Convert.OfficeToPDFOptions.
<h6>Properties</h6>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>applyPageBreaksToSheet</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If true will split Excel worksheets into pages so that the output resembles print output.</td>
</tr>
<tr>
<td class="name"><code>displayChangeTracking</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If true will display office change tracking markup present in the document (i.e, red strikethrough of deleted content and underlining of new content). Otherwise displays the resolved document content, with no markup. Defaults to true.</td>
</tr>
<tr>
<td class="name"><code>excelDefaultCellBorderWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Cell border width for table cells that would normally be drawn with no border. In units of points. Can be used to achieve a similar effect to the "show gridlines" display option within Microsoft Excel.</td>
</tr>
<tr>
<td class="name"><code>excelMaxAllowedCellCount</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An exception will be thrown if the number of cells in an Excel document is above the value. Used for early termination of resource intensive documents. Setting this value to 250000 will allow the vast majority of Excel documents to convert without issue, while keeping RAM usage to a reasonable level. By default there is no limit to the number of allowed cells.</td>
</tr>
<tr>
<td class="name"><code>locale</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Sets the value for Locale in the options object ISO 639-1 code of the current system locale. For example: 'en-US', 'ar-SA', 'de-DE', etc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>password</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">A string that will be used to as the password to load a password protected document.</td>
</tr>
<tr>
<td class="name"><code>onError</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">A callback function that will be called when error occurs in the process of loading a document. The function signature is `function(e) {}`</td>
</tr>
<tr>
<td class="name"><code>xodOptions</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object that contains the options for a XOD document.</td>
</tr>
<tr>
<td class="name"><code>xoddecrypt</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Function to be called to decrypt a part of the XOD file. For default XOD AES encryption pass Core.Encryption.decrypt.</td>
</tr>
<tr>
<td class="name"><code>xoddecryptOptions</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">An object with options for the decryption e.g. {p: "pass", type: "aes"} where is p is the password.</td>
</tr>
<tr>
<td class="name"><code>xodstreaming</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">A boolean indicating whether to use http or streaming PartRetriever, it is recommended to keep streaming false for better performance. https://www.pdftron.com/documentation/web/guides/streaming-option.</td>
</tr>
<tr>
<td class="name"><code>xodazureWorkaround</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether or not to workaround the issue of Azure not accepting range requests of a certain type. Enabling the workaround will add an extra HTTP request of overhead but will still allow documents to be loaded from other locations.</td>
</tr>
<tr>
<td class="name"><code>xodstartOffline</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">Whether to start loading the document in offline mode or not. This can be set to true if the document had previously been saved to an offline database using WebViewer APIs. You'll need to use this option to load from a completely offline state.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".NoteTransformFunction"><span class="type-signature"></span>NoteTransformFunction(wrapperElement, state, createElement)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>wrapperElement</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">A reference to the DOM node that wraps the note. You can use this to query select child elements to mutate (see the examples below)</td>
</tr>
<tr>
<td class="name"><code>state</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">The state of the note. Contains two properties, 'annotation' and 'isSelected'
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotation</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">A reference to the annotation object associated with the note</td>
</tr>
<tr>
<td class="name"><code>isSelected</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">whether or not the note is currently expanded</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>createElement</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">A utility function that should be used when creating DOM nodes. This is a replacement for `document.createElement`.
Accepts the same parameters as `document.createElement`. Using document.createElement instead of this function will cause your DOM nodes to not be cleaned up on subsequent renders.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id=".PaletteOption">
<h4 id=".PaletteOption">PaletteOption</h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolNames</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Tools that will have the same colors in the palette.</td>
</tr>
<tr>
<td class="name"><code>colors</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">An array of hex colors. Use 'transparency' for a transparent color.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt class="name" id=".RedactionSearchPattern">
<h4 id=".RedactionSearchPattern">RedactionSearchPattern</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>label</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">The label to be used for the search pattern in the UI</td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">A string representing the type of item being searched for. For example, if searching for postal codes, this could be 'postalCode'. This is used
to determine which icon will be used to render the result in the search panel.</td>
</tr>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The icon to be used for the search pattern in the search dropdown for the UI and the redaction panel for this type of search. Can be an inline SVG, or the name of an icon included in the WebViewer UI icon set.
If no icon is passed, the default icon for text searches will be used.</td>
</tr>
<tr>
<td class="name"><code>regex</code></td>
<td class="type">
<span class="param-type">RegExp</span>
</td>
<td class="attributes">
</td>
<td class="description last">The regex to be used for the search pattern</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".renderCustomModal"><span class="type-signature"></span>renderCustomModal()</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to `options.render` in <a href="UI.html#.addCustomModal">addCustomModal</a>.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Modal element. If string is returned, it will be displayed as is inside the modal
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
|
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".renderCustomPanel"><span class="type-signature"></span>renderCustomPanel()</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to `options.panel.render` in <a href="UI.html#.setCustomPanel">setCustomPanel</a>.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Panel element.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".searchListener"><span class="type-signature"></span>searchListener(searchValue, options, results)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to <a href="UI.html#.addSearchListener">addSearchListener</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>searchValue</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Search value</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Search options object, which includes 'caseSensitive', 'wholeWord', 'wildcard' and 'regex'</td>
</tr>
<tr>
<td class="name"><code>results</code></td>
<td class="type">
<span class="param-type">Array.<object></span>
</td>
<td class="description last">Search results</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".setSignatureFontsCallback"><span class="type-signature"></span>setSignatureFontsCallback(fonts)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fonts</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">current font families</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
fonts to set.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<string></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".shouldRenderSeparator"><span class="type-signature"></span>shouldRenderSeparator(prevNote, currNote)</h4>
</dt>
<dd>
<div class="description">
Callback that gets passed to `sortStrategy.shouldRenderSeparator` in <a href="UI.html#.addSortStrategy">addSortStrategy</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>prevNote</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Previous note (annotation)</td>
</tr>
<tr>
<td class="name"><code>currNote</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">Current note (annotation)</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether a separator should be rendered or not
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id=".SignatureFilterFunction"><span class="type-signature"></span>SignatureFilterFunction(annotation, index)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>annotation</code></td>
<td class="type">
<span class="param-type"><a href="Core.Annotations.Annotation.html">Core.Annotations.Annotation</a></span>
</td>
<td class="description last">A signature annotation found in the SignatureCreateTool saved signatures list</td>
</tr>
<tr>
<td class="name"><code>index</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">An optional parameter for the index of the annotaiton parameter within the SignatureCreateTool saved signatures list</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Whether or not a signature annotation should be included in the annotation preset
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt class="name" id=".Theme">
<h4 id=".Theme">Theme</h4>
</dt>
<dd>
<div class="description">
Contains string enumeration for all themes for WebViewer. They are used to set the viewer theme.
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>DARK</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The theme where the WebViewer will be dark.</td>
</tr>
<tr>
<td class="name"><code>LIGHT</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The theme where the WebViewer will be light.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const theme = instance.UI.Theme;
instance.UI.setTheme(theme.DARK);
});</pre>
</dd>
</dl>
<h3 class="subsection-title">Events</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="event:annotationFilterChanged">annotationFilterChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when annotation filter in the notes panel has changed.
Returns empty arrays if the filter is cleared.
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>types</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Types filter</td>
</tr>
<tr>
<td class="name"><code>authors</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Author filter</td>
</tr>
<tr>
<td class="name"><code>colors</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Color filter</td>
</tr>
<tr>
<td class="name"><code>statuses</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Status filter</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:beforeTabChanged">beforeTabChanged</h4>
</dt>
<dd>
<div class="description">
Triggered before the UI switches tabs
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>currentTab</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">An object containing the properties for the currently active tab (null if no currently active tab)
<h6>Properties</h6>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The id of the tab being switched to</td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Source of current tab</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tab load options</td>
</tr>
<tr>
<td class="name"><code>annotationsChanged</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">True if the annotations have been changed since loading the tab</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>nextTab</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">An object containing the properties for the tab being switched to
<h6>Properties</h6>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The id of the tab being switched to</td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Source of current tab</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tab load options</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:documentLoaded">documentLoaded</h4>
</dt>
<dd>
<div class="description">
Triggered when a new document has been loaded.
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:documentMerged">documentMerged</h4>
</dt>
<dd>
<div class="description">
Triggered when a new document has been merged into the thumbnails panel.
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>filename</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">File name</td>
</tr>
<tr>
<td class="name"><code>pages</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">Page numbers</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:dragOutline">dragOutline</h4>
</dt>
<dd>
<div class="description">
Triggered when dragging Outline item.
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:dragOutline">dragOutline</h4>
</dt>
<dd>
<div class="description">
Triggered when dropping Outline item.
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:fileDownloaded">fileDownloaded</h4>
</dt>
<dd>
<div class="description">
Triggered when the file has finished downloading.
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:finishedSavingPDF">finishedSavingPDF</h4>
</dt>
<dd>
<dl class="details">
<dt class="important tag-deprecated method-doc-label method-doc-details-label">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>Since version 8.3. Use <a href="UI.html#event:fileDownloaded">fileDownloaded</a> instead</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:fullscreenModeToggled">fullscreenModeToggled</h4>
</dt>
<dd>
<div class="description">
Triggered when fullscreen mode is toggled.
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>isInFullscreen</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Whether in fullscreen mode or not.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:loaderror">loaderror</h4>
</dt>
<dd>
<div class="description">
Triggered when there is an error loading the document.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>err</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">The error</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:outlineBookmarksChanged">outlineBookmarksChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when outline bookmarks have changed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>bookmarkData</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>bookmark</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">The changed bookmark
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Changed outline bookmark id</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Changed outline bookmark name</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>path</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Changed outline path in the outline tree</td>
</tr>
<tr>
<td class="name"><code>action</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The action that triggered the outline bookmarks change</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:panelResized">panelResized</h4>
</dt>
<dd>
<div class="description">
Triggered when the panels are resized.
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>element</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">DataElement name</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">New panel width</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:selectedThumbnailChanged">selectedThumbnailChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when the selected thumbnail changed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>selectedThumbnailPageIndexes</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">The array of indexes of currently selected thumbnails</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:tabAdded">tabAdded</h4>
</dt>
<dd>
<div class="description">
Triggered when a Tab is added
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The id of the tab being added</td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Source of current tab</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tab load options</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:tabDeleted">tabDeleted</h4>
</dt>
<dd>
<div class="description">
Triggered when a Tab is deleted
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The id of the tab being deleted</td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Source of current tab</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tab load options</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:tabMoved">tabMoved</h4>
</dt>
<dd>
<div class="description">
Triggered when a Tab is moved
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The id of the tab being moved</td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Source of moved tab</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Tab load options</td>
</tr>
<tr>
<td class="name"><code>prevIndex</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Previous index of tab</td>
</tr>
<tr>
<td class="name"><code>newIndex</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">New index of tab</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:themeChanged">themeChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when the UI theme has changed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>theme</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The new UI theme</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:thumbnailDragged">thumbnailDragged</h4>
</dt>
<dd>
<div class="description">
Triggered when thumbnail(s) are dragged in the thumbnail panel
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:thumbnailDropped">thumbnailDropped</h4>
</dt>
<dd>
<div class="description">
Triggered when dragged thumbnail(s) are dropped to a new location in the thumbnail panel
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pageNumbersBeforeMove</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">The array of page numbers to be moved</td>
</tr>
<tr>
<td class="name"><code>pageNumbersAfterMove</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
</td>
<td class="description last">The array of page numbers of where thumbnails being dropped</td>
</tr>
<tr>
<td class="name"><code>numberOfPagesMoved</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Number of page(s) being moved</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:toolbarGroupChanged">toolbarGroupChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when the toolbar group has changed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>toolbarGroup</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The new toolbar group</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:userBookmarksChanged">userBookmarksChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when user bookmarks have changed.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>bookmarks</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">The new bookmarks</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:viewerLoaded">viewerLoaded</h4>
</dt>
<dd>
<div class="description">
Triggered when the viewer has loaded.
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:visibilityChanged">visibilityChanged</h4>
</dt>
<dd>
<div class="description">
Triggered when the visibility of an element has changed.
</div>
<h5>Type:
<span class="param-type">object</span>
</h5>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>element</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">DataElement name</td>
</tr>
<tr>
<td class="name"><code>isVisible</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">The new visibility</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
</dl>
</article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a>
on 2023-06-16T14:56:50-07:00
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : false,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>