Toolbar

The jadice web viewer has two toolbars:

• the top toolbar with the menu, the page/zoom/rotation actions, the export button, an optional configurable label and the jadice logo, and
• the right toolbar, a vertical bar with the toggle buttons for the sidebar panels (search, annotations, bookmarks, attachments, redaction, ZIP content, documents).

Which elements are shown is determined by three things, in this order:

1. the license — actions for features that are not licensed are never rendered,
2. the application.yml — the properties described below, and
3. the JavaScript API / Angular integration — for changes at runtime, see JavaScript API and Getting Started.

tip

The jadice web viewer is a ready-made product. The toolbar can be adjusted, but it is not meant to be composed freely. If you need a fully custom toolbar, use the jadice web toolkit, which the viewer is built on.

Configuration via application.yml

All toolbar-related properties are part of the client configuration and are placed in webtoolkit.clientConfiguration.internalCustomProperties. See Client-Configuration for the general structure and Customization for how to supply your own application.yml.

webtoolkit:
  clientConfiguration:
    internalCustomProperties:
      textInput: "PAGE_NUMBER_INPUT"
      hideFileOpenInMenu: false
      annotationSaveActionEnabled: false
      rightToolbarConfig: '{"advancedSearch": true, "bookmarkPanel": true, "attachmentPanel": false}'

Page number display (textInput)

Controls the element between the "previous page" and "next page" buttons in the top toolbar.

Value	Result
PAGE_NUMBER_INPUT	Editable input field; the user can jump to a page by typing its number
PAGE_NUMBER	Read-only text, e.g. 3 / 12
not set	No page number element is rendered at all

Any other value behaves like "not set".

Open file entry in the menu (hideFileOpenInMenu)

Set to true to remove the "Open file" entry from the toolbar menu. This is typically used together with a deployment in which documents are supplied by the integration only. See also Client-Configuration.

Save annotations button (annotationSaveActionEnabled)

Set to true to add the "Save annotations" button to the top toolbar. The button is only rendered if annotations are licensed as well. Note that saving annotations additionally requires a backend that can actually persist them — see Annotations.

Right toolbar (rightToolbarConfig)

The right toolbar is configured with a JSON string that switches individual panel buttons on or off. Keys that are not listed keep their default value.

webtoolkit:
  clientConfiguration:
    internalCustomProperties:
      rightToolbarConfig: '{"advancedSearch": true, "bookmarkPanel": true, "attachmentPanel": false}'

Key	Default	Panel
advancedSearch	true	Search panel
bookmarkPanel	true	Bookmarks panel
attachmentPanel	true	Document attachments panel
annotationPanel	false	Annotations panel
documentSelectionPanel	false	Panel to switch between multiple documents
redactionPanel	false	Redaction panel
zip	false	ZIP content panel

caution

annotationPanel, redactionPanel, documentSelectionPanel and zip are additionally switched at runtime — by the license (annotations, redaction methods) and by what is currently loaded (a ZIP archive enables the ZIP panel, a document collection enables the document selection panel). A value configured here for one of these four keys can therefore be overridden while the viewer is running. Only advancedSearch, bookmarkPanel and attachmentPanel are controlled by the configuration alone.

Which panel is opened initially is configured separately with initialSidebarActionAfterOpen, see Client-Configuration.

Configurable label in the top toolbar

The top toolbar can display a short, freely configurable text — for example a personnel number, a case number or a session identifier. It is rendered as a small pill (a "badge") in the tail of the top toolbar, between the auxiliary actions and the jadice logo.

The text is configured through the badgeText property of the toolbar configuration:

window.viewerApi.clientApi.mergeToolbarConfig({badgeText: "123ABC456"})

toolbarConfig: ToolbarConfig<Viewer> = {
  ...DefaultToolbar.CONFIG,
  badgeText: "123ABC456"
};

Notes:

