Getting warning after adding new custom button in modular header

Technical Support
1

Product: Web viewer

Product Version:11.5.0

Please give a brief summary of your issue:
Getting warning after adding new custom button in modular header.

Please describe your issue and provide steps to reproduce it:
“exposedActions.js:667 Modular component with dataElement menuButton already exists. Existing component’s properties have been updated”
Getting this warning because of “defaultHeader.setItems([…defaultHeader.items, customBackButton]);”.
Is any other way to add custom button in modular UI

const defaultHeader = instance.UI.getModularHeader(‘default-top-header’);
Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

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


It seems like you’re encountering a warning when adding a custom button to the Modular UI header in WebViewer. This warning is likely due to trying to add a component with a dataElement that already exists, causing a conflict.

Some things you can try:

  • Ensure that your custom button’s dataElement is unique to avoid conflicts with existing components.

  • Instead of using defaultHeader.setItems, consider using defaultHeader.update to modify existing components or add new ones.

  • Check if you’re inadvertently trying to add a button that already exists in the header configuration.



Here are some resources that might help you:


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

1 Like
3

Hi Rishumishra,

Thank you for reaching out.

Could you give a bit more details information?

A code snippet showing how you are creating a custom button and a code snippet showing how you are adding it to the header would greatly help us reproduce the issue you are having.

Best Regards,
Mickaël.

1 Like
4

Yes, instead of getModularHeader try using setHeaderItems.

instance.UI.setHeaderItems((header) => {
	const saveActionButton = {
		type: 'actionButton',
		title: "Save",
		dataElement: 'saveButton',
		img: 'icon-save',
		onClick: async () => {
			console.log('Save Action Button Clicked!!!')
		},
	};
	header.push(saveActionButton);
})

Hope this helps!!!

1 Like
5

Hi Arjun,

If you are using Modular UI, setHeaderItems is not the API to use anymore.

Here is a guide showing how to set items in your headers using Modular UI:

Let me know if you have any questions.

Best Regards,
Mickaël.

1 Like