# How to set value of "trn-custom-data" for creating highlight annotations?

**URL:** <https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [May 20, 2022, 8:13am UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695 "2022-05-20T08:13:51Z")\
**Posts on this page:** 6\
**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:** [May 20, 2022, 8:13am UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/1 "2022-05-20T08:13:51Z")

</div>

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

**PDF.js Express Version**  
8.4.0

**Detailed description of issue**  
I want to set value for “trn-custom-data” when creating highlight annotations.

**Expected behaviour**  
I want to get this value of “trn-custom-data” later for performing some action.

**Does your issue happen with every document, or just one?**  
Yes. Need for all document annotation.

**Code snippet**

```javascript
documentViewer.addEventListener('documentLoaded', () => {
      const highlight = new Annotations.TextHighlightAnnotation();
     
      // Want to set value here
      highlight.trn-custom-data = "Some example text";

      highlight.PageNumber = 4;
      highlight.X = 405;
      highlight.Y = 165;
      highlight.Width = 275;
      highlight.Height = 25;
      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
      // you might get the quads from text selection, a server calculation, etc
      highlight.Quads = [
        { x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
        { x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
      ];

      annotationManager.addAnnotation(highlight);
      annotationManager.drawAnnotations(highlight.PageNumber);
    })

```

---

<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:** [May 20, 2022, 8:13am UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/3 "2022-05-20T08:13:58Z")

</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 free text annotations in PDF.js Express - Other examples](https://pdfjs.express/documentation/annotation/create-annotation-free-text#other-examples)
- [Create rectangle annotations in PDF.js Express - Other examples](https://pdfjs.express/documentation/annotation/create-annotation-rectangle#other-examples)

APIs:
- [Core.Annotations.CustomAnnotation - new CustomAnnotation(type [, initializer])](https://pdfjs.express/api/Core.Annotations.CustomAnnotation.html#CustomAnnotation__anchor)
- [Core.Annotations.TextHighlightAnnotation - new TextHighlightAnnotation( [initializer])](https://pdfjs.express/api/Core.Annotations.TextHighlightAnnotation.html#TextHighlightAnnotation__anchor)
- [TextHighlightAnnotation - new TextHighlightAnnotation()](https://pdfjs.express/api/TextHighlightAnnotation.html#TextHighlightAnnotation__anchor)

Forums:
- [GetCustomData don’t give me my custom data that i saved in my db?](https://pdfjs.community/t/getcustomdata-dont-give-me-my-custom-data-that-i-saved-in-my-db/1287/1)
- [How hide annotation when toolbar group changed](https://pdfjs.community/t/how-hide-annotation-when-toolbar-group-changed/1574/1)
- [How to create custom annotation comment with id?](https://pdfjs.community/t/how-to-create-custom-annotation-comment-with-id/1240/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:** [May 20, 2022, 2:07pm UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/4 "2022-05-20T14:07:47Z")

</div>

Hey there!

You can use 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 to do that.

```javascript
highlight.setCustomData("key", "value")
highlight.getCustomData("key") // returns "value"

```

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:** [May 23, 2022, 6:08am UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/5 "2022-05-23T06:08:50Z")

</div>

When I create TextHiglightAnnotation by programmatically then it make difference from the default pdfjs highlight tool.

Here is my code.

```javascript
const highlight = new Annotations.TextHighlightAnnotation();
        highlight.Author = annot.Author;
        highlight.Hidden = false;
        highlight.Quads = annot.Quads;
        highlight.StrokeColor = new Annotations.Color(255, 176, 176, 1);
        highlight.PageNumber = annot.getPageNumber();
        highlight.Locked = false;
        highlight.setCustomData("trn-custom-data", "Test Data");
        highlight.Subject = 'Highlight';
        annotManager.addAnnotation(highlight, true);
        annotManager.drawAnnotations(1);

```

Output:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/aedfe5eb76855fad5c53c6ac073d46c3588da355.png)

---

<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:** [May 24, 2022, 7:45pm UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/6 "2022-05-24T19:45:00Z")

</div>

Hi there,

That is not related to this ticket - please open a new issue.

Thanks!  
Logan

---

<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:** [May 24, 2022, 7:45pm UTC](https://pdfjs.community/t/how-to-set-value-of-trn-custom-data-for-creating-highlight-annotations/1695/7 "2022-05-24T19:45:06Z")

</div>