# How to create custom annotation comment with id?

**URL:** <https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [December 13, 2021, 6:07am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240 "2021-12-13T06:07:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![arman](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@arman](https://pdfjs.community/u/arman)\
**Post date:** [December 13, 2021, 6:07am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/1 "2021-12-13T06:07:27Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

**PDF.js Express Version**  
8.0.1

**Detailed description of issue**  
I want to create my own custom comment for highlight annotation and also for sticky note annotation. I just want to know how to create that with a specific id so that I can update or delete it in my DB using that id.

I already check this function “createAnnotationReply(annotation, initialText)” but I can not set my own custom id. This function only accepts a valid string as a comment.

**Expected behaviour**  
I expect when I edit or delete any comment against highlights or note annotation then I can detect which comment I m deleting or updating by custom comment id.

**Does your issue happen with every document, or just one?**  
I want this for every document where I want to create custom annotation comment.

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
I actually need something like the below code snippet for creating my custom comment.

const noteText = new Annotations.StickyAnnotation();  
noteText.Author = “Author”;  
noteText.Id = note.id.toString();  
noteText.Locked = false;  
noteText.setContents(note.text);  
noteText.Subject = ‘Note’;  
annotManager.addAnnotation(noteText, true);

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [December 13, 2021, 6:07am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/3 "2021-12-13T06:07:32Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Create highlight annotations in PDF.js Express - Other examples](https://pdfjs.express/documentation/annotation/create-annotation-highlight#other-examples)
- [Create rectangle annotations in PDF.js Express - Other examples](https://pdfjs.express/documentation/annotation/create-annotation-rectangle#other-examples)
- [Create image stamp annotations in PDF.js Express - Other examples](https://pdfjs.express/documentation/annotation/create-annotation-stamp#other-examples)

APIs:
- [Core.AnnotationManager - createAnnotationReply(annotation, initialText)](https://pdfjs.express/api/Core.AnnotationManager.html#createAnnotationReply__anchor)
- [Core.Annotations.CustomAnnotation - new CustomAnnotation(type [, initializer])](https://pdfjs.express/api/Core.Annotations.CustomAnnotation.html#CustomAnnotation__anchor)
- [Core.Tools.TextAnnotationCreateTool - new TextAnnotationCreateTool(docViewer, textAnnotationPrototype)](https://pdfjs.express/api/Core.Tools.TextAnnotationCreateTool.html#TextAnnotationCreateTool__anchor)

Forums:
- [How to keep the top-level note/comment of an annotation with its original date?](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/5)
- [How to get the annotation id when I highlight some text and also how to get the page no, quads and highlighted text from my annotations object?](https://pdfjs.community/t/how-to-get-the-annotation-id-when-i-highlight-some-text-and-also-how-to-get-the-page-no-quads-and-highlighted-text-from-my-annotations-object/977/3)
- [I want to create custom circle annotation which I want to use as a stamp](https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662/1)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [December 15, 2021, 4:15pm UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/4 "2021-12-15T16:15:43Z")

</div>

Hey there!

The assigned ID of an annotation cannot actually be changed since it is tracked and internally. However there are a lot of other ways to do this.

What we typically do in our applications is add an additional column to our database called “annotationId” or something similar, and there we store the WebViewer annotation id. So your “id” column would be your unique database ID and primary index, and your “annotationId” column would be set to the ID we assign the annotation in WebViewer.

Another way you can do this is by setting custom data on the annotation using the [setCustomData](https://pdfjs.express/api/Core.Annotations.Annotation.html#setCustomData__anchor) and [getCustomData](https://pdfjs.express/api/Core.Annotations.Annotation.html#getCustomData__anchor) APIs.

```javascript
  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      for(const annot of annots) {
        annot.setCustomData('u_id', 'some unique ID')
      }
    } else { // For edit and delete
      for(const annot of annots) {
        const myId = annot.getCustomData('u_id')
        console.log(myId)
      }
    }
  })

```

The great thing is that custom data is serialized, so even when you export/import annotations, that data persists.

Hope this helps!

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![arman](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@arman](https://pdfjs.community/u/arman)\
**Post date:** [December 22, 2021, 5:14am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/5 "2021-12-22T05:14:46Z")

</div>

The second approach sounds good to me. Thanks, Logan

---

<div class="post-metadata">

**Author:** ![arman](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@arman](https://pdfjs.community/u/arman)\
**Post date:** [December 22, 2021, 7:29am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/6 "2021-12-22T07:29:55Z")

</div>

One more thing how do I differentiate the note comment and highlight comment? As they both have Subject = ‘Note’

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 4, 2022, 3:30pm UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/7 "2022-01-04T15:30:34Z")

</div>

Happy new year! Sorry for the delay, was on vacation visiting family for the holidays.

You can check what kind of annotation it is like this:

```javascript
  instance.Core.annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      annots.forEach(annot => {
        
        if(annot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
          // highlight
        }

        if(annot instanceof instance.Core.Annotations.StickyAnnotation) {
          // note
        }

      })
    }
  })

```

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![arman](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@arman](https://pdfjs.community/u/arman)\
**Post date:** [January 6, 2022, 6:17am UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/8 "2022-01-06T06:17:41Z")

</div>

Happy new year. Hope you enjoyed your vacation. And thanks for the reply. But actually what I want to know is that, if I have Highlight Annotation and StickyNoteAnnotation I want to comment on them. Now how can I differentiate the comment as they both have Subject=‘Note’. I mean how to detect which one is TextHighlight Annotation comment and which one is StickyNoteAnnotation comment.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 11, 2022, 11:31pm UTC](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/9 "2022-01-11T23:31:31Z")

</div>

Hey!

Comments have a ‘InReplyTo’ field which you can use to get the parent annotation:

```javascript
  instance.Core.annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      annots.forEach(annot => {

        const { InReplyTo } = annot;

        if(InReplyTo) {
          const parentAnnot = instance.Core.annotationManager.getAnnotationById(InReplyTo);

          if(parentAnnot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
            // highlight
            console.log('highlight')
          }
  
          if(parentAnnot instanceof instance.Core.Annotations.StickyAnnotation) {
            // note
            console.log('note')
          }
        }
      })
    }
  })

```
