Add comment header in Sticky note Annotation in react js

Technical Support
1

sticky note annotation
8.0.1

Adding comment header/title in stick note annotation
is it possible to add a comment header/title(editable i.e can be different for every comment) above the comment section and below the author name/date in the sticky note annotation? if yes, could you please share the code snippet for this in react js.
attaching the requirement marked by red arrow.

sticky note
sticky note1336×693 96.8 KB

2

Hi
Thanks for contact us for support. This is Jack from Webviewer team
Currently we don’t have any feature for this. But there is a workaround. You could follow this guide for customize the Webviewer UI. You could do some customization in the NodeHeader component.

Regards
Jack

3

Could you please share some code references as well for the same?
also, do I need to make changes directly in the node header component, or need to create a separate component for this requirement?

4

Hi
You could add a new Component under the this line webviewer-ui/NoteContent.js at 0f2408f3863b569d7b6fd1978da4bc755c8b5528 · PDFTron/webviewer-ui · GitHub. Yeah, it depends on how complex component you want to add.

Regards
Jack

5

I am using pdftron 8.1.0 version currently, is there any other solution apart from doing customization directly in webviewer-ui?

Will it be possible to edit guest/author with the comment header/title?

6

Hi
What do you mean for edit guest/author with the comment header?? Could you please give me more detail about it??

Regards
Jack

7

will it be possible to replace the given ‘Guest’ with a comment header/title (which can be a text field or something else so that it can be different for different comments)?
Attaching the image for more clearer picture

stickynotes
stickynotes1336×693 98 KB

8

Hi
Because we didn’t add any feature for replace the author into text field, the only way should be the customization. If you want to change the author to the title, maybe you could check from this guide. We don’t really recommend this way though.
I think should just do the customization.

Regards
Jack

9

Thanks For the reply, I tried the below code, which is not working as it seems the method is expecting the return of a string. can’t we just return HTML? as I need one more similar section like the comment section as given in the above image.
annotationManager.setAnnotationDisplayAuthorMap(() => {
return < textArea> Comment header < textArea>
});
it gives me Uncaught Error: TypeError: e.toLowerCase is not a function

10

Hi
Currently we don’t have any api for change the html of the response node. As I have mentioned before, the only way should be you do the customization by yourself.

Best Regards
Jack