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.

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,

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

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

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

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});

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

• disableElements
• enableElements
• isElementDisabled

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.

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});

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

• closeElements
• openElements