How to use html annotation

Technical Support WebViewer
, , , ,
1

WebViewer Version: 8.7.0

Do you have an issue with a specific file(s)? no
Can you reproduce using one of our samples or online demos? no, no entry for html annotations
Are you using the WebViewer server? no
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? no
Is your issue related to annotations? yes

Please give a brief summary of your issue:
(Think of this as an email subject)

want to create an annotation template using html code

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I’m working in a project where i add some text fields which contain some custom attributes that relates the annotation with an email, at the moment i set text and background color as a way to identify them between type of fields and owner but i want to make them look prettier and i saw this html annotation that supposedly allows you to include stuff like images and css classes to customize the appearance of the annotation so I tried searching for some examples but i couldn’t find anything that gives a code template i can use to make some experiments on my own, so my request is for a code template and a summary of what can and can’t be done with this kind of annotation at the moment, also this is a minor stuff but i can’t disable rotate control of some annotations and i would like to ask if that’s a bug or i’m doing something wrong, i already used NoRotate and DisableRotationControl but they didn’t work

2

Hello, I’m Ron, an automated tech support bot :robot:

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

Guides:APIs:Forums:

3

Hi Renkoha,

Thank you for reaching WebViewer forum support.

If you want to uniquely identify the ownership of the text fields, you can use custom authors for this:

If you would like to customize appearances within the annotation, you can read about adding custom appearances here: PDFTron Systems Inc. | Documentation

Some other guides that may be relevant:

If you want to customize default annotations, you can simply use our APIs:

Note that WebViewer is inside the iframe so you will need to access the iframe first before manually updating the HTML properties: PDFTron Systems Inc. | Documentation

For disabling the rotation controls, you will need to access the annotation directly:
https://www.pdftron.com/api/web/Core.Annotations.Annotation.html#disableRotationControl

Could you send me a screenshot and code snippet of how you are trying to disable it? Some annotations have different API for disabling: PDFTron Systems Inc. | Documentation

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

4

Hi Kevin, thank you for answering, i create a freetext annotation using the function set annotation attributes i have my ways to getting the values and i set the no rotate attribute when creating the annotation which is added with annotationManager and then redraw the whole thing but it doesn’t work, for all other attributes it works no problem, this is the only feature that doesn’t work

setAnnotationAttributesGuest(page, x, y, width, height, subject, contents, index){
            const freeText = new this.annotations.FreeTextAnnotation();
            freeText.X = x;
            freeText.Y = y;
            freeText.PageNumber = page;
            freeText.Width = width;
            freeText.Height = height;
            freeText.Subject = subject;
            freeText.TextAlign = 'center';
            freeText.StrokeThickness = 0;
            freeText.IsHoverable = true;
            freeText.TextVerticalAlign = 'center';
            freeText.TextColor = new this.annotations.Color(0, 0, 0);
            freeText.NoMove = true;
            freeText.NoDelete = true;
            freeText.NoResize = true;
            freeText.NoRotate = true;
            freeText.RotationControlEnabled = false;
            freeText.setContents(contents);
            freeText.setPadding(new this.annotations.Rect(0, 0, 0, 0))
            freeText.FontSize = '14pt';
            freeText.setCustomData('type', subject)
            freeText.setCustomData('originalIndex', String(index))
            freeText.setCustomData('status', 'replaced')

            return freeText
        }

let annotation = that.setAnnotationAttributesGuest(
                                    annotationList[i].PageNumber,
                                    annotationList[i].X,
                                    annotationList[i].Y,
                                    annotationList[i].Width,
                                    annotationList[i].Height,
                                    that.dragAction,
                                    annotationContents,
                                    annotationList[i].getCustomData('originalIndex')
                                )

                                that.annotationManager.deleteAnnotation(annotationList[i])

                                that.annotationManager.addAnnotation(annotation, {autoFocus: false});
                                that.annotationManager.redrawAnnotation(annotation);

i tried this other way after the annotation is added to the document

let aux = [...that.annotationManager.getAnnotationsList()]

                if (that.dragAction === 'Signature') {
                    aux[aux.length -1].Subject = 'Signature'
                    aux[aux.length -1].X = dropPosition.x - (that.getPreviewDimensions('Signature', 'width')/2)
                    aux[aux.length -1].Y = dropPosition.y - (that.getPreviewDimensions('Signature', 'height')/2)
                    aux[aux.length -1].Width = that.getPreviewDimensions('Signature', 'width')
                    aux[aux.length -1].Height = that.getPreviewDimensions('Signature', 'height')
                    aux[aux.length -1].selectionModel = that.annotations.FreeTextSelectionModel;
                    that.annotationManager.deselectAllAnnotations()
                    that.annotationManager.selectAnnotation(aux[aux.length -1])
                }

this is something i use for a very specific case and i thought of adding the annotation first and then set the no rotate attribute but it didn’t work either, now the kind of annotation I handle are, freeText (for full name and other plain text fields), Stamp( typed and image signatures ) and FreeHand (draw signatures)

5

Hi Renkoha,

Thank you for your response.

For FreeText Annotation, I followed this guide PDFTron Systems Inc. | Documentation to create a freetext then added disableRotationControl method to the annotation and it works as expected:

image
image1464×574 175 KB

Notice that the rotation control is now not visible

I was able to do the same thing for stamp Annotations:

image
image1239×347 88.8 KB

and freehand annotations: (instantiation: PDFTron Systems Inc. | Documentation)

image
image1395×394 111 KB

Let me know how that works for you.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

6

the methods works as expected, however i wonder why the property didn’t considering the description in the docs i though that would be enough, but anyhow is working now, thank you for that.

Now there is something else i’d like your help with, i made some other question at other thread but i stop receiving answers on that one could you check it and give me some advice on my latest questions on that thread please? Help with UI customization - #17 by Andrew_Yip

7

Hi Renkoha,

Glad that worked out for you.

As for the other thread, you can leave another message to bump, or if urgent, you can submit a ticket here:
PDFTron Systems Inc. | Form and it would be helpful if you can link to the original post for reference.

Thank you in advance.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

8

Hi Kevin, one question, in the other thread i was told that the default value for the input field in the signature modal is being taken from current user, and i wanted to change that value to something else so i changed it to name and surname and it worked but i can’t have and username like that, so i was wondering if there is some other way to change that default string and another thing i noticed is that even if i empty that value of that field with javascript the default value is still there in the html and create button is not disabled so if I press create it will create a signature with default string so what do you recommend to handle that part?

9

Hi Renkoha,

If you would like to customize your signature tool to use a set string, you can import it as an annotation to use as a preset: PDFTron Systems Inc. | Documentation

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

10

Hi Kevin, thank you for answering but this is not what i meant, let me explain with more detail,

this is the modal i display at the moment

Screenshot (3)
Screenshot (3)826×546 24.1 KB

in this modal i set the name and surname default string by using this code

that.annotationManager.setCurrentUser('Name and Surname');

because is what i was told would work and it does, however this is not ideal for me since the user name is not going to be called that way, so my question is, how can i set the name and surname default string for the type signature input other than setting an user?

I tried with query selector and then value = ‘name and surname’ but the problem is that it works for the first time only and if they click on create then the signature created will be name and surname despite of what i set with query selector, i also tried with set attribute but to no avail, same result as the other method.

Now if using set user method doesn’t conflict with the license then i suppose i can leave it like this but i wanted to be sure if there is no other method for this operation

11

Hi Kevin, how are you? i hope everything is going well for you, when you have time please give me an answer about my latest question in this thread , thank you for your time and have a good day

12

Hi Renkoha,

From our documentation, this is currently not a feature. But is there a reason why you want to change the placeholder from their username?
We do support initials as of 8.9 as an alternative:

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

13

well as i mentioned my concern comes from the user which i suppose is tied to the license, but if the user doesn’t have anything to do with the license then no problem, although i don’t get why is it attach to the user, i mean is a bit weird for me that the place holder for the signature comes from an user instead of a method for the signature tool

14

Hi Renkoha,

Apologies for the lack of options but unfortunately, the closest thing we have is being able to modify the signature field input placeholder text:
https://www.pdftron.com/api/web/Core.Tools.SignatureCreateTool.html#.setTextHandler__anchorBest

Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.