Creating Annotations via JavaScript API?

Discussions about DocuVieware integration in GdPicture.NET.
Post Reply
User avatar
Posts: 4
Joined: Wed Jan 25, 2017 8:35 pm

Creating Annotations via JavaScript API?

Post by JocPihl » Wed Mar 29, 2017 11:25 am


I'd like to programatically via JavaScript API add annotations. In my example I have created a new panel with my own functionality, I'm entering a value in a textbox and then an annotation should be created with the value, for example a Sticky Note wtih the value from the textbox.

Now to my questions:

1. Creating it programtically through JavaScript... Is there a handle I can use after creation? If I change the value in my panel textbox, I want the annotation to be updated accordingly. How can I do that? I need to use the changed annotation event in the JavaScript API to do some things, would be great to have handle to work with. When I think about it... I save the annotations as base64 strings in the database, next time the PDF is opened it checks the database and loads the annotations, do they have GUID there too? Can the GUID be set as an ID of the annotation div element?

2. At the moment I'm halfway, if I enter a value in the textbox, I can trigger a event to start creating an annotation. But I need to click somwhere on the PDF page for the annotation to appear. Can it be created directly?

3. Coordinates? I want the annotation to appear in top left corner of the PDF page, how can I do that?

4. Annotation with text in them, would it be possible to edit the text in the annotation, like in WPF examples? Just click and edit withhout the huge dialog box?

Looking att the SDK examples for WPF projects and I can see all annotation has a GUID, I tried to see if the annotations in the frontend had GUID's but I don't think so?

I'm trying to create a workflow with as few steps as possible for the user.
Jocke Pihlström
Alcom System AB

Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Creating Annotations via JavaScript API?

Post by Cedric » Tue Apr 04, 2017 1:10 pm


1. There is a JavaScript event called RegisterOnAnnotationAdded that is triggered when a user add an annotation, the same kind of event is available when an annotation is edited or when it is deleted too. But you can't set "an ID of the annotation div element" because there is no such thing, annotations are drawings on a canvas, not div. By subscribing to the RegisterOnAnnotationSelectedStateChanged event you can retrieve the annotation ID and the select state of the annotation if that helps.

2. See 3.

3. I would do this using a custom action instead of the JS API. This way you would be able to automatically create the annotation the way you want at the location you want without the user interaction.

4. No because, technically speaking, text is just another property like any other and as I said in 1., annotations on the documents are not regular div but a dynamic drawing on the HTML5 canvas, it's not that easy to interactively make it editable. I'm going to add this request to the wishlist though, just in case.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests