Invisible TextBoxAnnotation when created dinamically

[w.bonazzoli]

WebViewer Version: 10.10.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes,

Create-text-field | Apryse Documentation

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? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
(Think of this as an email subject)
Dynamically generated textboxes appear to be invisible

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
In Angular 18, this code seems to generate invisible TextWidgetAnnotations

  addTexbox(annotationManager: Core.AnnotationManager, height: number, width: number, left: number, top: number, page: number) {
    const field = new Annotations.Forms.Field("textBoxField ", {
      type: 'Tx',
      flags: new Annotations.WidgetFlags({
        Multiline: true,
        Required: true
      })
    });
    const textBoxWidget = new Annotations.TextWidgetAnnotation(field, {});
    textBoxWidget.setHeight(height);
    textBoxWidget.setWidth(width);
    textBoxWidget.setX(left);
    textBoxWidget.setY(top);
    textBoxWidget.setPageNumber(page);
    
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(textBoxWidget);
    annotationManager.drawAnnotationsFromList([textBoxWidget]);
  }

Cannot see border, cannot see background, cursor does not become pointer on hover.
Using

annotationManager.selectAnnotation(annot)

I can select the annotation
I can resize or drag and drop it to another position (still I can see through the textbox while moving it)
If I already know where the annotation is, I can select it by doubleClick, even if the cursor is not a pointer

I would like to get the same result as clicking on “Forms > Text Field” on your demo site

Apryse WebViewer Demo: JavaScript PDF Viewer Demo

While it helps, dynamically generated checkbox fields and signature fields doesn’t have the same problem

If I set the textbox background color, I can see it.

textBoxWidget.backgroundColor = new Annotations.Color(20, 160, 224)

But I’d like to see the textbox without setting a background color, like the textboxes generated by “Forms > Text Field”

Please provide a link to a minimal sample where the issue is reproducible:
It seems I’m not able to write a working stackblitz and my actual code is under NDA
Can you solve the problem without me having to deploy on purpose a mock project?
I attach an image in which you can see the dynamically generated textbox selected, and the textbox generated via “Forms > Text Field” visible near the “LUOGO DI LAVORO” label.

P.S. Incorrectly marked as spam

[jromanocarlsen]

Hello @w.bonazzoli,

Thanks for posting on our forum.

A couple things from the code snippet provided:

• drawAnnotationsFromList is as an async function. You will need to put await in front of it. You can find its API doc here: https://docs.apryse.com/api/web/Core.AnnotationManager.html#drawAnnotationsFromList
• Try the declaration and setting of widget flag separate. You can find our sample for adding a text widget as reference: https://docs.apryse.com/documentation/web/guides/forms/working-with-fields/

You can also try the following code snippet:

  const addTexbox = async function (annotationManager, height, width, left, top, page) {
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.MULTILINE, true);
    flags.set(WidgetFlags.REQUIRED, true);

    const field = new Annotations.Forms.Field("textBoxField ", {
      type: 'Tx',
      flags: flags,
    });
    const textBoxWidget = new Annotations.TextWidgetAnnotation(field, {});
    textBoxWidget.setHeight(height);
    textBoxWidget.setWidth(width);
    textBoxWidget.setX(left);
    textBoxWidget.setY(top);
    textBoxWidget.setPageNumber(page);
    
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(textBoxWidget);
    await annotationManager.drawAnnotationsFromList([textBoxWidget]);
  }
  const annot = addTexbox(annotationManager, 20, 50, 100, 100, 1);
  annotationManager.selectAnnotation(annot);

Using this in our angular sample project, I was able to generate a TextWidgetAnnotation as expected:

If this does not work for you, please provide the following:

1. Source input ​PDF used for testing
2. JavaScript console output showing all warnings and errors.
3. Network panel showing all failed network traffic
4. Can you reproduce the issue using our ​angular sample project? You can find it here: [GitHub - ApryseSDK/webviewer-angular-sample: Sample to demonstrate integrating WebViewer into Angular] (GitHub - ApryseSDK/webviewer-angular-sample: Sample to demonstrate integrating WebViewer into Angular)
5. Can you reproduce the issue using the latest release of WebViewer (Version 10.12.0).

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

[w.bonazzoli]

Hello
Sorry, I hadn’t seen that the drawAnnotationsFromList function was async
Neither the documentation link I sent nor your documentation link await that function

I cloned that project and was able to reproduce the problem
Both the textbox generated onDocumentLoaded and the one generated when the button is clicked are invisible
Below is the link to the modified github project and to a video in which we show the problem with the console open
No errors appear in the console when the textbox is created invisible, errors appear when you click on the textbox but I don’t think they are relevant errors

Video: Unique Download Link | WeTransfer
Github: GitHub - claudiob25/TestApryseWebviewer

[jromanocarlsen]

Hello @w.bonazzoli,

Thank you for the demo project and video. I was able to reproduce the behavior your were describing.

This is actually expected behavior; there is no border/background on TextWidgetAnnotations by default. Background color is actually set by default for our TextWidgetAnnotations created through the UI:

As well, in your sample project, the “Required” flag is set to false (unlike the first code snippet sent), so the red border that usually appears with required WidgetAnnotations does not appear as well.

That said, from my testing with the sample project provided, the widgets created programatically can have text entered into the widget. As well, my cursor is also updated:

(Let me know if you cannot view the video)

If you would like to visibly see the boundaries of your TextWidgetAnnotation, we recommend setting the background color or the border when creating the widget.

Let me know if you need further clarification!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.