Modify deviceName shown in C8Y Cockpit Navigation

[Christof_Strack]

Hi,

a customer wants to show additional information for their devices:
deviceName + serialNumber.

Instead of only the
deviceName
they do not want to change the name of the device.

Can the navigation component in the left navigation in the cockpit be replaced?
The target release for this is 1015.

Regards Christof

[Tristan_Bastian]

Hi Christof,

I guess the easiest way to achieve this would be to override the AssetNodeService (Web SDK documentation). This service has a method: createAssetNode (Web SDK documentation) that you could override.
Your new createAssetNode method could then return something different than an instance of the default AssetNode, like e.g. an instance of CustomAssetNode (a class that you would create that extends the default AssetNode). Within the CustomAssetNode class you could then go ahead and override it’s setLabel method (Web SDK documentation).

The end result could look like this (note that this might not work 100% copy paste as it was written against 10.16):

export class CustomAssetNode extends AssetNode {
  setLabel() {
    this.label =
      this.config.label ||
      (this.root && gettext('Groups')) ||
      `${this.mo.name} (${this.mo.type})` ||
      '--';
  }
}

@Injectable({ providedIn: 'root' })
export class CustomAssetNodeService extends AssetNodeService {
  constructor(
    public inventory: InventoryService,
    public apiService: ApiService,
    public modal: ModalService,
    public alert: AlertService,
    protected breadcrumbService: BreadcrumbService,
    protected user: UserService,
    protected appState: AppStateService,
    protected optionsService: OptionsService,
    @Optional() @Inject(ASSET_NAVIGATOR_CONFIG) public moduleConfig: AssetNavigatorConfig,
    protected deviceGroupService: DeviceGroupService
  ) {
    super(
      inventory,
      apiService,
      modal,
      alert,
      breadcrumbService,
      user,
      appState,
      optionsService,
      moduleConfig || {},
      deviceGroupService
    );
    if (!this.moduleConfig) {
      this.moduleConfig = {};
    }
  }

  createAssetNode(config: Partial<AssetNode>): AssetNode {
    return new CustomAssetNode(this, config);
  }
}

The setLabel method was adjusted to include the device/asset type as part of the label in this case with:

`${this.mo.name} (${this.mo.type})`

As a result your navigator node could look like this:

A similar approach could e.g. also be used to override the icon of the navigator node.

Regards,
Tristan

[Christof_Strack]

Thank you very much.
This works.
The hint to register the CustomAssetNodeService with:

providers: [{provide: AssetNodeService, useClass: CustomAssetNodeService}]

in app.module.ts delivered the expected result: