How to rotate the 'Sign Here' in SignatureWidgetAnnotation

[kim]

WebViewer Version: 8.12.0

Do you have an issue with a specific file(s)? - No
Can you reproduce using one of our samples or online demos? - No
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:
Given that the Annotations are programmatically added in the Document;
by either calling new Annotations.FreeTextAnnotation() or new Annotations.SignatureWidgetAnnotation().

const annot = isSignature 
  ? new Annotations.SignatureWidgetAnnotation(field, options)
  : new Annotations.FreeTextAnnotation()

And uploaded document has a rotation value of 90 or 270 degrees;
the annotation’s height, and width are reversed.
We were able to handle the FreeTextAnnotation since we can easily rotate them, and reverse their height, and width.

const pageIdx = documentViewer.getCurrentPage()
const rotation = documentViewer.getCompleteRotation(pageIdx) * 90
const isPortrait = rotation === 0 || rotation === 180

annot.Height = isPortrait ? DEFAULT_HEIGHT : DEFAULT_WIDTH
annot.Width = isPortrait ? DEFAULT_WIDTH : DEFAULT_HEIGHT
annot.Rotation = rotation

But we couldn’t easily rotate the SignatureWidgetAnnotation.
The ‘Sign Here’ has an incorrect orientation - see attachment1.
We tried manipulating the createSignHereElement, and styling the ‘Sign Here’ element with transform: rotate() but still couldn’t get the desired result.
Would like to request help on how to rotate this to look like the ones in attachment2.

Document:
dummy_270rotated.pdf (38.7 KB)

[ejohnson]

Thank you for posting your question to our forum. We will provide you with an update as soon as possible.

[kkim]

Hi there,

We have the NoRotate property on the annotations that you can use for this use-case:
https://docs.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#NoRotate__anchor

Best regards,
Kevin Kim

[kim]

Hello.

Thank you for the reply.
I tried using the NoRotate property but it still doesn’t work - the same result.
Is there any method that can style or hide the grey ‘Sign Here’ ?

I also tried using the rotation property, and its innerHTML is not aligned with the selection.

annot.rotation = rotation

See attachment.

Thanks in advance.

[kkim]

Hi there,

To customize the signatureWidgetAnnotation’s rotation, you can edit the rotation property
To customize the styling (i.e. background), you can use the getCustomStyles method. The grey ‘sign here’ is due to the read-only affect.

Example usage of the above:

   const signatureStyle = () => {
    return {
      border: "2px solid #008080",
      backgroundColor: "lightblue",
    }
  };

  annotationManager.addEventListener("annotationChanged", (annotations, action) => {
    if (action === "add") {
      annotations.forEach(function (annot) {
        if (annot instanceof Annotations.SignatureWidgetAnnotation) {
          // change the rotation of the widget
          annot.rotation = 90;

          // change the styling of the widget
          Annotations.WidgetAnnotation.getCustomStyles = signatureStyle;

          // make the widget read-only (will show gray 'sign here')
          annot.fieldFlags.set('ReadOnly', true);
        }
      });
    }
  })

Creating a new signature field will show up like this:

Best regards,
Kevin Kim

[kim]

Hello!

Thanks for the reply.
We tried rotating the SignatureWidgetAnnotation, and it works. Thanks!
However, the SelectionModel is kinda off, it seems to be reversed.
This is how we created the SignatureWidgetAnnotation like this:

const pageIdx = documentViewer.getCurrentPage()
const rotation = documentViewer.getCompleteRotation(pageIdx) * 90
const isPortrait = rotation === 0 || rotation === 180

const flags = new Annotations.WidgetFlags()
const fieldManager = annotationManager.getFieldManager()
const field = new Annotations.Forms.Field('test', { flags, type: 'Sig' })
fieldManager.addField(field)
const annot = new Annotations.SignatureWidgetAnnotation(field, {})

annot.rotation = rotation
annot.Height = isPortrait ? DEFAULT_HEIGHT : DEFAULT_WIDTH
annot.Width = isPortrait ? DEFAULT_WIDTH : DEFAULT_HEIGHT
annot.Rotation = rotation

Any idea on how to fix this?
See attachments.

Thank you in advance.

[kkim]

Hi there,

I used the guide here:

Apryse Documentation | Documentation

This generates a signature widget.

I can see that even if I add

    widgetAnnot.rotation = 90

The annotation’s selection box (while in form builder mode) is consistent:

Could you try setting the rotation manually and see if that resolves the issue?
Otherwise, could you please share a minimal runnable sample project for us to reproduce?

Best regards,
Kevin Kim

[kim]

Hello!

Sorry for the delay.
The guide helped resolve the issue, thanks a lot!