How to rename the Groups in custom cockpit

[Mohan_Pathapataa]

Detailed explanation of the problem:

I have cloned the custom cockpit application (1015.0.364). We would like rename the Groups to some custom name under side navigator is possible to rename ? and some times on hover group names I am not getting proper tooltip. It is giving as Your tooltip

Error messages / full error message screenshot / log file:

Question related to a free trial, or to a production (customer) instance?

Cumulocity Production

[Tristan_Bastian]

Hi Mohan,

as already described to you in How to disable Copy and Paste dashboard option to Guest user - #3 by Tristan_Bastian and How to remove or disable the components under left drawer(side menu) in custom cockpit application - #4 by Tristan_Bastian you would need to adjust the items$ observable of the corresponding state service (in this case the NavigatorService Web SDK documentation) to emit the values as you need them.

Instead of filtering the items like described in the above linked samples, you can also search for the item with the label Groups and adjust it’s label to whatever you want.

In case you already performed the modifications that I described to you in How to remove or disable the components under left drawer(side menu) in custom cockpit application - #8 by Tristan_Bastian you could also just adjust the CustomAssetNode class further and override it’s setLabel method (Web SDK documentation) like so:

class CustomAssetNode extends AssetNode {

  [...]

  setLabel() {
    if (this.root) {
      this.label = 'My custom groups label';
    } else {
      super.setLabel();
    }
  }
}

Regarding the Your tooltip tooltip, I was unable to reproduce this. Please raise a support ticket for this with detailed instructions on how to reproduce this and make sure that this is also reproduce able in the stock cockpit app without any of your customizations.

Regards,
Tristan

[Mohan_Pathapataa]

Thanks for the update Tristan. Apologies for the late reply. We did not get chance incorporate the change the icon which you suggested since they are okay with the current icon of the device. So that’s why we did not find the setLabel() function.

By extending we can rename the groups below as you said. I have one basic question. do I need to pass all this services as dependencies( InventoryService, ApiService etc) ? for changing the name group name. I tried by removing some dependencies it is breaking somewhere. So just thought to double check.

import { Inject, Injectable, Optional } from "@angular/core";
import { InventoryService, UserService } from "@c8y/client";
import {
  AlertService,
  AppStateService,
  BreadcrumbService,
  ModalService,
  NavigatorNodeData,
  OptionsService,
} from "@c8y/ngx-components";
import { ApiService } from "@c8y/ngx-components/api";
import {
  ASSET_NAVIGATOR_CONFIG,
  AssetNavigatorConfig,
  AssetNode,
  AssetNodeService,
  DeviceGroupService,
} from "@c8y/ngx-components/assets-navigator";


class CustomAssetNode extends AssetNode {
    constructor(service: AssetNodeService, config?: NavigatorNodeData) {
        super(service, config);
    }
    setLabel() {
        if(this.root) {
            this.label = "My custom Name";
        } else {
            super.setLabel();
        }
    }
}

@Injectable()
export class CustomAssetNodeService extends AssetNodeService {
  constructor(
    inventory: InventoryService,
    apiService: ApiService,
    modal: ModalService,
    alert: AlertService,
    breadcrumbService: BreadcrumbService,
    user: UserService,
    appState: AppStateService,
    optionsService: OptionsService,
    @Optional() @Inject(ASSET_NAVIGATOR_CONFIG) moduleConfig: AssetNavigatorConfig,
    deviceGroupService: DeviceGroupService
  ) {
    super(
      inventory,
      apiService,
      modal,
      alert,
      breadcrumbService,
      user,
      appState,
      optionsService,
      moduleConfig,
      deviceGroupService
    );
  }

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