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.

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***"; 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"); }
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/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%; }