UI Documentation |
Scroll |
The WebViewer can be customized to meet individual needs by hiding buttons, groups, or entire tabs in the ribbon on the user interface. All relevant UI settings are listed in the settings.js file located in the WebViewer installation directory (www/defaults). To hide individual buttons, groups, or tabs, the relevant settings are:
Setting |
Description |
---|---|
_functions |
Hide individual buttons |
_RibbonGroups |
Hide entire groups |
_Tabs |
Hide entire tabs |
These settings must be copied to the overrides.js file located in the WebViewer installation directory (www/custom). To hide individual elements such as buttons, groups, or tabs, the ID of the element is required.
You can obtain the ID via the browser's DevTools:
▪Open the WebViewer in your browser.
▪Press [F12] to open the DevTools.
▪Open the Elements panel by clicking on the icon or use the shortcut [Ctrl] + [ñ] + [C].
▪Click on the UI element that you want to hide (e.g., the "Turntable" button).
▪The selected element is highlighted in the browser's DevTools in the Elements section.
▪You can find the ID of the selected UI element in the highlighted area.
The ID you are looking for in this example is "ID_RIBBON_TURNTABLE". This needs to be added to the _functions variable to hide the "Turntable" button.
In the overrides.js file, the entry for this example would look like this:
// remove Attribute Turnable var _functions = { "ID RIBBON TURNABLE": fales, }; |
This example can be used to hide any button, group, or tab in the WebViewer. Additional sample configurations can be found in the WebViewer installation directory (www/examples/feature-bundle-examples/ribbon-files/).
Note: It is important to define these settings in the overrides.js file, as described above, and not in the settings.js file, because each time the WebViewer is updated, these settings will be overwritten with the default settings. You should also make sure that the browser cache is cleared after a change, so that the changes are visible.