Create a custom sidebar panel

This sample shows how to add a new sidebar panel to the viewer with custom content. In the sample the custom panel displays the message "Hello currentUserName". The babel compiler was used to compile JSX code into JS code.

window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", }; let viewer, React, customPanelHandle; function createPanelContentElement(userName) { // Define function component: function PanelContentComponent(props) { return React.createElement('div', { style: { margin: '20px' } }, 'Hello ', props.sayHelloToWho); } // Create react element: return React.createElement(PanelContentComponent, { sayHelloToWho: userName }); } 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" }, /*#__PURE__*/React.createElement("path", { d: "M12 2c-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9-4.029-9-9-9zM12 8c0-0.553 0.447-1 1-1s1 0.447 1 1v3c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.553 0 1-0.448 1-1h1v-2l1 1-1 1c0 3 0 3-2 4 0-1-1-1-3-1v-2l-2-2v-2c-1 0-1 1-1 1l-2.213-2.212c1.167-2.247 3.512-3.788 6.213-3.788 0.688 0 1.353 0.104 1.981 0.29-0.086 0.895-0.579 1.71-1.481 1.71-1 0-1.5 1-1.5 2s0 3 0 3 1 0 1-3zM12 18c-3.859 0-7-3.14-7-7 0-0.776 0.133-1.521 0.367-2.219l4.633 4.633v1.586c0 0.552 0.447 1 1 1 0.779 0 1.651 0 2.006 0.091 0.038 0.301 0.209 0.582 0.468 0.742 0.168 0.104 0.36 0.16 0.552 0.16 0.145 0 0.289-0.032 0.422-0.098 2.348-1.174 2.539-1.644 2.552-4.479l0.708-0.708c0.391-0.391 0.391-1.023 0-1.414l-1-1c-0.192-0.192-0.448-0.294-0.708-0.294-0.129 0-0.259 0.025-0.383 0.076-0.373 0.155-0.617 0.52-0.617 0.924v-2c0-0.689-0.351-1.298-0.883-1.658 0.421-0.411 0.712-0.995 0.826-1.685 2.392 1.115 4.057 3.535 4.057 6.343 0 3.86-3.141 7-7 7z" })); } viewer = new DsPdfViewer("#viewer", options); React = viewer.getType('React'); customPanelHandle = viewer.createPanel(createPanelContentElement(viewer.currentUserName || 'World'), null, 'CustomPanel', { icon: { type: 'svg', content: createSvgIconElement() }, label: 'Custom panel', description: 'Custom panel title', visible: false, enabled: false } ); // Add 'CustomPanel' to panels layout: viewer.layoutPanels(['*', 'CustomPanel']); viewer.onAfterOpen.register(function() { // Enable 'CustomPanel' when needed: viewer.updatePanel(customPanelHandle, { visible: true, enabled: true }); // Open custom panel: viewer.leftSidebar.menu.panels.open(customPanelHandle.id); }); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-custom-sidebar.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Custom sidebar</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%; }