How do I add a button to the header in Docx Editor?

[rlaks5757]

WebViewer Version: 11.4.0

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Does the issue only happen on certain browsers?
Is your issue related to a front-end framework?
Is your issue related to annotations?

Please give a brief summary of your issue:
(Think of this as an email subject)
How do I add a button to the header in Docx Editor?

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

 const undoButton = new instance.UI.Components.PresetButton({
            buttonType: "undoButton",
          });

          const redoButton = new instance.UI.Components.PresetButton({
            buttonType: "redoButton",
          });

          const defaultHeader = getModularHeader("default-top-header");

          defaultHeader.setItems([
            ...defaultHeader.getItems(),
            undoButton,
            redoButton,
          ]);

As shown in the above code, I want to add Undo & Redo Button to the header, but PDF File Viewer generates those buttons well. But when I load Docx files, the above buttons are not generated, do I have to use other methods in Docx Viewer?

Please provide a link to a minimal sample where the issue is reproducible:

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

To add buttons like “Undo” and “Redo” to the header in the Docx Editor using WebViewer, especially in version 11.4.0, you need to ensure that the buttons are compatible with the context of the document type being edited. The Docx Editor may have a different configuration or set of available buttons, thus requiring a slightly different approach.

Some things you can try:

• Ensure that the buttons you are trying to add are compatible with the Docx Editor’s configuration. They might require different identifiers or properties when used in a Docx context.


• Check if the Docx Editor has specific APIs or preset buttons designed for text editing tasks, such as undo or redo.


• Review the configuration settings for the Docx Editor to ensure that any custom buttons are being appropriately initialized and added to the UI.


• Consult the documentation to verify the correct usage of APIs for adding buttons to the header in the Docx Editor.

Here are some resources that might help you:

• DOCX Editor Overview - Provides a general overview of the Docx Editor capabilities.


• DOCX Editor Initial Edit Mode - Learn how to configure the initial edit mode and other options in the Docx Editor.


• Customizing Viewer Toolbar / Header - Guidance on adding custom buttons to headers, which might provide insight into required configurations.


• UI Import and Export Modular Components - Information on using modular components, which can be relevant when customizing the UI.

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

[luke.dam]

Hello rlaks5757,

Thank you for contacting WebViewer Forums.

The code you provided seems to be working fine. I am able to see the buttons appended to the main header. You can also wrap it inside a viewerLoaded listener to ensure changes get applied:

UI.addEventListener('viewerLoaded', async () => {
        const undoButton = new instance.UI.Components.PresetButton({
          buttonType: 'undoButton',
        });

        const redoButton = new instance.UI.Components.PresetButton({
          buttonType: 'redoButton',
        });

        const defaultHeader = UI.getModularHeader('default-top-header');

        defaultHeader.setItems([
          ...defaultHeader.getItems(),
          undoButton,
          redoButton,
        ]);
      });

Regards,
Luke

[rlaks5757]

Thank you for your copperation.

This problem has been solved.

May I know how to add a button to the Ribbon Item submenu?

For example, I would like to add the Signature button under SHAPES.

Regards,

[luke.dam]

Hello rlaks5757,

Thank you for your reply.

Glad the initial issue has been resolved.

Regarding adding a button to the grouped items in the toolbar group, you can retrieve the group and call setItems(). For example:

const shapes = UI.getGroupedItems('shapesGroupedItems');
shapes.setItems([...shapes.items]);

For more information, please see this documentation here: Modular UI Containers | Apryse documentation

Regards,
Luke

[rlaks5757]

Thank you for your cooperation.

I used it as you explained, but it doesn’t work with an error message returned like the capture in the attachment.

However, as shown in the attached capture below, it is confirmed that the type is defined.

Is it because I’m using the demo license or is it because I’m using the 11.4.0 version?

Regards.

[luke.dam]

Hello rlaks5757,

That is correct, this API was introduced in 11.5. I would recommend updating to this version or the latest and seeing if the suggested code implementation works for you. Our change-log covering the API change can be found here: Version 11.5.0 Changelog (2025-05-28) | Apryse documentation

If you are unable to update, you will need to customize it prior to the 11.5 update which requires you to fetch the default header and iterating through the array to find the grouped items.

Regards.
Luke