-
<static> disableAttachmentPreview()
-
Disable the preview of attachments.
Example
WebViewer(...)
.then(function(instance) {
instance.UI.NotesPanel.disableAttachmentPreview();
});
-
-
Disables the automatic expansion of all the comments threads in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.disableAutoExpandCommentThread()
});
-
<static> disableReplyCollapse()
-
Disables the collapsing of the replies in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.disableReplyCollapse()
});
-
<static> disableTextCollapse()
-
Disables the collapsing of the annotation's text in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.disableTextCollapse()
});
-
<static> enableAttachmentPreview()
-
Enable the preview of attachments.
Example
WebViewer(...)
.then(function(instance) {
instance.UI.NotesPanel.enableAttachmentPreview();
});
-
-
Enables the automatic expansion of the comments threads in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.enableAutoExpandCommentThread()
});
-
<static> enableReplyCollapse()
-
Enables the collapsing of the replies in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.enableReplyCollapse()
});
-
<static> enableTextCollapse()
-
Enables the collapsing of the annotation's text in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {
instance.UI.NotesPanel.enableTextCollapse()
});
-
<static> setAttachmentHandler(handler)
-
Set the handler function for reply attachment. Can use this for uploading attachments to cloud.
Parameters:
Example
WebViewer(...)
.then(function(instance) {
instance.UI.NotesPanel.setAttachmentHandler(async (file) => {
const uploadedURL = await aws.upload(file); //e.g. https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf
return uploadedURL;
});
});
-
<static> setCustomEmptyPanel(options)
-
Sets either an icon and message, or custom content, in the Notes Panel when the panel is empty.
Parameters:
| Name |
Type |
Description |
options |
object
|
Properties
| Name |
Type |
Argument |
Default |
Description |
message |
string
|
<optional>
|
|
Message displayed when panel is empty. |
readOnlyMessage |
string
|
<optional>
|
|
Message displayed when panel is empty for a read-only document. |
icon |
string
|
<optional>
|
|
Use inline SVG with this parameter. Default icon is used if nothing is specified. |
hideIcon |
boolean
|
<optional>
|
false
|
Hides icon if true. |
render |
UI.NotesPanel.renderCustomHeader
|
<optional>
|
|
Callback function that returns custom elements to render in empty notes panel. Overwrites all other properties if provided. |
|
Example
WebViewer(...)
.then(function(instance) {
instance.UI.NotesPanel.setCustomEmptyPanel({
icon: '<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#dfe2ed;}</style></defs><title>Artboard 1</title><path class="cls-1" d="M50,4.5H14A3.5,3.5,0,0,0,10.5,8V56A3.5,3.5,0,0,0,14,59.5H50A3.5,3.5,0,0,0,53.5,56V8A3.5,3.5,0,0,0,50,4.5ZM50.5,56a.5.5,0,0,1-.5.5H14a.5.5,0,0,1-.5-.5V8a.5.5,0,0,1,.5-.5H50a.5.5,0,0,1,.5.5Z"/><circle class="cls-1" cx="20.5" cy="32" r="2.5"/><circle class="cls-1" cx="20.5" cy="44.3" r="2.5"/><circle class="cls-1" cx="20.5" cy="19.7" r="2.5"/><rect class="cls-1" x="25.98" y="30.26" width="20.02" height="3.49"/><rect class="cls-1" x="25.98" y="42.55" width="20.02" height="3.49"/><polygon class="cls-1" points="25.98 17.96 25.98 21.45 46 21.45 46 17.96 44 17.96 25.98 17.96"/></svg>',
message: 'Here is a custom message to show when the Notes Panel is empty.'
});
instance.UI.NotesPanel.setCustomEmptyPanel({
hideIcon: false,
readOnlyMessage: 'A different custom message if Notes Panel is empty and document is read-only.'
});
instance.UI.NotesPanel.setCustomEmptyPanel({
render: () => {
const div = document.createElement('div');
const header = document.createElement('h2');
header.innerHTML = 'Custom empty content goes here!';
div.appendChild(header);
return div;
}
});
});
-
-
Sets a custom header for the notes panel by overwriting or prepending to the default header.
Parameters:
| Name |
Type |
Description |
options |
object
|
Properties
| Name |
Type |
Argument |
Default |
Description |
overwriteDefaultHeader |
boolean
|
<optional>
|
false
|
Replaces original notes panel header with content in render function. |
render |
UI.NotesPanel.renderCustomHeader
|
|
|
Callback function that returns custom elements to be prepended or to completely overwrite the default header. This function will receive the array of notes as an argument. |
|
Example
WebViewer(...)
.then(function(instance) {
instance.UI.NotesPanel.setCustomHeader({
overwriteDefaultHeader: true,
render: (notes) => {
const div = document.createElement('div');
const header = document.createElement('h2');
header.innerHTML = 'Custom header goes here!';
div.appendChild(header);
const subheader = document.createElement('h3');
subheader.innerHTML = `Number of notes: ${notes.length}`;
div.appendChild(subheader);
const button = document.createElement('button');
button.innerHTML = 'Back to Issues';
button.addEventListener('click', () => {
alert('Clicked button!');
});
div.appendChild(button);
return div;
}
});
});