# 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?

**URL:** <https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058>\
**Category:** Technical Support\
**Created:** [January 8, 2024, 6:35am UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058 "2024-01-08T06:35:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahid.shaikh](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@shahid.shaikh](https://pdfjs.community/u/shahid.shaikh)\
**Post date:** [January 8, 2024, 6:35am UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/1 "2024-01-08T06:35:07Z")

</div>

**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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/00729ebd80c9b4675e23ce7a7fd3537e50d34c20.png)

dev site snapshot :-

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/0d41805be381f9210a21031114c138be29e27d71.png)

**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);
  }

```

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [January 8, 2024, 6:30pm UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/2 "2024-01-08T18:30:34Z")

</div>

Hello Shahid,

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

Best Regards,  
Darian

---

<div class="post-metadata">

**Author:** ![shahid.shaikh](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@shahid.shaikh](https://pdfjs.community/u/shahid.shaikh)\
**Post date:** [January 9, 2024, 7:20am UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/3 "2024-01-09T07:20:50Z")

</div>

**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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/0340953a8594fa7df46387485a3bcc03b8381482.png)

**dev snapshot**

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/9/97561debbc57736d53493f25557df5b38e13ce22.png)  
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 ?

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [January 9, 2024, 2:39pm UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/4 "2024-01-09T14:39:49Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/6/685f94b4a732f8e97032833c5feb408eea3e3a54.png)

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

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

> **[PDF.js Express Viewer Style Customization (Color & CSS) | Documentation](https://pdfjs.express/documentation/ui-customization/customizing-styles#change-other-css-properties)**

---

<div class="post-metadata">

**Author:** ![shahid.shaikh](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@shahid.shaikh](https://pdfjs.community/u/shahid.shaikh)\
**Post date:** [January 10, 2024, 1:13pm UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/5 "2024-01-10T13:13:49Z")

</div>

> [@shahid.shaikh](#):
>
> local snapshot

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/8/85a3497ac26496e1d13a4c247dda06b691f9eeb8.png)  
Can you please share me code once want to show the above tools only which has highlighted on snapshot ?

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [January 10, 2024, 2:54pm UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/6 "2024-01-10T14:54:10Z")

</div>

Hello Shahid,

Please try adding the setToolbarGroup API like so:

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

```

Best Regards,  
Darian

---

<div class="post-metadata">

**Author:** ![shahid.shaikh](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@shahid.shaikh](https://pdfjs.community/u/shahid.shaikh)\
**Post date:** [January 11, 2024, 9:26am UTC](https://pdfjs.community/t/trying-to-show-or-hide-tools-on-dev-site-but-on-dev-site-thats-not-not-working-properly-it-is-working-in-local-site/3058/7 "2024-01-11T09:26:38Z")

</div>

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