这是一个常被提起的问题，第一次是在「添加自定义属性到Viewer的属性面板」这篇博客被提出，但因自V4开始，Viewer的CSS有重大变更，导致该方法在新版的 Viewer已无法使用。另一个相关的是「Viewer属性检查器」这篇博客，其是通过建立一个工具栏按钮的方式来新增面板，它是可以正常运作的，但它的做法并非取代现有的属性面板，不在今天要讨论的范围。
那我们该怎么做才能取代现有的属性面板呢?
事实上，我们有一个接受内建面板 ViewerPropertyPanel 对象的方法叫 viewer.setPropertyPanel 可以使用。因此，最简单的操作方式是使用 setPropertyPanel 这个方法，再替换 setProperties 这方法的内容。为了新增更多我们想要的属性数据，让我们也复写setNodeProperties 这个接受dbId作为函数变量的方法，以下是部分程序代码:
// *******************************************// Custom Property Panel// *******************************************function CustomPropertyPanel(viewer, options) { this.viewer = viewer; this.options = options; this.nodeId = -1; // dbId of the current element showing properties Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);}CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;CustomPropertyPanel.prototype.setProperties = function (properties, options) { Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options); // add your custom properties here // for example, let's show the dbId and externalId var _this = this; // dbId is right here as nodeId this.addProperty('dbId', this.nodeId, 'Custom Properties'); // externalId is under all properties, let's get it! this.viewer.getProperties(this.nodeId, function(props){ _this.addProperty('externalId', props.externalId, 'Custom Properties'); })}CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) { Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId); this.nodeId = nodeId; // store the dbId for later use};为了方便使用，我们将之包装在Viewer扩展中。这里有篇博客「扩展概念：工具栏与面板」在讨论扩充展架的基本概念，这里我们只使用它创建扩展的部分(不是工具栏或面板的部分)。以下扩展代码使用刚才建立的面板，并通过 setPropertyPanel 使之与 Viewer 连结。(这个扩充将负责注册和取消注册我们的自定义属性面板。)
// *******************************************// Custom Property Panel Extension// *******************************************function CustomPropertyPanelExtension(viewer, options) { Autodesk.Viewing.Extension.call(this, viewer, options); this.viewer = viewer; this.options = options; this.panel = null;}CustomPropertyPanelExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);CustomPropertyPanelExtension.prototype.constructor = CustomPropertyPanelExtension;CustomPropertyPanelExtension.prototype.load = function () { this.panel = new CustomPropertyPanel(this.viewer, this.options); this.viewer.setPropertyPanel(this.panel); return true;};CustomPropertyPanelExtension.prototype.unload = function () { this.viewer.setPropertyPanel(null); this.panel = null; return true;};Autodesk.Viewing.theExtensionManager.registerExtension('CustomPropertyPanelExtension', CustomPropertyPanelExtension);最后一步是载入这个扩展。如果您的应用程序依照「基本应用程序教学」建立的，在你的程序代码里会有一行像这个样子的，这里我们只需加入扩充设定即可：
// 从这样viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);// 改成这样viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['CustomPropertyPanelExtension'] });