What is event that is trigger when signtature annotation clicked, I want to disable the default signature modal and write custom login and need to replace the ‘Sign Here’ with Custome Icons.
Sdk Version: “@pdftron/webviewer”: “^10.4.0”,
Hello @naga,
The event that is triggered when a signature field is clicked is called ‘locationSelected’, you can find the API for it here: Apryse WebViewer Class: SignatureCreateTool
If you would like to disable the signature modal you can do so with the following line of code:
instance.UI.disableElements(['signatureModal']);
If by “Sign Here”, you are referring to the field indicators, you can replace the text with the setFieldIndicatorAPI, found here: Apryse WebViewer Class: SignatureWidgetAnnotation
I do not believe we putting icons in the field indicators, but I can submit a feature request if you would like.
Hope this helps!
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Hi jromanocarlsen,
I hope this message finds you well. I’ve gone through the documentation thoroughly, but unfortunately, I’m encountering an issue with the implementation.
Below is the code I’ve been working on:
documentTemplateSelected(signViewer) {
WebViewer(
{
path: ‘…/…/…/…/assets/lib/pdftron’,
initialDoc: ‘file url’,
licenseKey: ‘licenseKey’,
isReadOnly: true,
disabledElements: [
‘ribbons’,
‘toggleNotesButton’,
‘searchButton’,
‘menuButton’,
‘rubberStampToolGroupButton’,
‘stampToolGroupButton’,
‘fileAttachmentToolGroupButton’,
‘calloutToolGroupButton’,
‘undo’,
‘redo’,
‘eraserToolButton’,
‘progressModal’,
‘selectToolButton’,
‘viewControlsButton’,
‘leftPanelButton’,
‘panToolButton’,
‘toolsOverlay’,
‘undoButton’,
‘redoButton’,
‘signatureToolGroupButton’,
‘signatureModal’,
‘markReplaceTextToolButton’
],
},
signViewer.nativeElement
).then((instance) => {
this.wvInstance = instance;
const { documentViewer, Annotations, annotationManager } = instance.Core;
this.documentViewer = documentViewer;
this.annotationManager = annotationManager;
this.annotations = Annotations;
documentViewer.zoomTo(2);
this.coreControlsEvent.emit(instance.UI.LayoutMode.Single);
const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
signatureTool.addEventListener('locationSelected', (annotations, action) => {
instance.UI.closeElements(['signatureModal']);
});
documentViewer.addEventListener('locationSelected', (annotations, action) => {
console.log('locationSelected', annotations, action);
});
documentViewer.addEventListener('documentLoaded', async () => {
await annotationManager.importAnnotations(xfdfcode);
const annotationList = annotationManager.getAnnotationsList();
let signedCount = 0;
annotationList.forEach(async annotation => {
if (annotation.Subject === 'Stamp') {
// create a form field
const field = new Annotations.Forms.Field("", {
type: 'Sig',
});
// create a widget annotation
const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
appearance: '_DEFAULT',
appearances: {
_DEFAULT: {
Normal: {
data:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
offset: {
x: 100,
y: 100,
},
},
},
},
});
// set position and size
widgetAnnot.PageNumber = annotation.PageNumber;
widgetAnnot.X = annotation.X;
widgetAnnot.Y = annotation.Y;
widgetAnnot.Width = annotation.Width;
widgetAnnot.Height = annotation.Height;
widgetAnnot.Author = annotation.Author;
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function () {
const div = document.createElement('div');
div.style.width = '100%';
div.style.height = '100%';
div.style.cursor = 'pointer';
div.id = annotation.Id;
const inlineSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="176" height="25" viewBox="0 0 176 25">
<g id="Group_2142" data-name="Group 2142" transform="translate(-1100 -4191)">
<rect id="Rectangle_1230" data-name="Rectangle 1230" width="176" height="25" rx="4" transform="translate(1100 4191)" fill="#6d96ca"/>
<text id="Sign_Here" data-name="Sign Here" transform="translate(1188 4208)" fill="#fcfcfc" font-size="13" font-family="Arial-BoldMT, Arial" font-weight="700" letter-spacing="0.05em"><tspan x="-32" y="0">Sign Here</tspan></text>
</g>
</svg>
`;
div.innerHTML = inlineSvg;
div.onclick = (event) => {
const selectedAnnotation = annotationManager.getAnnotationsList().find(ann => ann.Id === this.Id);
if (selectedAnnotation) {
selectedAnnotation.isFullSignature()
annotationManager.redrawAnnotation(selectedAnnotation);
}
};
return div;
}
//add the form field and widget annotation
annotationManager.getFieldManager().addField(field);
annotationManager.addAnnotation(widgetAnnot);
annotationManager.deleteAnnotation(annotation, { force: true });
annotationManager.redrawAnnotation(widgetAnnot);
this.annotationIds.push({ Id: widgetAnnot.Id, signed: false, pageNumber: widgetAnnot.PageNumber, signedCount: signedCount++ });
}
});
});
});
}
and I am trying to to convert the stamp annotation to signature. But not working.
Links that I refred
For field indicators:
Hello @naga,
Would you be able to elaborate more on what you mean by “not working”?
To diagnose your issue further, please provide the following:
- Source input file
- JavaScript console output showing all warnings and errors.
- Network panel showing all failed network traffic
- Can you reproduce the issue using our samples (especially on our site)?
- Does the issue only occur in certain browsers and/or devices? If so what are the details?
- Are you using WebViewer Server? If so what version?
- Screenshots indicating the issue you are experiencing on the viewer, highlighting expected vs. actual behavior.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Hi,
I appreciate your prompt response. To provide you with more details:
Source input file: Please use any PDF file or PDF URL for testing.
JavaScript console output: No errors or warnings are reported.
Network panel: All network traffic appears to be successful; no failed cases are observed.
Reproduction on your site: I request you to demonstrate the process on your site.
Issue details: The problem lies in the events not being triggered when clicking on the signature form field.
Browser/Device specifics: The issue is not browser or device-specific; it seems to be a generalized problem.
WebViewer version: “@pdftron/webviewer”: “^10.4.0”
Sample Code: I have already shared the relevant sample code. I would like to replace the signature form field with dateURI upon clicking the signature form field.
Looking forward to your guidance on resolving this matter.
Thanks,
Naga
Hello naga,
Thank you for the provided information.
If I understand correctly you currently have 2 issues: Converting stamps to signature form fields, and properly capturing the event when clicking on a signature form field. If I am misunderstanding, feel free to clarify.
Regarding your first issue, it looks like there’s a weird behavior since you are modifying the annotationList while looping through it in a forEach block.
As for the second issue, taking a look at the code you provided it looks like the second ‘locationSelected’ event listener is attached to the documentViewer instead of the signatureTool.
Please try the attached code snippet.
testingFragment.js (3.8 KB)
This should display in the console when selecting an signature annotation:
Let me know if this works for you.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
I tried both, docuview and signtool, you can see it the code that I provided.
const signatureTool = documentViewer.getTool(‘AnnotationCreateSignature’);
signatureTool.addEventListener(‘locationSelected’, (annotations, action) => {
instance.UI.closeElements([‘signatureModal’]);
});
I need to solutions to replace the stamp annotation with signature field. Please provide me solutions to replace the stamp annotation with signature annotation.
Thanks,
Naga
https://community.apryse.com/uploads/short-url/ils3VqgmsZKYdFcNKxkqzycfDjE.js
this not working for me
Hello naga,
I apologize for the confusion, I tried to upload the changes I made as a file.
Please see the modified code snippet below, this should replace all stamps (besides signatures) with signature form fields and widgets.
let me know if this works for you:
instance.UI.disableElements(['signatureModal']);
const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
signatureTool.addEventListener('locationSelected', (pageCoordinates, signatureWidget) => {
console.log('locationSelected', pageCoordinates, signatureWidget);
});
documentViewer.addEventListener('annotationsLoaded', async () => {
const annotationList = annotationManager.getAnnotationsList();
let signedCount = 0;
let count = 0;
let annotsToDelete = [];
annotationList.forEach(annotation => {
console.log('annotationList', annotationList);
if (annotation.ToolName === 'AnnotationCreateRubberStamp' && annotation.Subject !== 'Signature') { // Replace with desired filter
// create a form field
const field = new Annotations.Forms.Field("field-name" + count, {
type: 'Sig',
});
count++;
// create a widget annotation
const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
appearance: '_DEFAULT',
appearances: {
_DEFAULT: {
Normal: {
data:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
offset: {
x: 100,
y: 100,
},
},
},
},
});
// set position and size
widgetAnnot.PageNumber = annotation.PageNumber;
widgetAnnot.X = annotation.X;
widgetAnnot.Y = annotation.Y;
widgetAnnot.Width = annotation.Width;
widgetAnnot.Height = annotation.Height;
widgetAnnot.Author = annotation.Author;
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function () {
const div = document.createElement('div');
div.style.width = '100%';
div.style.height = '100%';
div.style.cursor = 'pointer';
div.id = annotation.Id;
const inlineSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="176" height="25" viewBox="0 0 176 25">
<g id="Group_2142" data-name="Group 2142" transform="translate(-1100 -4191)">
<rect id="Rectangle_1230" data-name="Rectangle 1230" width="176" height="25" rx="4" transform="translate(1100 4191)" fill="#6d96ca"/>
<text id="Sign_Here" data-name="Sign Here" transform="translate(1188 4208)" fill="#fcfcfc" font-size="13" font-family="Arial-BoldMT, Arial" font-weight="700" letter-spacing="0.05em"><tspan x="-32" y="0">Sign Here</tspan></text>
</g>
</svg>
`;
div.innerHTML = inlineSvg;
div.onclick = (event) => {
const selectedAnnotation = annotationManager.getAnnotationsList().find(ann => ann.Id === this.Id);
if (selectedAnnotation) {
annotationManager.redrawAnnotation(selectedAnnotation);
}
};
return div;
}
//add the form field and widget annotation
annotationManager.getFieldManager().addField(field);
annotationManager.addAnnotation(widgetAnnot);
annotationManager.drawAnnotationsFromList([widgetAnnot]);
annotationManager.redrawAnnotation(widgetAnnot);
// this.annotationIds.push({ Id: widgetAnnot.Id, signed: false, pageNumber: widgetAnnot.PageNumber, signedCount: signedCount++ });
annotsToDelete.push(annotation);
}
});
console.log('annotationList', annotationList);
annotsToDelete.forEach(annotation => {
annotationManager.deleteAnnotation(annotation, { force: true });
});
});
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
I tried still it’s not triggering the event, is there any to get on a call to close this issue.
Hello naga,
To avoid confusion regarding the status of the ticket, I reached out in the support portal. We can continue our discussion there.
Let me know if you have any issues with seeing our response.