# How to remove or disable the components under left drawer(side menu) in custom cockpit application

**URL:** <https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [May 3, 2023, 5:53pm UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511 "2023-05-03T17:53:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [May 3, 2023, 5:53pm UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/1 "2023-05-03T17:53:48Z")

</div>

#### _Product/components used and version/fix level are you on:_

Cumulocity Production

#### _Detailed explanation of the problem:_

We have created a cockpit application using c8ycli to create our own custom widgets. I would like to disable or remove some of the predefined components such as Data explorer, Reports and Configuration is which is rendering as part of the application under left drawer(side menu) which is not required to show in our use case. do we have any configuration under c8y object in package.json?  
“c8y”: {  
“application”: {  
…  
}, cli:{}  
}

Regards  
Mohan

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 3, 2023, 6:58pm UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/2 "2023-05-03T18:58:58Z")

</div>

Hi Mohan,

The cockpit application you’ve created consists of certain Angular (`app.module.ts`) and AngularJS (`ng1.ts`) modules.  
By removing/commenting certain modules, you remove specific parts of the application.

I would always recommend to comment these lines out, as it might make the [upgrade process to a newer WebSDK version](https://cumulocity.com/guides/web/upgrade/#update-to-an-newer-version) a lot easier, as you do not have to struggle with finding out which modules were removed by you or added by the WebSDK.

To remove the Data explorer you would e.g. comment out the `import '@c8y/ng1-modules/cockpit-dataPointExplorerUI/cumulocity.json';` line in the `ng1.ts` file.  
While for the Reports, you would comment out the `ReportDashboardModule` from the `app.module.ts` file.

The Configuration section of the navigation consists of multiple modules, depending on the version you are using these are part of the angular or angularJS modules.  
It is usually pretty simple to identify these modules by going through the imports of both files.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [May 4, 2023, 6:13am UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/3 "2023-05-04T06:13:40Z")

</div>

Thanks Tristan, That is working. Can we able to manage those components by user role ? For eg: For ADMIN\_ROLE need to enable for READER\_ROLE need to disable. will it be possible ? instead of removing entirely from the application.

Regards  
Mohan

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 4, 2023, 7:17am UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/4 "2023-05-04T07:17:11Z")

</div>

Hi Mohan,

you can keep the modules and instead just filter out the nodes in the navigation.  
Note that a users who know the right URL may still be able to access these views.

You can override the `NavigatorService` with a custom implementation, by defining the following service:

```auto
import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { AppStateService, NavigatorService, Permissions } from '@c8y/ngx-components';
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class CustomNaivgationService extends NavigatorService {

    constructor(rootInjector: Injector, router: Router, appState: AppStateService, permissions: Permissions) {
        super(rootInjector, router);
        this.items$ = combineLatest([this.items$, appState.currentUser]).pipe(map(([items, user]) => {
            if (!user) {
                return [];
            }

            if (permissions.hasRole('ROLE_TENANT_ADMIN')) {
                return items;
            }

            const filteredItems = items.filter(item => item.label !== 'Data explorer');
            return filteredItems;
        }))
    }

}

```

And provide it in your AppModule in the providers array:

```auto
@NgModule({
  imports: [
    // Upgrade module must be the first
    UpgradeModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(),
    NgRouterModule.forRoot([...UPGRADE_ROUTES], { enableTracing: false, useHash: true }),
    CoreModule.forRoot(),
    ReportsModule,
    NgUpgradeModule,
    AssetsNavigatorModule,
    DashboardUpgradeModule,
    CockpitDashboardModule,
    SensorPhoneModule,
    ReportDashboardModule,
    BinaryFileDownloadModule,
    SearchModule,
    SubAssetsModule,
    ChildDevicesModule,
    CockpitConfigModule,
    DatapointLibraryModule.forRoot(),
    WidgetsModule,
  ],
  providers: [
    {
      provide: NavigatorService,
      useClass: CustomNaivgationService
    }
  ]
})
export class AppModule extends HybridAppModule {
  constructor(protected upgrade: NgUpgradeModule) {
    super();
  }
}

```

This sample `CustomNaivgationService` filters out the `Data explorer` navigator node in case the user does not have the `ROLE_TENANT_ADMIN` permission.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [May 4, 2023, 11:56am UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/5 "2023-05-04T11:56:54Z")

