Add custom button to officeEditorToolsHeader

Technical Support WebViewer
,
1

WebViewer Version: 11.8

Could you help me with the functionality of including a custom button in the officeEditorToolsHeader?

I did tried the steps mentioned in the documentation:

  • I’m able to add my custom button to default-top-header but unable to add it to officeEditorToolsHeader.

I’m providing my code for reference :

Custom button :

  const customButton = new instance.UI.Components.CustomButton({
    dataElement: 'customButton',
    className: 'custom-button-class',
    title: 'tStrikethrough',
    img: 'assets/strikeout.svg',
    style: {
      backgroundColor: '#F1F3F5', 
      width: '32px',
      height: '32px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: '4px',
      cursor: 'pointer'
    }} );

Working :

  const headerGroup = instance.UI.getModularHeader('default-top-header');
  headerGroup.setItems([...headerGroup.getItems(), customButton]);

Not working:

  const textEditingGroup = instance.UI.getModularHeader('officeEditorToolsHeader');
  textEditingGroup.setItems([...textEditingGroup.getItems(), customButton]);
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 trying to add a custom button to the officeEditorToolsHeader in Apryse WebViewer. Although you’ve successfully added a button to the default-top-header, the same approach doesn’t work for the officeEditorToolsHeader. This issue may arise due to the way headers are initialized or managed in different contexts within the WebViewer.

Some things you can try:

  • Ensure that the officeEditorToolsHeader is properly initialized before attempting to add items to it. This might involve waiting for a specific event or condition in your application.

  • Verify if the officeEditorToolsHeader is available in the context where you’re trying to access it. It might only be initialized when certain conditions are met, such as opening an Office document.

  • Check for any errors or warnings in the console that might indicate issues with the header initialization or access permissions.

  • Ensure that you are using the correct method and parameters for adding items to the officeEditorToolsHeader. It might have specific requirements compared to the default-top-header.



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.

3

This is the warning i’m getting in my console:

There is no header with dataElement officeEditorToolsHeader

4

Hi Sakthi,

Thank you for reaching out.

I was able to reproduce your issue. In the modular UI config, this header is registered as the component "tools-header". You can see that using the UI.exportModularComponents API.

However, even if you retrieve this header, it seems that adding an item is not working for me.
I have reached out internally to know more about this and will let you know when I have an update.

Best Regards,
Mickaël.

5

Hi Sakthi,

Thank you for your patience.

When using the API UI.exportModularComponents, you can see that you have the component "tools-header" which contains 3 items, all of which are RibbonGroupedItem.

Since we want to add the custom button in the tools-header, we are trying to add the item in one of those RibbonGroupedItem, the active one is officeEditorHomeGroupedItems

So we can simply add your custom item to this RibbonGroupedItem and it will show at then end of the ribbon, if you want to add it to a specific place, you’ll have to insert it at the right index of the table.

const instance = window.WebViewer.getInstance()
const {
    UI,
    Core
} = instance;
const {
    Actions,
    documentViewer,
    Annotations,
    annotationManager,
    AnnotationManager,
    PDFNet,
    Tools
} = Core
const customButton = new instance.UI.Components.CustomButton({
    dataElement: 'customButton',
    className: 'custom-button-class',
    title: 'tStrikethrough',
    img: 'assets/strikeout.svg',
    style: {
        backgroundColor: '#F1F3F5',
        width: '32px',
        height: '32px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: '4px',
        cursor: 'pointer'
    }
});

const homeItems = instance.UI.getGroupedItems("officeEditorHomeGroupedItems")
homeItems.setItems([...homeItems.items, customButton])

Let me know if everything is working for you!

Best Regards,
Mickaël.