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,
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.
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.