17 Jun 2020

DockingPanel basics: iframe sample

The DockingPanel class is the base for most panels in the Forge Viewer, including, the PropertyPanel, which I discussed in a previous article. Along with PropertyPanel, there is ModelStructurePanel and SettingsPanel, each with a set of specialized features. The Forge Viewer documentation provides a sample that demonstrates the basic features of DockingPanel. This article goes one step further, providing a skeleton for a panel—title, content and footer—and an example that place a panel in an IFrame..

To get started, let’s look at the DockingPanel base class. DockingPanel has 3 basic parts: 

  1. A title bar with a close button
  2. A content area
  3. A footer

DockingPanel also has some features. For example, you can add the ability to drag the panel from inside the Viewing area. You can also add support for light/dark mode, as described in this article

In order to use DockingPanel, you’ll need to override the initialize method. Note that initialize() is called within the super (base class) construction. The following example creates a basic docking panel with a title, close button, content area, and footer.

class MyPanel extends Autodesk.Viewing.UI.DockingPanel {
  constructor(viewer, container, id, title, options) {
    super(container, id, title, options);
    this.viewer = viewer;

    // your panel content here
  }

  initialize() {
    this.container.style.top = "10px";
    this.container.style.left = "10px";
    this.container.style.width = "auto";
    this.container.style.height = "auto";
    this.container.style.resize = "auto";

    // title bar
    this.titleBar = this.createTitleBar(this.titleLabel || this.container.id);
    this.container.appendChild(this.titleBar);

    // close button
    this.closeButton = this.createCloseButton();
    this.container.appendChild(this.closeButton);

    // allow move
    this.initializeMoveHandlers(this.container);

    // the main content area
    this.container.appendChild(this.createScrollContainer());

    // footer
    this.container.appendChild(this.createFooter());
  }
}

Now that we’ve set up the panel, we can add some content. As an example, let’s create a panel that shows an iframe.

class MyPanel extends Autodesk.Viewing.UI.DockingPanel {
  constructor(viewer, container, id, title, options) {
    super(container, id, title, options);
    this.viewer = viewer;

    this.div = document.createElement('div');
    this.div.className = 'panelContent';

    this.iframe = document.createElement('iframe');
    this.iframe.src = options.url;
    this.iframe.frameborder = 0;

    this.div.appendChild(this.iframe);
    this.scrollContainer.appendChild(this.div);
  }

  initialize() {
    // same as above
  }
}

Notice we added a div with a class called `panelContent`. You can use this class to adjust the panel’s size:

.panelContent iframe {
  width: 100%;
  height: 100%;
}

Finally, you need to run the panel in your code. One good way to do this is to add an extension with a toolbar button that triggers the panel. For more information on creating extensions, check out the Extension Skeleton tutorial.

var panel = new IFramePanel(viewer, viewer.container, 'panelId', 'Panel Title', { url: 'https://Some.Page.That.Allows.Iframe.com' });
panel.setVisible(true);

Note that not all websites allow you to place content inside an iframe from a different domain. In most cases, you need to set 'X-Frame-Options' to 'sameorigin' to prevent misuse of your web app.

Related Article