[Bug] call to instance.UI.setHeaderItems not taking effect

[buonzz]

WebViewer version
11.0.0

The current behavior
it displays the default buttons in the header

The expected behavior
After following this tutorial https://docs.apryse.com/web/guides/customizing-header/#adding-a-custom-save-button
I should see the new button

Steps to reproduce

<script>
    WebViewer.WebComponent({
      path: '/assets/pdf-form-widget/WebViewer/lib', // path to the Apryse 'lib' folder on your server
      licenseKey: 'YOUR_API_KEY', // sign up to get a key at https://dev.apryse.com
      initialDoc: 'your-sample-pdf-here.pdf',
      fullAPI: true
    }, document.getElementById('viewer'))
    .then(instance => {
      const { documentViewer, annotationManager, Annotations } = instance.Core

      instance.UI.setHeaderItems(header => {
            header.push({
              type: 'actionButton',
              img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
              onClick: () => {
                // save the annotations
              }
            });
          });
      

      instance.UI.setZoomLevel('120%');

    });
</script>

[buonzz]

after a few hours of crying and praying to God, I managed to find the relevant section in the documentation.
https://docs.apryse.com/web/get-started/migrating-to-v11-modular-ui/#changing-header-items

As it turns out, the guide in https://docs.apryse.com/web/guides/customizing-header/#adding-a-custom-save-button doesn't apply to v11, which uses Modular UI.

In order to add button to the UI, you would need to follow this guide: https://docs.apryse.com/web/get-started/migrating-to-v11-modular-ui/#changing-header-items

const header = instance.UI.getModularHeader('default-top-header');
// replace all items in the default top header with a new button
header.setItems([{
  type: 'customButton',
  dataElement: 'testButton',
  label: 'My Button',
  title: 'My Button',
  onClick: () => {
    console.log('Button clicked');
  }
}]);

[bollain]

Hi @buonzz,

This is correct - we will update our docs to make it clear that the first guide you linked makes it clear those APIs only work in the legacy UI. Going forward all customizations should be made using the modular UI.