Controlling the Sidebar via API

PSPDFKit for Web comes with contextual sidebars for page thumbnails, document outlines, bookmarks, and annotations. Each sidebar is available via its corresponding toolbar button:


These are built-in toolbar items that are grouped in a dropdownGroup called sidebar. You can read more about built-in items and how to customize the toolbar in the Customizing the Toolbar guide.

The sidebar can also be controlled by setting ViewState#sidebarMode with the Instance#setViewState API. For a list of all available modes, please refer to PSPDFKit.SidebarMode.

We can, for example, activate the annotations sidebar in the following way:

instance.setViewState(viewState =>
  viewState.set("sidebarMode", PSPDFKit.SidebarMode.ANNOTATIONS)
instance.setViewState(function(viewState) {
  return viewState.set("sidebarMode", PSPDFKit.SidebarMode.ANNOTATIONS);

To reset the sidebarMode and hide the sidebar, we can simply set its value to null:

instance.setViewState(viewState => (
  viewState.set("sidebarMode", null);
instance.setViewState(function(viewState) {
  return viewState.set("sidebarMode", null);