</div>

Tristan,

Here where are we checking user roles ? below condition will get satisfy all the times. because we are checking application has this role or not, not the user roles right ? because of that it will not go to filteredItems line.

```auto
 if (permissions.hasRole('ROLE_TENANT_ADMIN')) 
    {
                return items;
    }

```

For this I just modified the condition as below. I am checking user role as well here, If both the conditions get satisfy then I am returning items.

```auto
  if (permissions.hasRole('ROLE_TENANT_ADMIN') && user.roles.references.map((val: any) => val.role.name).includes('ROLE_TENANT_ADMIN'))
      {
                return items;
      }

```

But for user this **ROLE\_TENANT\_ADMIN** role is not coming as part of user response even though he has admins role as global role. Always coming this below two roles

**ROLE\_USER\_MANAGEMENT\_OWN\_READ**** ROLE\_USER\_MANAGEMENT\_OWN\_ADMIN**

Do I need to specifically assign any other role to get ROLE\_TENANT\_ADMIN as part of user response ?

Regards  
Mohan

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 4, 2023, 12:47pm UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/6 "2023-05-04T12:47:50Z")

</div>

Hi Mohan,

The `ROLE_TENANT_ADMIN` was just a sample. This specific role is just assigned to the admin of your tenant and you can not assign it to a user or group manually as far as I know.

The `permissions.hasRole(...)` will check the assigned roles of the user. Roles can either be directly assigned to the user (`user.roles` attribute) or via the groups the user belongs to (`user.groups`).  
The `permissions.hasRole(...)` part will check both places.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [May 4, 2023, 5:54pm UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/7 "2023-05-04T17:54:57Z")

</div>

Okay ! I was looking roles of the user under global role level. I should check under groups of the user object to check which role he/she has. Thanks Tristan it worked.

One last question I have about side menu we are configuring the devices under groups. I would like to show my own custom icon before to the device and heading section of the device. For testing I tested like below with c8y-icon the same icon coming as app icon and device icon.

```auto
"icon": {
        "class": "c8y-icon-sub-tenants"
      }, 

```

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/7/a/7a1fde21455eec573fe3c93580ab1025f9c2d583.png)

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/b/bb273c8cb5123864b1ffd198cf089e495be8d948.png)

Regards  
Mohan

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 5, 2023, 7:04am UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/8 "2023-05-05T07:04:55Z")

</div>

You can customize the icons for devices within the navigation by overriding the AssetNodeService.  
This customized AssetNodeService (`CustomAssetNodeService`) will then create custom AssetNodes (`CustomAssetNode`).  
The `CustomAssetNode` will set the `iconComponent` attribute to a different custom component (`CustomAssetNodeIconComponent`).  
Within this component you can then define which icon you would like to display.

Here is some sample code which should work with version 1016 of the WebSDK (didn’t test newer or older versions, but it should work in a similar way):

```auto
import { Component, Inject, Injectable, Input, Optional } from "@angular/core";
import { IManagedObject, 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";

@Component({
  selector: 'custom-asset-node-icon',
  template: '<i class="icon" c8yIcon="c8y-atom"></i>',
})
export class CustomAssetNodeIconComponent {
    // in case you want to adjust the icon depending on the device..
    device: IManagedObject;
    @Input('mo') set node(value: AssetNode) {
        this.device = value.mo;
    }
}

class CustomAssetNode extends AssetNode {
    constructor(service: AssetNodeService, config?: NavigatorNodeData) {
        super(service, config);
        if (this.iconComponent !== undefined) {
            this.iconComponent = CustomAssetNodeIconComponent;
        }
    }
}

@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);
  }
}

```

You also need to add the `CustomAssetNodeIconComponent` and `CustomAssetNodeService` to e.g. your AppModule like this:

```auto
declarations: [
    CustomAssetNodeIconComponent
  ],
  providers: [
    {
      provide: AssetNodeService,
      useClass: CustomAssetNodeService
    }
  ]

```

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [November 1, 2023, 7:05am UTC](https://community.cumulocity.com/t/how-to-remove-or-disable-the-components-under-left-drawer-side-menu-in-custom-cockpit-application/2511/9 "2023-11-01T07:05:52Z")

</div>

Closed on November 1, 2023, 7:05am UTC

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.