instance.UI.updateElement not updating "hidden" property

WebViewer Version: 8.5.0

I am attempting to hide more of the default buttons on phones (“small-mobile”), but the following code doesn’t appear to be doing anything to the buttons:

instance.UI.updateElement('panToolButton', {
    hidden: ['small-mobile'],
});
instance.UI.updateElement('viewControlsButton', {
    hidden: ['small-mobile'],
});
instance.UI.updateElement('leftPanelButton', {
    hidden: ['small-mobile'],
});

I’ve also tried setting “className” instead of “hidden”. What is the correct way to add the “hide-in-small-mobile” class to these buttons?

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:

Hi beccanet,

Thank you for contacting WebViewer Support.

It looks like most buttons are taking in ‘mobile’, ‘tablet’, and ‘desktop’ as valid options for the hidden property:

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Per your recommendation I tried using those instead, but it made no difference.

The “small-mobile” is what I am successfully using in other places in my code (when adding new buttons); when I change those working instances to just “mobile” they are no longer hiding as they should.

Oddly enough, other attributes (ex. Title) update just fine with UI.updateElement—just not the “hidden” property.

Just in case there was a bug in the version of the viewer I was using, I updated my version to 8.8.0.

I now note the following:

  1. “mobile” now works as a value for the “hidden” property.
  2. UI.updateElement still does not update the values for the “hidden” property.

Hi beccanet,

Thank you for upgrading to 8.8.

Like you mentioned, the hidden property does not seem to be setting for existing ‘toolButton’ type.

I am able to create a custom button and the hidden property works:

    instance.UI.setHeaderItems(function(header) {

      var myCustomButton = {
        type: 'toggleElementButton',
        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>',
        hidden: [ 'mobile', 'tablet', ],
        onClick: function() {
          console.log('custom button clicked')
        }
      }
      header.push(myCustomButton);
    });

An alternative would be to create a separate CSS file and add it to the WebViewer Constructor:
https://www.pdftron.com/api/web/global.html#css

Another alternative is to customize the UI:

As for the bug-fix for the existing toolButtons, we’ve added the issue to our backlog to be worked on in the future. We don’t have a timeline for when it will be fixed but if it does get fixed we’ll let you know when it’s available in an experimental build to test out and the estimated official release date. If you have a desired timeline for having this issue fixed please let us know and we’ll do our best to work with you on how this can fit into the release schedule.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.