Add signature and hide the signature tool from toolbar

This sample shows how to hide the graphical signature tool from toolbar once the signature has been added.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer; function applyNormalViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], mobile: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'edit-sign-tool', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function applySignedViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'doc-title', '$split', 'about'], mobile: ['save', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function onSignatureAdded(resultDetails) { viewer.scrollAnnotationIntoView(resultDetails.pageIndex, resultDetails.annotation); applySignedViewerLayout(); } var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: false, penColor: '#000000', penWidth: 2, hideSaveSignature: true, canvasSize: { width: 480, height: 168 }, autoResizeCanvas: false, destinationScale: 0.33, afterAdd: function (result) { onSignatureAdded(result); return true; }, location: { x: 87, y: 116 }, title: 'Landlord/Lessor', }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.mouseMode = 1; viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.zoom = 70; applyNormalViewerLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-add-signature-from-toolbar.pdf"); }
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer; function applyNormalViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], mobile: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'edit-sign-tool', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function applySignedViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'doc-title', '$split', 'about'], mobile: ['save', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function onSignatureAdded(resultDetails) { viewer.scrollAnnotationIntoView(resultDetails.pageIndex, resultDetails.annotation); applySignedViewerLayout(); } var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: false, penColor: '#000000', penWidth: 2, hideSaveSignature: true, canvasSize: { width: 480, height: 168 }, autoResizeCanvas: false, destinationScale: 0.33, afterAdd: function (result) { onSignatureAdded(result); return true; }, location: { x: 87, y: 116 }, title: 'Landlord/Lessor', }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.mouseMode = 1; viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.zoom = 70; applyNormalViewerLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-add-signature-from-toolbar.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Add Signature from Toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }