Apryse WebViewer

Namespace: NotesPanel

UI. NotesPanel

Methods

<static> disableAttachmentPreview()

Disable the preview of attachments.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.NotesPanel.disableAttachmentPreview();
  });

<static> disableAutoExpandCommentThread()

Disables the automatic expansion of all the comments threads in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {

  instance.UI.NotesPanel.disableAutoExpandCommentThread()
});

<static> disableMeasurementAnnotationFilter()

Disables the capability to filter by different measurement types in the comments panel filter. For example, if your document has line annotations and distance measurement annotations, they would be consolidated into one filter option: Line Annotation.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.NotesPanel.disableMeasurementAnnotationFilter();
  });

<static> disableMultiSelect()

Disable multi select in the notes panel
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.NotesPanel.disableMultiSelect();
  });

<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();
  });

<static> enableAutoExpandCommentThread()

Enables the automatic expansion of the comments threads in the Notes Panel.
Example
WebViewer(...).then(async function(instance) {

  instance.UI.NotesPanel.enableAutoExpandCommentThread()
});

<static> enableMeasurementAnnotationFilter()

Enables the capability to filter by different measurement types in the comments panel filter. For example, line annotations can also be distance measurements. Enabling this API would allow you to filter by line annotations and distance measurements separately. This API is disabled by default.
Example
WebViewer(...)
.then(function(instance) {
  instance.UI.NotesPanel.enableMeasurementAnnotationFilter();
});

<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:
Name Type Description
handler UI.NotesPanel.attachmentHandler The handler function
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;
      }
    });
  });

<static> setCustomHeader(options)

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;
      }
    });
  });

Type Definitions

attachmentHandler(file)

Parameters:
Name Type Description
file File The file selected to be uploaded
Returns:
A promise that resolves to a URL string pointing to the file saved on the cloud
Type
Promise.<string>

renderCustomHeader(notes)

Callback used in setCustomHeader and setCustomEmptyPanel.
Parameters:
Name Type Description
notes Array Array of notes displayed in the notes panel. Parameter not available in setCustomEmptyPanel (since there are no notes).
Returns:
Custom header element.
Type
HTMLElement