Navigate Signed and Unsigned Signature Fields in Our PDF Viewer Sidebar

PSPDFKit for Web’s user interface (UI) features a sidebar with different available views.

The signatures sidebar shows a list of digital signatures and unsigned signature form fields, which are grouped by signing status. Clicking any of these items from the list will navigate to the corresponding document page and bring it into view.

Sidebar.

The signatures sidebar can be shown by the user by selecting the signatures sidebar icon from the sidebar dropdown in the toolbar.

It can also be shown programmatically with the API:

instance.setViewState(viewState => viewState.set("sidebarMode", PSPDFKit.SidebarMode.SIGNATURES);

Additionally, it’s possible to make it appear when the document is loaded by setting PSPDFKit.Configuration#initialViewState:

PSPDFKit.load({
  initialViewState: new PSPDFKit.ViewState({
    sidebarMode: PSPDFKit.SidebarMode.SIGNATURES
  })
});

The sidebar, which appears to the left of the viewport by default, can also be configured to appear to the right. To do this, you only need to set PSPDFKit.ViewState#sidebarPlacement:

instance.setViewState(viewState => (
  viewState.set("sidebarPlacement", PSPDFKit.SidebarPlacement.END)
));

The image below shows how sidebar looks once placed using the previous snippet.

Sidebar placed on the right side.

If you don’t want users to be able to open the signatures sidebar, you can hide the corresponding toolbar button by filtering it out from the default toolbar items:

PSPDFKit.setToolbarItems(items => items.filter(item => item.type !== "sidebar-signatures"));

The signatures list view toolbar button can be styled with CSS using the public CSS class .PSPDFKit-Toolbar-Button-Sidebar-Signatures.

The actual signatures list sidebar can also be customized with CSS by modifying the corresponding public CSS classes:

  • .PSPDFKit-Sidebar-Signatures

  • .PSPDFKit-Sidebar-Signatures-Header

  • .PSPDFKit-Sidebar-Signatures-Container

  • .PSPDFKit-Sidebar-Signatures-Item

  • .PSPDFKit-Sidebar-Signatures-Icon

  • .PSPDFKit-Icon-UnsignedSignatureField

  • .PSPDFKit-Icon-SignatureValid

  • .PSPDFKit-Icon-SignatureWarning

  • .PSPDFKit-Icon-SignatureError

  • .PSPDFKit-Sidebar-Signatures-Title