# Custom annotation

**URL:** <https://pdfjs.community/t/custom-annotation/1538>\
**Category:** Technical Support\
**Created:** [April 3, 2022, 7:22am UTC](https://pdfjs.community/t/custom-annotation/1538 "2022-04-03T07:22:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhiramsa3](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Abhiramsa3](https://pdfjs.community/u/Abhiramsa3)\
**Post date:** [April 3, 2022, 7:22am UTC](https://pdfjs.community/t/custom-annotation/1538/1 "2022-04-03T07:22:04Z")

</div>

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

**PDF.js Express Version**  
8.x.x.x

**Detailed description of issue**  
Am working on custom annotation, onclick of button need to get popup with input fields

**Expected behaviour**  
on click of the custom annotation button i need one popup with input field, below that some text fields  
**Does your issue happen with every document, or just one?**  
Yes  
**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
useEffect(() =\> {  
WebViewer(  
{  
path: ‘/webviewer/lib’,

```
        }, viewer.current).then(async instance => {

        const {Core} = instance;

        //Initially load Document
        instance.UI.loadDocument(myBase64String);
        //to load Annotations
        Core.documentViewer.addEventListener('documentLoaded', async () => {
            const xfdfString = localStorage.getItem("Annotations");
            instance.Core.annotationManager.importAnnotations(xfdfString);
        });
                    // For Pop Up
        instance.UI.contextMenuPopup.update([
                           {
                type: 'actionButton',
                label: 'Annotate',
                tooltip: 'Annotate',
                onClick: () => {
                    callAnnotations(instance);
                }
            }
        ]);
    }) //End of WebView
}, []);

```

function callAnnotations(instance) {  
console.log(“In callAnnotations”)  
//For Form Fields  
instance.UI.contextMenuPopup.update([  
{  
label: ‘Annotate’,  
tooltip: ‘Annotate’,  
onClick: () =\> {  
handleShow(instance);  
}  
}  
]);

---

<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:** [April 3, 2022, 7:22am UTC](https://pdfjs.community/t/custom-annotation/1538/3 "2022-04-03T07:22:09Z")

</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:
- [Real-time collaboration client](https://pdfjs.express/documentation/collaboration/realtime-collaboration-client.8)
- [Creating custom annotations for your viewer - Adding the annotation to a document](https://pdfjs.express/documentation/annotation/custom-annotations.8#adding-the-annotation-to-a-document)
- [Annotation permissions - Custom permissions](https://pdfjs.express/documentation/annotation/annotation-permissions#custom-permissions)

APIs:
- [Core.Annotations.DatePickerWidgetAnnotation - new DatePickerWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#DatePickerWidgetAnnotation__anchor)
- [Core.Annotations.CustomAnnotation - getContents()](https://pdfjs.express/api/Core.Annotations.CustomAnnotation.html#getContents__anchor)
- [WebViewerInstance - new WebViewerInstance()](https://pdfjs.express/api/7.0/WebViewerInstance.html#WebViewerInstance__anchor)

Forums:
- [Getting error while creating custom annotaion](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/1)
- ["TriangleCreateTool is not a constructor" error while create custom annotation](https://pdfjs.community/t/trianglecreatetool-is-not-a-constructor-error-while-create-custom-annotation/231/1)
- [Use custom annotation tool icon on custom annotation in notes panel](https://pdfjs.community/t/use-custom-annotation-tool-icon-on-custom-annotation-in-notes-panel/402/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:** [April 5, 2022, 7:35pm UTC](https://pdfjs.community/t/custom-annotation/1538/4 "2022-04-05T19:35:35Z")

</div>

Hi there,

Unfortunately I do not understand what you are trying to accomplish. When you say “on click of the custom annotation button”, what do you mean? What is the “custom annotation button” ? What is the use case?

Thanks,  
Logan