How to remove toolbar buttons in Autodesk Forge Viewer version 7

Question

I am trying to remove toolbar buttons in the new version 7 of Autodesk Forge Viewer.

Please refer my below code:

 viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, (e) => {
        console.log(e);
        let modelTools = e.target.toolbar.getControl('modelTools')
        console.log(modelTools);
        modelTools.removeControl('toolbar-explodeTool');
        modelTools.removeControl('toolbar-measurementSubmenuTool');
        modelTools.removeControl('toolbar-modelStructureTool');
    })

From few quick StackOverflow searches, I was able to understand that I have to listen to an event and then get control of the extension and remove it, I think I am trying to do the same but it is not yielding any results, the buttons don't get removed.

Please help!

score 4 · Accepted Answer · answered Sep 12 '19 at 14:11

The easiest way would be to hide them with styling overrides like below (see live demo here):

.adsk-viewing-viewer #toolbar-modelStructureTool{display:none!important}
.adsk-viewing-viewer #toolbar-explodeTool{display:none!important}
.adsk-viewing-viewer #toolbar-measurementSubmenuTool{display:none!important}

Another workaround would be to suppress the automatic loading of these default, built-in extensions and load them later with callbacks to hide their controls because we'd be confident that the toolbar would be populated by their controls when the callbacks are fired:

 new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'),{disabledExtensions
:{measure:true,explode:true}})

//...

viewer.loadExtension('Autodesk.Explode', viewer.config).then(ext=>{
//...hide the controls
});

viewer.loadExtension('Autodesk.Measure', viewer.config).then(ext=>{
//...hide the controls
});

Thanks. Is there a list of toolbar names such as `measure`, and `explode` listed anywhere? — Prageeth Jayathissa, Oct 22 '19 at 08:47

score 1 · Answer 2 · answered Sep 22 '20 at 14:29

Another way to do this is as follows:

// Viewer instance is `viewer`
const toolbarControls = [];
if (var i = 0; i < viewer.toolbar.getNumberOfControls(); i++) {
  toolbarControls.push(viewer.toolbar.getControlId(i));
}

// E.g., remove all controls
toolbarControls.forEach(control => viewer.toolbar.removeControl(control));

score 0 · Answer 3 · answered Jul 26 '19 at 11:22

0

In case you're using the recently released version of the viewer - v7 - please note that the toolbar creation should now be intercepted using a callback method instead of subscribing to an event. See migration guide for more details.

If you're not ready to migrate to v7 yet, you can hard-code the v6 in your script tag, e.g., <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.*"></script>.

answered Jul 26 '19 at 11:22

Petr Broz

8,891
2
15
24

could you please share an example? that would be really helpful for me to understand, thank you! – Pawan Kanhere Jul 26 '19 at 12:38
I've tested the code and noticed that when subscribing to `Autodesk.Viewing.TOOLBAR_CREATED_EVENT`, some of the buttons are not created yet... I've contacted the dev team to see if this is a regression in v7. In the meantime you may need to work around the issue by delaying the removal of the controls until they're actually in the toolbar. – Petr Broz Jul 26 '19 at 13:27

score 0 · Answer 4 · answered Mar 20 '20 at 15:00

0

Please try :

(viewer.toolbar.getControl("modelTools") as Autodesk.Viewing.UI.ControlGroup).removeControl('toolbar-explodeTool');

answered Mar 20 '20 at 15:00

user3805731

275
2
3
13

Alex T · Answer 5 · 2020-07-10T16:53:45.130

The buttons on a standard toolbar are associated with the loaded extensions. If you remove/hide the buttons you effectively disable using the associated extensions. I propose to unload the extensions instead of removing the buttons. You can try and model that behavior before writing the code in the debug window in the browser interactively by using the NOP_VIEWER object. Try this sequence:

NOP_VIEWER.getLoadedExtensions()
NOP_VIEWER.unloadExtension('Autodesk.ModelStructure')

You should notice as soon as you unload an extension the corresponding button will also disappear from the toolbar. Now you need to pick a moment when to unload the extension. I suggest you do it in a onSuccessCallback function of a viewer.start call because this is when the extensions are loaded like this:

this.viewer.start(null, () => {
      console.log('Forge viewer started');
      this.viewer.unloadExtension('Autodesk.ModelStructure');
    }, (errorCode, errorMessage) => {
      console.error(`Forge viewer start error ${errorCode}`, errorMessage);
    });

The reason why unloading an extension approach is better is because every extension implements a clean up logic on unload that is supposed to remove the UI elements it created when was loaded. See more here https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/toolbar-button/#step-3-cleanup https://forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/Viewer3D/#start-url-options-onsuccesscallback-onerrorcallback-initoptions

How to remove toolbar buttons in Autodesk Forge Viewer version 7

5 Answers5

Linked