• badgeText is a plain string, not a translation key. If the label has to be localised, the integration must supply the already translated text.
• If badgeText is not set, null, undefined or an empty string, no label is rendered at all.
• The label is set dynamically: calling mergeToolbarConfig again with a different badgeText replaces the text, and passing an empty string removes the label.
• The label is rendered on a single line and is not wrapped or truncated. Keep it short so that it does not compete with the toolbar actions for space.

note

There is currently no application.yml property for the label — it can only be set from the JavaScript API or through the toolbarConfig input of the Angular component. There is also no dedicated JavaScript API method beyond mergeToolbarConfig.

Colors of the label

The label uses two CSS custom properties, which are supplied by the active theme:

CSS custom property	Default (light theme)	Default (dark theme)
--jadice-toolbar-badge-background	#66686b	#8D9095
--jadice-toolbar-badge-foreground	#FFFFFF	#FFFFFF

Both can be overridden in your own stylesheet, for example to signal importance through the color or to improve the contrast ratio:

:root {
  --jadice-toolbar-badge-background: #b3000f;
  --jadice-toolbar-badge-foreground: #ffffff;
}

caution

If you override these colors, check the contrast ratio between text and background — the label is plain text and has to remain readable in both the light and the dark theme.

License-dependent toolbar elements

The following elements are not configured in the application.yml at all. They appear only if the corresponding right is present in the license, which the client retrieves from /license/rights:

Element	Required right
Export button and export menu	export — the offered formats follow the licensed types (pdf, pdfa, redactedPdf, tiff, eml, print)
Accessible mode toggle	accessibleView, see Accessible Mode
Compare view toggle	compareView, see Compare View
Annotation panel and save button	annotations
Redaction panel	redaction

Changing the toolbar at runtime

If you embed the viewer, both toolbars can be reconfigured from JavaScript without touching the application.yml. The provided object is merged into the active configuration, so a partial object is enough:

// hide the jadice logo in the top toolbar
window.viewerApi.clientApi.mergeToolbarConfig({logo: null})

// show a configurable label in the top toolbar
window.viewerApi.clientApi.mergeToolbarConfig({badgeText: "123ABC456"})

// switch individual panels of the right toolbar on/off
window.viewerApi.clientApi.configureRightToolbar({bookmarkPanel: false, attachmentPanel: false})

See JavaScript API for the full list of methods.

Changing the toolbar in an Angular integration

When the viewer is used as an Angular component, the whole toolbar configuration can be replaced through the toolbarConfig input of <jadice-web-viewer>:

import {ToolbarConfig, ToolbarUtils, Alignment} from "@levigo/jadice-common-components";
import {DefaultActions, DefaultToolbar, Viewer} from "@levigo/webtoolkit-ng-client";

toolbarConfig: ToolbarConfig<Viewer> = {
  ...DefaultToolbar.CONFIG,
  logo: {display: false},
  actions: [
    ToolbarUtils.makeButton(DefaultActions.PAGE_PREV),
    ToolbarUtils.makeButton(DefaultActions.PAGE_NEXT),
    ToolbarUtils.SEPARATOR,
    ToolbarUtils.makeButton(DefaultActions.ZOOM_IN),
    ToolbarUtils.makeButton(DefaultActions.ZOOM_OUT)
  ]
};

<jadice-web-viewer [source]="source" [toolbarConfig]="toolbarConfig"></jadice-web-viewer>

The most important building blocks are:

Element	Purpose
ToolbarUtils.makeButton(action)	A single action button
ToolbarUtils.makeSelection(group)	A button with a drop-down of alternatives, e.g. the zoom modes
ToolbarUtils.makeText(action)	Read-only text, e.g. the page number
ToolbarUtils.makeInput(action)	The editable page number input
ToolbarUtils.SEPARATOR	A visual separator
logo	{display: false} or {display: true, url: "..."}
badgeText	A short configurable label, see above
menu	The menu button and its entries
auxiliaryActions	Actions rendered on the opposite end of the toolbar

DefaultToolbar.CONFIG contains the shipped default configuration and is a good starting point — spread it and override only what you need. See Getting Started for the setup of the Angular integration.