Section:

Hiding/Showing DOM elements in WebViewer UI

Hiding DOM elements is an essential aspect of a customizable UI. WebViewer UI supports hiding/showing elements both initially and dynamically.

Finding data-element attribute values

To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

Apryse Docs Image

we can find that it has a data-element value of leftPanel. Now we can use that value to hide/show it.

You can view the full list of data elements in our open source UI repo.

Constructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

JavaScript

1const wvElement = document.getElementById('viewer');
2WebViewer({
3  path: 'lib',
4  disabledElements: [
5    'leftPanel',
6    'viewControlsButton',
7    'viewControlsOverlay'
8  ]
9}, wvElement);

Enabling/disabling elements programmatically

To enable/disable the DOM elements, you can use the following APIs:

Example

1const wvElement = document.getElementById('viewer');
2WebViewer({ ...options }, wvElement).then(() => {
3  // remove left panel and left panel button from the DOM
4  instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
5  // re-enable left panel and left panel button from the DOM
6  instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
7});

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM. To change visibility, you can refer to the sample below.

Opening/closing elements programmatically

You can toggle panels, overlays, popups, and modals.

Example

1const wvElement = document.getElementById('viewer');
2WebViewer({ ...options }, wvElement).then(() => {
3  // opens (shows) text popup and annotation popup in the UI
4  instance.UI.openElements([ 'menuOverlay', 'leftPanel' ]);
5  // closes (hides) text popup and left panel in the UI
6  instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
7});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales