I am working on attaching a Topaz (signature pad) device to my WebViewer instance.
When a user clicks “New Signature” or clicks on a signature field, the “Create New Signature” modal opens.
I want to be able to attach the appropriate event(s) that open that modal so that I can attach my Topaz device to the “ink-signature-canvas” canvas and enable my Topaz device.
I also want to be able to attach to the “Clear” link and the “Create” button to engage the appropriate actions in the Topaz device.
Per the Topaz device, I have the programmatic access that I need to control the device, but what I am having difficulty attaching to the UI actions that open the “Create New Signature” modal window.
Hello, I’m AiRon, an automated tech support bot While you wait for one of our customer support representatives, I can help you with your question.
To integrate a Topaz signature pad with the WebViewer’s signature modal, you’ll need to attach event listeners to specific UI elements like the “signatureAddButton” and other buttons within the modal. This can be done by accessing the DOM elements directly and adding event listeners.
Some things you can try:
Use WebViewer’s documentViewer to check when the document is ready and ensure the UI elements are accessible.
Access the signatureAddButton using a query selector for the data-element attribute and attach an event listener for the ‘click’ event.
Similarly, use query selectors to find the “Clear” and “Create” buttons within the signature modal and attach event listeners to them.
Within these event handlers, you can insert your logic to interact with the Topaz signature pad.
just to share, I have been making progress on this.
inside of the
WebViewer.Iframe(...).then(async (instance) => {
instance.UI.addEventListener('visibilityChanged', e => {
const { element, isVisible } = e.detail;
const iframeDoc = instance.UI.iframeWindow.document;
if (element === 'signatureModal') {
if (isVisible) {
//the signature modal is now visible, so initialize and attach the Topaz signature pad behavior
} else {
//the signature modal is now hidden, so dettach / from any Topaz signature pad behavior
}
}
});
I am now working to disable the Type & Upload capabilities of the Apryse native signature pad. I also need to disable the ink color & Text style footer options, so that the only supported method is the Topaz signature pad.
Lastly, I am finding that the “Clear” link and “Create” button are requiring some additional work. When I sign using the Topaz signature pad, I see the content in the canvas, but the “Create” button does not. It’s possible that the Create button is looking for something internally stateful to tell, like detecting a mouse down even or some user interaction with the canvas via the mouse to enable the Create button action.
Apryse support - any suggestions or input here would be helpful.
I will post any updates as I make progress.
-Brian
So I think I have reached a blocker and I could use some help on this.
I am now skeptical if I can use the Apryse native Signature modal or if I need to implement my own custom modal.
Within the WebViewer native “SignatureModal”, specifically the “Ink Signature”.
It appears that the Topaz signature pad I am working with does NOT trigger the “Mouse” or “Touch” events. The Apryse native Signature modal appears to be driven by mouse / touch events from the element in the DOM in order to hold the canvas path.
Within the Signature Modal, is there any way I can change the native / default behavior of the Create button?
Within the Signature Modal, is there any way I can change the native / default behavior of the Create button?
Unfortunately, that button is missing a data element which makes it difficult to override the behavior with our APIs. You can consider querying for that button when the signature modal is visible and then change the behavior that way.
if (isVisible) {
//the signature modal is now visible, so initialize and attach the Topaz signature pad behavior
}
I have been able to handle the enable/disable behavior of the “Clear” and “Create” buttons.
Attaching ‘click’ handlers to those DOM elements allow me to force enable these buttons.
However, there’s still an odd behavior around when I click the ‘Create’ button and what the native Signature modal wants to do.
I am thinking at this point I need to wire up a custom modal.
However, I am running into an issue using the Signature Tool’s importSignatures method.
Can someone help me understand how I would “import” a saved signature?
Basically what I’m thinking is if a Topaz device is detected, I wire up a custom modal with my own custom canvas, clear button, and create button. This way I have complete control over the coding of this modal behavior. When the user clicks Create, I can get the signature data from the Topaz device, but now I need to add that to the list of saved signatures within the WebViewer’s signatures list. I am running into issues trying to do that, working with the base64 image/jpeg string that I have, compared to the annotation that seems to be expected.
I have looked through the documentation and the showcases, and I am struggling to find an example.
Can someone help provide me with an example of how I would create a saved signature in the WebViewer from a base64 image string?
thanks @darian.chen
for the importSignatures method, that [base64Image] value. Does that need to be just the base64 of the image, or does that need to also include the `data & image/jpeg prefixes?
once the signature is imported, if I wanted to use that signature immediately, should I see that signature in the list of saved signatures? should I be able to use that signature?
currently I am doing the following:
var signatureTool = documentViewer.getTool('AnnotationCreateSignature') as any;
if (!_.isNil(signatureTool)) {
/* Get base64String */
var response = await sign.GetSignatureImage();
if (response != null) {
response = "data:image/jpeg;base64," + response;
signatureTool.importSignatures(response);
var signatures = signatureTool.getSavedSignatures();
signatureTool.setSignature(response);
await signatureTool.showPreview();
}
}
I don’t think I need the "data:image/jpeg;base64," string infront of my base64 image data.
What I am seeing is
var signatures = signatureTool.getSavedSignatures(); is returning 0 records
then calling await signatureTool.showPreview(); is throwing an exception. I believe that showPreview is calling getPreview which expects an annotation, but the signatureTool doesn’t think an annotation has been loaded or has a height of 0, which is invalid.
Is there a way that I can import signature and immediately use it programmatically?
Any thoughts on this? I don’t mean to bug you, but this is the last step in completing my development work for my client. I can also submit a support ticket if that would be more appropriate.
I will look at the file upload process for how to upload and immediately use a signature, because essentially that is what I am trying to do, only I am capturing the image as a base64 string from the canvas through the Topaz device.
What is essential here is that I can import the signature and immediately load it into the signature tool for use in the document
Apologies for the delay, I was trying to figure out the cause of this error. It’s because your signatures variable is undefined currently. You need to add an await to importSignatures.
