How to change Placeholder for comment/reply and limit the number of replies?

Technical Support WebViewer
1

WebViewer Version: 8.1.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? Yes
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes

How to Change the Placeholder for comment/reply and limit the number of replies in the sticky note tool
Is it possible to change the ‘comment’ placeholder and Add Reply Placeholder?
Also, can we limit the number of replies to only 1 reply per comment?

Attaching the screenshot with the requirements marked by black Arrow

reply
reply1446×721 124 KB

2

Hello,

Thank you for contacting WebViewer support.
To change any label of the components you can use the API setTranslations which you will specify for which language you want to make the changes and a key/value object with new/updated translations.

For the labels you mentioned you can use the following code.

instance.UI.setTranslations('en',
    {
      'action.comment': 'My Custom comment', 
      'action.reply': 'My custom reply'
});

And to limit the number of replies you can use the API disableReplyForAnnotations. The code snippet below is limiting the number of replies to 1.

instance.UI.disableReplyForAnnotations((annotation) => {
    return annotation.getReplies().length > 0
});

I hope this helps, please let us know.

Best regards,

Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.

3

Thanks for the reply!! I am currently using pdftron/web-viewer version 8.1.0 and it seems UI.setTranslations() is not available in this, do we have any other alternative to replace these placeholder in the 8.1.0 version?
also, how can we hide Guest/TimeStamp here?

4

Hi,

In this case, you can use the API dangerouslySetNoteTransformFunction

instance.UI.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
      wrapper.querySelector('.author-and-time').setAttribute('style', 'display: none');
      wrapper.querySelector('.edit-content textarea')?.setAttribute('placeholder', 'My placeholder');
      wrapper.querySelector('.replies .reply-area-container textarea')?.setAttribute('placeholder', 'My reply');
    });

You can also use a custom CSS stylesheet. By targeting the class of this element you can hide it.

Example custom-css.css:

  .author-and-time {
    display: none;
  }

In your WebViewer instantiaton:

Webviewer({
  initialDoc: 'yourFile.pdf',
  path: '/lib',
  css: './custom-css.css',
}, ......

Best,
Dandara Navarro