How to refresh a Forge(APS) DockPanel ?

[vitruviusbim]

I have been trying   refresh  my  Forge DockPanel.  I use the  setData method  for refresh a  content div  but  panel do not changing. what  i need to try ?       

export class View3dService {
  private viewer: any;
  private customPanel: CustomPropertiesPanel | null = null;
  error?: string;

  initViewer(freshToken: string, modelIdToView: string, apsViewnames? : ApsPresentationView[] ) {

    const options = {
      env: 'AutodeskProduction',
      getAccessToken: (onTokenReady: any) => {
        const token = freshToken;
        const timeInSeconds = 12000; // Use value provided by APS Authentication (OAuth) API
        onTokenReady(token, timeInSeconds);
      },
    };

    Autodesk.Viewing.Initializer(options, () => {
      const htmlDiv = document.getElementById('forgeViewer') as HTMLElement;
      this.viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, {
        extensions: ['Autodesk.VisualClusters' ],

      });




      const startedCode = this.viewer.start();
      if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        this.error = 'Failed to create a Viewer: WebGL not supported.';
        return;
      }

      console.log('Initialization complete, loading a model next...');

      // Setup custom properties panel
      this.setupCustomPanel();

      const dropdown = document.getElementById('models') as HTMLSelectElement;
      if (dropdown) {
        this.populateDropdown(dropdown, apsViewnames);

        dropdown.onchange = () => {
          const selectedView = dropdown.value;
          if (selectedView) {
            this.loadModelView(modelIdToView, selectedView);
          }
        };
      } else {
        console.error("Dropdown element with id 'models' not found.");
      }

      const selectedView = dropdown.value;
      this.loadModelView(modelIdToView, selectedView);
    });
  }

  private setupCustomPanel(): void {

    this.viewer.unloadExtension('Autodesk.PropertiesManager');
    // Wait for the toolbar to be created
    this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, () => {
      // Create custom toolbar group
      const customToolbarGroup = new Autodesk.Viewing.UI.ControlGroup('custom-properties-group');
      this.viewer.toolbar.addControl(customToolbarGroup);

      // Create and add custom button
      const customButton = new Autodesk.Viewing.UI.Button('custom-properties-button');
      customButton.setToolTip('Custom Properties');
      customButton.setIcon('adsk-icon-properties');
      customButton.onClick = () => {
        if (!this.customPanel) {
          this.customPanel = new CustomPropertiesPanel(
            this.viewer,
            this.viewer.container,
            'custom-properties-panel',
            'Builtgenix Properties'
          );
          this.customPanel.initialize();
          this.viewer.container.appendChild(this.customPanel['container']);
        }
        this.customPanel['setVisible'](!this.customPanel['isVisible']());
      };

      // Add the button to the custom toolbar group
      customToolbarGroup.addControl(customButton);

      // Add selection changed event listener
      this.viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, () => {
        const selection = this.viewer.getSelection();
        if (selection.length > 0) {
          const dbId = selection[0];
          this.viewer.getProperties(dbId, (props: any) => {
            const name = props && props.name ? props.name : '';
            this.customPanel?.setData({ Name: name });
           this.customPanel?.['setVisible'](true);

          });
        } else {
          this.customPanel?.['setVisible'](false);
        }
      });
    });
  }

This is class of custom panel 

export class CustomPropertiesPanel extends Autodesk.Viewing.UI.DockingPanel {
  viewer: any;
  titleBar: any;
  closeButton: any;
  scrollContainer: any;
  footer: any;
  contentDiv: HTMLDivElement | null = null;

  constructor(viewer: any, container: HTMLElement, id: string, title: string, options: any = {}) {
    super(container, id, title, options);
    this.viewer = viewer;
  }

  initialize() {
    this['container'].style.top = "10px";
    this['container'].style.left = "10px";
    this['container'].style.width = "300px";
    this['container'].style.height = "400px";
    this['container'].style.resize = "both";

    // 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']);

    // Main content area
    this.scrollContainer = this['createScrollContainer']();
    this['container'].appendChild(this.scrollContainer);

    // Example content
    this.contentDiv = document.createElement('div');
    this.contentDiv.innerHTML = '<p>No element selected</p>'; // Use innerHTML instead of innerText
    this.contentDiv.style.padding = '16px';
    this.scrollContainer.appendChild(this.contentDiv);

    // Footer
    this.footer = this['createFooter']();
    this['container'].appendChild(this.footer);
  }

