Trying to show or hide tools on dev site but on dev site that's not not working properly, it is working in local site?

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.4

Detailed description of issue
I am trying to customize header hiding or showing some tools but code is not working on the dev site it’s working proper in local site in reactjs ?

Local site snapshot :-

image
image1371×95 5.22 KB

dev site snapshot :-

image
image1407×91 4.4 KB

Code snippet
const disableElementArray = [
‘toolbarGroup-View’,
‘toolbarGroup-Annotate’,
‘toolbarGroup-Shapes’,
‘toolbarGroup-Insert’,
‘toolbarGroup-Edit’,
‘toolbarGroup-FillAndSign’,
‘leftPanelButton’,
‘toolButton’,
‘toolsOverlay’,
‘viewControlsButton’,
‘underlineToolGroupButton’,
‘strikeoutToolGroupButton’,
‘squigglyToolGroupButton’,
‘stickyToolGroupButton’,
// ‘freeTextToolGroupButton’,
‘freeHandHighlightToolGroupButton’,
‘freeHandToolGroupButton’,
// ‘undoButton’,
// ‘redoButton’,
‘arcToolGroupButton’,
‘ellipseToolGroupButton’,
‘lineToolGroupButton’,
‘polyLineToolGroupButton’,
‘arrowToolGroupButton’,
‘toggleNotesButton’,
‘menuButton’,
]

  const initializeWebViewer = (instance: any) => {
      const { annotationManager, documentViewer, Annotations } =
        instance.Core;
  
  
      instance.UI.disableElements([...disableElementArray]);
      instance.UI.setFitMode(instance.UI.FitMode.FitWidth);
  }
2

Hello Shahid,

How you are running your development environment? Does this only happen with these APIs?

Best Regards,
Darian

3

How you are running your development environment
=> Running development environment using azure devops cicd to build and deploy on kubernetes cluster

Does this only happen with these APIs?
=> This happing with the cloud and polygon tool I want to show cloud and polygon on dev site but not able to show it on dev site using the same code as local site.

local snapshot

image
image1395×125 14.2 KB

dev snapshot

image
image1384×92 10.5 KB

Some extra tools are showing on dev site like Highlight and free but not showing the polygon and cloud tool.

I want to enable tools only which are showing on local site snapshot. Can you please share me code for that or correct code ?

4

Hello Shahid,

Do you have a link to access the dev environment? You could also try running these APIs in the console of your dev environment by changing the context on the top dropdown to webviewer-1 in Chrome.

Screenshot 2024-01-09 at 9.36.04 AM
Screenshot 2024-01-09 at 9.36.04 AM948×408 19 KB

Does running the enable and disable APIs work in the console?

You could also try using css to hide and show the elements.

5

image
image771×110 12.7 KB

Can you please share me code once want to show the above tools only which has highlighted on snapshot ?

6

Hello Shahid,

Please try adding the setToolbarGroup API like so:

        instance.UI.setToolbarGroup('toolbarGroup-Shapes');
        instance.UI.disableElements([...disableElementArray]);
        instance.UI.setFitMode(instance.UI.FitMode.FitWidth);

Best Regards,
Darian

1 Like
7

Thank you so much @darian.chen it’s working.

1 Like