Create a custom secondary top toolbar
This sample shows how to add a permanently visible secondary top toolbar with custom content to DsPdfViewer. The secondary toolbar in the sample allows users to quickly open one of the application-defined PDFs. The currently open document name is highlighted in the custom toolbar.
app.js
index.html
styles.css
var React, viewer;
window.onload = function(){
viewer = new DsPdfViewer("#viewer", {
workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: false
});
viewer.addDefaultPanels();
const toolbarLayout = viewer.toolbarLayout;
toolbarLayout.viewer.mobile = toolbarLayout.viewer.default = ["$navigation", "$zoom"];
React = viewer.getType("React");
// Register custom second toolbar for key "custom-toolbar-key":
viewer.options.secondToolbar = {
render: function(toolbarKey) {
if(toolbarKey === "custom-toolbar-key") {
return [
createOpenPdfButton("realestate-lease.pdf"),
createOpenPdfButton("newsletter.pdf"),
createOpenPdfButton("wetlands.pdf")
];
} else {
return null;
}
}
};
// Show custom second toolbar:
viewer.showSecondToolbar("custom-toolbar-key");
viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/realestate-lease.pdf");
}
function createOpenPdfButton(pdfName) {
const pdfUrl = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/" + pdfName;
const disabled = viewer.fileName === pdfName ? true : false;
return React.createElement("button", { className: "gc-btn gc-btn--accent",
disabled, style: { padding: "0 10px 0 10px" },
onClick: disabled ? null : () => { viewer.open(pdfUrl); },
title: "Open " + pdfName }, pdfName);
}
function createLabel(labelText){
return React.createElement("label", { style: {color: "white"} }, labelText);
}