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.
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");
}