Use a custom sidebar to lock form fields

This sample shows how to add a custom sidebar to the viewer with a custom UI that provides control over which users can fill a form, and for which users the form fields will be locked.

window.onload = function () { //DsPdfViewer.LicenseKey = "***key***"; var viewer; var React; var ReactDOM; var initialAccessTable = null; function applyAccess(selectedUserName, access) { console.log('Apply access for ' + selectedUserName + ': ' + access + ', current user name:' + viewer.currentUserName); if (selectedUserName === viewer.currentUserName) { viewer.findAnnotation(20, // 20 - AnnotationTypeCode.WIDGET { findField: 'annotationType', pageNumberConstraint: 1, findAll: true }).then(function (annotationsDataArr) { viewer.updateAnnotations(0, annotationsDataArr.map(function (data) { if (access === 'LockAll') { data.annotation.locked = true; } else if (access === 'LockFirstName' && data.annotation.fieldName === "FirstName") { data.annotation.locked = true; } else if (access === 'LockLastName' && data.annotation.fieldName === "LastName") { data.annotation.locked = true; } else { data.annotation.locked = false; } return data.annotation; })); }); } } function getInitialAccessTable(users) { if (!initialAccessTable) { initialAccessTable = {}; for (var i = 0; i < users.length; i++) { initialAccessTable[users[i]] = 'UnlockAll'; } } return initialAccessTable; } function FieldsLockerPanel(props) { var viewer = props.viewer; var availableUsers = ['James', 'Jame', 'Lisa', 'John']; var stateArr0 = React.useState(viewer.currentUserName || 'Anonymous'), currentUserName = stateArr0[0], setCurrentUserName = stateArr0[1]; if (availableUsers.indexOf(currentUserName) === -1) { availableUsers.splice(0, 0, currentUserName); } var stateArr1 = React.useState(availableUsers[0] || ''), selectedUserName = stateArr1[0], setSelectedUserName = stateArr1[1]; var stateArr2 = React.useState(getInitialAccessTable(availableUsers)); var accessTable = stateArr2[0], setAccessTable = stateArr2[1]; var userOpts = []; for (var i = 0; i < availableUsers.length; i++) { var curUserName = availableUsers[i]; userOpts.push( /*#__PURE__*/React.createElement('option', { selected: !!(selectedUserName === curUserName), value: curUserName }, curUserName)); } var currentAccess = accessTable[selectedUserName]; console.log("render, currentAccess:" + currentAccess + ", for selectedUserName:" + selectedUserName); return /*#__PURE__*/React.createElement('div', { style: { margin: '30px 30px 30px 30px' }, class: 'fields-locker-panel-outer' }, /*#__PURE__*/React.createElement('p', { class: 'gc-heading__text' }, 'Current user:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/ React.createElement('input', { class: 'current-user-input gc-input', value: currentUserName, onChange: function (e) { var newCurrentUserName = e.target.value || ""; //if (newCurrentUserName) viewer.currentUserName = newCurrentUserName; setCurrentUserName(newCurrentUserName); //if (newCurrentUserName) applyAccess(newCurrentUserName, accessTable[newCurrentUserName] || "UnlockAll"); } }, null)), /*#__PURE__*/React.createElement('p', { class: 'gc-heading__text' }, 'Select user:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/ React.createElement('select', { style: { width: '100%' }, class: 'gc-combo select-user-combo', onChange: function (e) { var newUserName = e.target.value; console.log("Set selected user name: " + newUserName); setSelectedUserName(newUserName); } }, userOpts), /*#__PURE__*/React.createElement('label', { style: { margin: '10px 10px 10px 10px' } }, 'Access: ', currentAccess)), /*#__PURE__*/React.createElement('p', { class: 'gc-heading__text' }, 'Choose access type:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('select', { style: { width: '100%' }, value: currentAccess, class: 'gc-combo access-combo', onChange: function (e) { var newAccessTable = JSON.parse(JSON.stringify(accessTable)); newAccessTable[selectedUserName] = e.target.value; initialAccessTable = newAccessTable; setAccessTable(newAccessTable); applyAccess(selectedUserName, e.target.value); } }, /*#__PURE__*/React.createElement('option', { selected: currentAccess === 'UnlockAll', value: 'UnlockAll' }, 'Unlock all fields'), /*#__PURE__*/React.createElement('option', { selected: currentAccess === 'LockFirstName', value: 'LockFirstName' }, 'Lock FirstName'), /*#__PURE__*/React.createElement('option', { selected: currentAccess === 'LockLastName', value: 'LockLastName' }, 'Lock LastName'), /*#__PURE__*/React.createElement('option', { selected: currentAccess === 'LockAll', value: 'LockAll' }, 'Lock all fields') )), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('button', { style: { width: '100%', textAlign: 'center' }, class: 'gc-btn', onClick: function (e) { viewer.layoutMode = 2; } }, /*#__PURE__*/React.createElement('span', { class: 'gc-btn__text' }, 'Open Form Editor')))); } function createFieldsLockerPanel(viewer) { // Create react element: return React.createElement(FieldsLockerPanel, { viewer: viewer }); } function createSvgIconElement() { return React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '24', height: '24', viewBox: '0 0 24 24', fill: '#ffffff' }, React.createElement('path', { d: 'M10 13.32q-0.352-0.273-3.184-2.48t-4.316-3.34l7.5-5.82 7.5 5.82q-1.484 1.133-4.297 3.32t-3.203 2.5zM10 15.469l6.133-4.805 1.367 1.055-7.5 5.82-7.5-5.82 1.367-1.055z' })); } viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: { apiUrl: window.top.SUPPORTAPI_URL, token: window.top.SUPPORTAPI_TOKEN, webSocketUrl: false }, language: "en" }); React = viewer.getType('React'); ReactDOM = viewer.getType('ReactDOM'); viewer.addFormEditorPanel(); accessPanelHandle = viewer.createPanel(createFieldsLockerPanel(viewer), null, 'AccessLevel', { icon: { type: 'svg', content: createSvgIconElement() }, label: 'Access level', description: 'Access level administration', visible: false, enabled: false }); // Add 'AccessLevel' panel to panels layout: viewer.layoutPanels(['AccessLevel', 'FormEditor']); viewer.onAfterOpen.register(() => { // Enable 'AccessLevel' panel on document open: viewer.updatePanel(accessPanelHandle, { visible: true, enabled: true }); // Open and pin panel: viewer.leftSidebar.menu.panels.open(accessPanelHandle.id); viewer.leftSidebar.menu.panels.pin(accessPanelHandle.id); }); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-lock-fields.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Locking fields</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/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }