How to create a Docking Panel

Question

How to create a docking panel? I am using the code from the example https://developer.autodesk.com/en/docs/viewer/v2/reference/javascript/dockingpanel/ that should inherit and override needed methods.

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
  Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

  // Auto-fit to the content and don't allow resize.  Position at the coordinates given.
  //
  this.container.style.height = "auto";
  this.container.style.width = "auto";
  this.container.style.resize = "none";
  this.container.style.left = x + "px";
  this.container.style.top = y + "px";
};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{
  // Override DockingPanel initialize() to:
  // - create a standard title bar
  // - click anywhere on the panel to move
  // - create a close element at the bottom right
  //
  this.title = this.createTitleBar(this.titleLabel || this.container.id);
  this.container.appendChild(this.title);

  this.container.appendChild(this.content);
  this.initializeMoveHandlers(this.container);

  this.closer = document.createElement("div");
  this.closer.className = "simplePanelClose";
  this.closer.textContent = "Close";
  this.initializeCloseHandler(this.closer);
  this.container.appendChild(this.closer);
};

After this I am calling the created simple panel with:

var parent = document.getElementsByClassName('adsk-viewing-viewer')[0];
var panel = SimplePanel(parent, 'panel1', 'panel1');

It is returning error: "Uncaught TypeError: this.setVisible is not a function at DockingPanel (viewer3D.js?v=2.11:34343)"

It seems to go from

Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

to

var DockingPanel = function (parentContainer, id, title, options) {

and crash inside that.

Inside the viewer docking panel function "this" seems to be referring to the window element. Maybe it should be something else? When the viewer is creating the search window for example it seems to be referring to some div.

Answer 1

I did not get such error like yours, but I hit another issue that is caused by empty content. So I explicitly created a div as the content to be the argument. In addition, width & height are also required, otherwise the panel will not show up.

The Panel class is as below.

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});

// Auto-fit to the content and don't allow resize.  Position at the coordinates given.
//
this.container.style.height = "150px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px"; 

};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{ 
        this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);

this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);

this.closer = this.createCloseButton();
this.title.appendChild(this.closer);


var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);

var html = [
    '<div class="uicomponent-panel-controls-container">',
    '<div class="panel panel-default">',
    '<table class="table table-hover table-responsive" id = "clashresultstable">',
    '<thead>',
    '<th>Name</th><th>Status</th><th>Found</th><th>Approved By</th><th>Description</th>',
    '</thead>',
    '<tbody>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '</tbody>',
    '</table>',
    '</div>',
    '</div>'
].join('\n');


$(this.scrollContainer).append(html);

this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);        
};

I loaded this panel on console script.

 var content = document.createElement('div');
     var mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);
     mypanel.setVisible(true);

If you still have the issue, please provide a small sample file. I can give a test at my side.