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 o

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 = [
    '
',
    '
',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '',
    '
Name
Status
Found
Approved By
Description
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
',
    '
',
    '
'
].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.