Remove dividers in header

[marrome]

Hello,

I disabled a few elements in the header and now I have two unnecessary dividers left. I would like to remove these also, but can’t get it to work. I already tried the solutions provided in the existing topics. Maybe the solutions of these older topics don’t work in the newer WebViewer verions?

I already found the data-element name of the dividers: “divider-0.1” and “divider-0.3”. How can i disable them?

I’m using Webviewer 11.9.0, because the newest Version caused some bugs in our implementation.

EDIT: I tried the provided solution from the docs, like this:

const groupedLeft = instance.UI.getGroupedItems(‘groupedLeftHeaderButtons’);
const withoutDividers = groupedLeft.items.filter(item => item.type !== ‘divider’);
groupedLeft.setItems(withoutDividers);

But here I get an error on “type” saying “Property type does not exist on type object”.

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

Removing dividers from the header in WebViewer can be managed using the Modular UI API. The approach involves filtering the components you wish to remove, including dividers, and then setting the items in the container appropriately. You can filter out the dividers by their type or dataElement and apply changes to the items array in the header.

Some things you can try:

• Identify the container where the dividers are located, such as groupedLeftHeaderButtons.


• Use the setItems method to filter out the dividers by checking their type or dataElement.


• Ensure that you are using the correct version of the WebViewer that supports the Modular UI API.

Here are some resources that might help you:

• Containers Modular Header Documentation - Learn how to manage headers and their components effectively.


• Hiding/Showing DOM Elements in WebViewer UI - Understand how to use data-elements to manage visibility.


• Customizing Viewer Toolbar / Header - Get insights on customizing headers and toolbars, including removing or hiding elements.


• Hiding Elements with the Modular UI - Learn about the flexibility of the Modular UI for managing UI components.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[marrome]

Update: Giving item any type fixed the problem, so this solution worked:

const groupedLeft = instance.UI.getGroupedItems(‘groupedLeftHeaderButtons’);
const withoutDividers = groupedLeft.items.filter((item: any) => item.type !== ‘divider’);
groupedLeft.setItems(withoutDividers);

Topic can be closed.