Cant get WebViewer header insertBefore and insertAfter to work

WebViewer Version: 8.5.0

I am trying to move around some header options. For example, I want to move the searchButton (currently on the right side of the header) to after the panToolButton. I am attempting to use the header UI “.insertAfter” method, but also tried the “.insertBefore”. No matter what I do, all I can do is wind up with either a duplicate panToolButton on the left, or a duplicate searchButton on the right.

THIS yields a second Search button on the right:

// This yields a second search tool button, but it is on the right, not the left after the pan tool)
instance.UI.setHeaderItems(function (header) {   
  header.getHeader('default').get('panToolButton').insertAfter(header.getHeader('default').get('searchButton'));
});

// This does the same thing (two search tool buttons, both on the  right)
instance.UI.setHeaderItems(function (header) {   
  let panToolButton= header.getHeader('default').get('panToolButton');
  header.getHeader('default').get('searchButton').insertAfter(panToolButton);
});


THIS yields a second Pan Tool button on the left:

//This yields a second pan tool button, both on the  left (instead of a second search tool on the left)
instance.UI.setHeaderItems(function (header) {   
 header.getHeader('default').get('searchButton').insertAfter(header.getHeader('default').get('panToolButton'));
});

// This does the same thing (two pan tool buttons, both on the  left)
instance.UI.setHeaderItems(function (header) {   
  let searchButton = header.getHeader('default').get('searchButton');
  header.getHeader('default').get('panToolButton').insertAfter(searchButton);
});

And this does nothing at all:

instance.UI.setHeaderItems(function (header) {
    let searchButton = header.getHeader('default').get('searchButton');
    let panToolsButton = header.getHeader('default').get('panToolsButton');
    //header.getHeader('default').delete('searchButton');
    panToolsButton.insertAfter(searchButton);
});

What am I doing wrong?

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello beccanet,

Here is a code snippet that worked for me:

instance.UI.setHeaderItems(function (header) {
header.getHeader('default').get('searchButton').insertAfter(header.getHeader('default').get('panToolButton'));
});

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Thanks for the reply. That isn’t working for me, unfortunately. When I run that code I just get a second Pan tool:

image

Hello beccanet,

Does this snippet work for you?

    instance.UI.setHeaderItems(async function (header) {
      const search = header.getHeader('default').get('searchButton')
      header.getHeader('default').get('panToolButton').insertAfter({
        type: 'actionButton',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - search</title><path class="cls-1" d="M17.69,15.79a8.63,8.63,0,1,0-1.52,1.51l4.42,4.42a.42.42,0,0,0,.57,0l.94-.95a.39.39,0,0,0,0-.56Zm-5.28,1A6.42,6.42,0,1,1,17.19,12,6.43,6.43,0,0,1,12.41,16.8Z"/></svg>',
        onClick: () => {
          instance.UI.openElements(['searchPanel'])
        }
      })
    });

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Yes, that did the trick! Thank you!

However, the original button works as a toggle (click to open, click again to close). The newly-generated button only opens the panel, and then there is no way to close it again.

A little more digging led me to the following solution. Changing your example to use a type of ‘toggleElementButton’ and setting the value for ‘element’ instead of ‘onClick’ duplicates the toggle action of the original search button.

instance.UI.setHeaderItems(async function (header) {
    //const search = header.getHeader('default').get('searchButton')
    header.getHeader('default').delete('searchButton');
    header.getHeader('default').get('panToolButton').insertAfter({
        type: 'toggleElementButton',
        element: 'searchPanel',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - search</title><path class="cls-1" d="M17.69,15.79a8.63,8.63,0,1,0-1.52,1.51l4.42,4.42a.42.42,0,0,0,.57,0l.94-.95a.39.39,0,0,0,0-.56Zm-5.28,1A6.42,6.42,0,1,1,17.19,12,6.43,6.43,0,0,1,12.41,16.8Z"/></svg>',
    })
});

Thanks again for your help!