22 Apr 2021

Switch between sheets

Certain file types can have multiple models in them. These tend to be 2d sheets as in the case of Revit projects (*.rvt), PDF files, Inventor drawings (*.idw), etc

There is no direct built-in way to show the available models and enable the user to switch between the sheets, however, there is an extension for it that you can load into the Viewer. It's called "Autodesk.DocumentBrowser" 
Apart from providing a Panel that lists all the available sheets and their thumbnails, it also exposes two functions to go back and forth between those sheets: loadNextModel() / loadPrevModel()

In this sample, we created an extension that will provide toolbar buttons that can navigate to the previous and next model in the document. This extension and the "Autodesk.DocumentBrowser" extension are both loaded using the { extensions: [] } option of the GuiViewer3D() constructor.

      content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no"
    <meta charset="utf-8" />

    <!-- The Viewer CSS -->


    <!-- Developer CSS -->
      body {
        margin: 0;

      #MyConytainerDiv {
        width: 100%;
        height: 100%;
        position: relative;

      #MyViewerDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #f0f8ff;

    <title>Showing A360 Shared files</title>

    <!-- The Viewer will be instantiated here -->
    <div id="MyConytainerDiv">
      <div id="MyViewerDiv"></div>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>

    <!-- jQuery -->

    <!-- Developer JS -->
      // this is the iframe URL that shows up when sharing a model embed on a page
      var embedURLfromA360 =
        "https://myhub.autodesk360.com/ue29c89b7/shares/public/SH7f1edQT22b515c761e81af7c91890bcea5?mode=embed"; // Revit file (A360/Forge/Napa.rvt)

      var viewer;

      function getURN(onURNCallback) {
          url: embedURLfromA360
            .replace("public", "metadata")
            .replace("mode=embed", ""),
          dataType: "json",
          success: function (metadata) {
            if (onURNCallback) {
              let urn = btoa(metadata.success.body.urn)
                .replace("/", "_")
                .replace("=", "");

      function getForgeToken(onTokenCallback) {
          url: embedURLfromA360
            .replace("public", "sign")
            .replace("mode=embed", "oauth2=true"),
          data: "{}",
          success: function (oauth) {
            if (onTokenCallback)
              onTokenCallback(oauth.accessToken, oauth.validitySeconds);

      getURN(function (urn) {
        var options = {
          env: "AutodeskProduction",
          getAccessToken: getForgeToken,
        var documentId = "urn:" + urn;
        Autodesk.Viewing.Initializer(options, function onInitialized() {
          Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess);

       * Autodesk.Viewing.Document.load() success callback.
       * Proceeds with model initialization.
      function onDocumentLoadSuccess(doc) {
        // A document contains references to 3D and 2D viewables.
        var items = doc.getRoot().search(
            type: "geometry",
            role: "2d",
        if (items.length === 0) {
          console.error("Document contains no 2d sheets.");

        var viewerDiv = document.getElementById("MyViewerDiv");
        viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv, { extensions: [
            "Autodesk.DocumentBrowser", "MyExtension"

        viewer.loadDocumentNode(doc, items[1], {})

      class MyExtension extends Autodesk.Viewing.Extension {
        onToolbarCreated() {
          let group = viewer.toolbar.getControl("modelToolbar");
          if (!group) {
            group = new Autodesk.Viewing.UI.ControlGroup("modelToolbar");

          // Add a new button to the toolbar group
          let button = new Autodesk.Viewing.UI.Button("prevButton");
          button.icon.classList.add("fa", "fa-step-backward");
          button.onClick = () => {
            let ext = viewer.getExtension("Autodesk.DocumentBrowser");
          button.setToolTip("Previous Model");

          button = new Autodesk.Viewing.UI.Button("nextButton");
          button.icon.classList.add("fa", "fa-step-forward");
          button.onClick = () => {
            let ext = viewer.getExtension("Autodesk.DocumentBrowser");
          button.setToolTip("Next Model");

      Autodesk.Viewing.theExtensionManager.registerExtension('MyExtension', MyExtension);


Related Article

Posted By

Adam Nagy

Follow @AdamTheNagy Adam Nagy joined Autodesk back in 2005 and has been providing programming support, consulting, training and evangelism to external developers. He started his career in Budapest, then worked in Prague for 3 years and now lives in South England, UK. At the moment focusing on Inventor and Fusion 360, plus cloud and mobile related technologies. Adam has a degree in Software Engineering and has...