  setData(data: { Name?: string }) {
    if (this.contentDiv) {
      // Clear existing content first
      // Main content area
      this.scrollContainer = this['createScrollContainer']();
      this['container'].appendChild(this.scrollContainer);

      // Example content
      this.contentDiv = document.createElement('div');
      this.contentDiv.innerHTML = '<p>No element selected 1</p>'; // Use innerHTML instead of innerText
      this.contentDiv.style.padding = '16px';
      this.scrollContainer.appendChild(this.contentDiv);
    }
  }

[charles]

...

[Charles.Piro]

Hi,

Here is a sample with a customPanelExtension for properties :

Main.js :

import { initViewer, loadModel } from './viewer.js';

const MODEL_URN = ""; 

const login = document.getElementById('login');
try {
    const resp = await fetch('/api/auth/profile');
    if (resp.ok) {
        const user = await resp.json();
        login.innerText = `Logout (${user.name})`;
        login.onclick = () => window.location.replace('/api/auth/logout');
        const viewer = await initViewer(document.getElementById('preview'));
        viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (e)=>{
            if (e.extensionId === 'Autodesk.PropertiesManager') {
                viewer.loadExtension('CustomPropertyPanelExtension');
            }

        });
        await loadModel(viewer, MODEL_URN);
    } else {
        login.innerText = 'Login';
        login.onclick = () => window.location.replace('/api/auth/login');
    }
    login.style.visibility = 'visible';
} catch (err) {
    alert('Could not initialize the application. See console for more details.');
    console.error(err);
}

CustomPropertyPanel.js :

// *******************************************
// Custom Property Panel
// *******************************************
export default class CustomPropertyPanel extends Autodesk.Viewing.UI.PropertyPanel {
    constructor(container, id, title, options = {}) {
        super(container, id, title, options)

        this.container.style.resize = "both"//propertie for modify the size of panel
    }
}

CustomPropertyPanelExtension.js :

import CustomPropertyPanel from './CustomPropertyPanel.js'; 

export default class CustomPropertyPanelExtension extends Autodesk.Viewing.Extension {
	constructor(viewer, options = {}) {
		super(viewer, options)

        this.viewer = viewer;
        this.options = options;
        this.panel = null;
        this.idNode = 1;
    }

    load = () => {
        var propertiesTool = this.viewer.toolbar.getControl('settingsTools').getControl('toolbar-propertiesTool');
        propertiesTool.onClick= () => this.displayPanel();
        this.viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, this.onSelectionChanged);
        
        return true;
    };

    onSelectionChanged = (event) => {
        
        if (event.selections.length === 0 || event.selections[0].dbIdArray.length === 0) {
            this.idNode = 1;
        }
        else if (event.selections[0].dbIdArray.length === 1) {
            this.idNode = event.selections[0].dbIdArray[0];
        }      

        if (this.panel != null && this.panel.isVisible())
            this.setProperties();
    }

    displayPanel = () => {

        var self = this;

        if (self.panel == null) {
            self.panel = new CustomPropertyPanel(self.viewer.container, 'CustomPropertyPanel', 'Properties', self.options);
        }

        self.panel.setVisible(!self.panel.isVisible());

        if (!self.panel.isVisible())
            return;

        self.setProperties();
    }

    setMeshProperties = (object) =>{
        var self = this;
        if (self.panel){
            self.idNode = object.dbId
            self.setProperties();
        }
    }

    setProperties = () => {
        var self = this;

        var _opening = null;
        if(this.openingExtension.allModelOpenings.filter(x => x.dbid == self.idNode).length){
            _opening = this.openingExtension.allModelOpenings.filter(x => x.dbid == self.idNode)[0];
        }
        
        self.panel.removeAllProperties();
        self.viewer.model.getProperties(self.idNode, function (data) {
            self.panel.setTitle(data.name);
            
            data.properties.forEach(function (prop) {

                //console.log(prop);
                //If you want to change the properties

            }   
        });
    }

    unload =  () => {
        this.panel = null;
        return true;
    };
}

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

😉