Is it possible to open Note expanded in custom modal?

Technical Support
1

Hi,
We are trying to create Note expanded(highlighted in given image) in our custom popup . Actually we don’t want to show Notes panel in viewer ,Instead we are trying to set/edit comments using our custom popup for Note annotation.

image
image814×581 31.9 KB

Is it possible to do this ? if yes then how can we achieve this ?

Thanks and Regards,
Vivek Sonawane

2

Hi,

Creating and editing comments on annotations is quite straightforward. Here’s some code to illustrate
the basics of getting comments, setting comments, and replying to comments, and getting a list of those replies.
This should be enough to get you started:

const { Annotations, annotManager, docViewer } = instance;

  docViewer.on('documentLoaded', () => {
    // only show none Notes annotations in the Notes panel
    instance.setCustomNoteFilter((annot) => !(annot.Subject === 'Note'));

    const handleAnnotClick = (annot) => {
     
      if (annot?.Subject === 'Note') {
        // Set contents of annotation
        annotManager.setNoteContents(annot, 'test')

        // Get contents of annotation
        const noteContents = annot.getContents();

        // Create a reply to noteAnnot
        const reply = annotManager.createAnnotationReply(annot, 'This is my reply');
        reply.Author = 'Derick';

        // Get all replies appended to noteAnnot
        const listOfReplies = annot.getReplies();

        listOfReplies.forEach((annot) => {
          const replyText = annot.getContents();
          // Display replyText in your custom annotation
        });
      }
    };

    // You can get annots via click events
    docViewer.on('click', (event) => {
      const clickedAnnot = annotManager.getAnnotationsByMouseEvent(event);
      handleAnnotClick(clickedAnnot[0]);
    });

    // Alternatively you can get all annotations by:
    const listOfAnnots = annotManager.getAnnotationsList();
    // Get only annotations that are a Note and are not replies
    const listOfNoteAnnots = listOfAnnots.filter((annot) => annot.Subject === 'Note' && !annot.isReply());

  });

Hope this helps,
Dustin