# How to keep the top-level note/comment of an annotation with its original date?

**URL:** <https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894>\
**Category:** Technical Support\
**Created:** [July 20, 2021, 5:40pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894 "2021-07-20T17:40:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![psilva](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@psilva](https://pdfjs.community/u/psilva)\
**Post date:** [July 20, 2021, 5:40pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/1 "2021-07-20T17:40:45Z")

</div>

**PDF.js Express Version**

UI Version: 7.3.0  
Core Version: 7.3.1

**Detailed description of issue**  
When an annotation gets added, its initial comment in the notes panel has the original date/time in which the annotation was added. When new comments are added to the annotation though, the original/first comment’s date always updates to the latest comment’s date. Is there a way to keep the original date of the first comment of annotations?

**Does your issue happen with every document, or just one?**  
Happens with every document/annotation.

---

<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:** [July 20, 2021, 5:40pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/2 "2021-07-20T17:40:50Z")

</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:
- [Hiding annotations in WebViewer notes panel - setCustomNoteFilter](https://pdfjs.express/documentation/ui-customization/ui-customization-notes-panel#setcustomnotefilter)
- [Create image stamp annotations in PDF.js Express](https://pdfjs.express/documentation/annotation/create-annotation-stamp)
- [Create highlight annotations in PDF.js Express](https://pdfjs.express/documentation/annotation/create-annotation-highlight)

APIs:
- [CoreControls.Document - extractXFDF(pages)](https://pdfjs.express/api/CoreControls.Document.html#extractXFDF__anchor)
- [CoreControls.BlackBoxAnnotationManager - preloadAnnotations(An)](https://pdfjs.express/api/CoreControls.BlackBoxAnnotationManager.html#preloadAnnotations__anchor)
- [CoreControls.DocumentViewer - setInternalAnnotationsTransform(handler)](https://pdfjs.express/api/CoreControls.DocumentViewer.html#setInternalAnnotationsTransform__anchor)

Forums:
- [Annotations moving in pdf if I change the size of the pdf? Is there any way I can make them stick to their original positions?](https://pdfjs.community/t/annotations-moving-in-pdf-if-i-change-the-size-of-the-pdf-is-there-any-way-i-can-make-them-stick-to-their-original-positions/452/1)
- [How to get plan(PDF) detail as annotations differ in size(thickness) when same annotation drawn in both plans](https://pdfjs.community/t/how-to-get-plan-pdf-detail-as-annotations-differ-in-size-thickness-when-same-annotation-drawn-in-both-plans/752/1)
- [Confirm output of trial form field merger](https://pdfjs.community/t/confirm-output-of-trial-form-field-merger/744/1)

---

<div class="post-metadata">

**Author:** ![driley](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@driley](https://pdfjs.community/u/driley)\
**Post date:** [July 21, 2021, 10:35pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/3 "2021-07-21T22:35:45Z")

</div>

Hi psilva,

You can change the appearance of the notes individually by using the [dangerouslySetNoteTransformFunction API](https://pdfjs.express/api/WebViewerInstance.html#dangerouslySetNoteTransformFunction__anchor) Please read about the documentation for that to see if it is the right choice for you. Here is a small snippet to show how you could do that:

```javascript
  instance.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
    const noteId = wrapper.id.split('_')[1];
    const noteAnnot = annotationManager.getAnnotationsById(noteId)[0];
    wrapper.querySelector('.author-and-time .date-and-num-replies .date-and-time').innerHTML = noteAnnot.DateCreated;
  })

```

You still may need to parse the date your liking as we DayJs in our UI code.

Alternatively, if this solution does not work for you, you could fork our open source UI you can find a [guide how to that here](https://pdfjs.express/documentation/ui-customization/advanced-customization). Here you’ll want to edit [this line](https://github.com/PDFTron/webviewer-ui/blob/d51292a626ebc649d6f1e3daba983d8d0ffde2d7/src/components/NoteContent/NoteContent.js#L225) to be the date of the first date created rather than the latestActivityDate.

Cheers,  
Dustin

---

<div class="post-metadata">

**Author:** ![psilva](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@psilva](https://pdfjs.community/u/psilva)\
**Post date:** [July 28, 2021, 5:24pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/4 "2021-07-28T17:24:02Z")

</div>

Hey Dustin,

Thanks for the help. This would work perfectly, but `wrapper.id` seems to always be an empty string, so it doesn’t work. Is this a bug on the definition of dangerouslySetNoteTransformFunction?

I looked at every member and method of `wrapper` but I can’t find another way to get the annotation it wraps from it. This would work if I could grab the annotation from the wrapper somehow.

(I couldn’t find a way to make this work with getAnnotationsList() either).

Lucas

---

<div class="post-metadata">

**Author:** ![driley](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@driley](https://pdfjs.community/u/driley)\
**Post date:** [July 29, 2021, 8:49pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/5 "2021-07-29T20:49:54Z")

</div>

Hi Lucas,

It looks like that we added the note id to the wrapper in a later version of PDF.js Express, it looks like my original approach will work in the current version - 7.3.7. However, after looking more at the problem, I may have given you an unnecessarily over-complicated solution, I believe this code snippet should work in older versions:

```javascript
    instance.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
    wrapper.querySelector('.author-and-time .date-and-num-replies .date-and-time').innerHTML = state.annotation.DateCreated;
  })

```

Let me know if that works for you.

Cheers,  
Dustin

---

<div class="post-metadata">

**Author:** ![psilva](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@psilva](https://pdfjs.community/u/psilva)\
**Post date:** [July 30, 2021, 1:36am UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/6 "2021-07-30T01:36:57Z")

</div>

Dustin,

Worked perfectly. Thanks for the help.

Cheers,

Lucas

---

<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:** [August 4, 2021, 3:48pm UTC](https://pdfjs.community/t/how-to-keep-the-top-level-note-comment-of-an-annotation-with-its-original-date/894/7 "2021-08-04T15:48:53Z")

</div>