Keeping the Left Nav Bar in Devices

Product/components used and version/fix level:

Cumulocity Version 10.18

Detailed explanation of the problem:

Hi all, I’m trying to retain the left-hand side nav bar when displaying a component in the Device Management/Device Info page

This is what I want to happen:

  • When I click on this tab, the component should be displayed on the right hand side

However, when I do the same in my project (a plugin/widget), the side bar (info, alarms, control) disappears.

To achieve this, I’ve created a hook that creates a tab factory if the URL matches

providers: [
    hookComponent({
      id: 'angular.widget.plugin',
     //... other component config
    }),
    hookTab(appFactory),
    hookRoute(appRoutes)
  ]

Inside of the factory I match the URL & inject a tab if it matches


@Injectable()
export class appFactoryimplements TabFactory {

  constructor(public router: Router) {
  }

  get() {
    const tabs: Tab[] = [];
    this.deviceConfig(tabs);
    return tabs;
  }

  deviceConfig(tabs) {
    let match = this.router.url.match(/device\/(?<device_dId>\d+)/);

    if (match) {
      let deviceId = match[1];
      
      tabs.push({
        path: appPath.deviceConfig.replace(':id', deviceId),
        label: 'Custom Management Tab',
        icon: 'gears'
      } as Tab);
    }
  }
}

The app then uses hookRoute to display the management component.

export const appRoutes: Routes = [
    { path: 'device/:id/device-config', 
        component: AppConfigComponent
    }

];

Error messages / full error message screenshot / log file:

No errors directly related to issue on console

Key Question

Is there any configuration that I might be missing/any structure I’m missing to allow the left nav bar to stay in place?

Cheers
Jimmy

Hi @jtrac,

Please check the tutorial application for the sample in the “src/hooks/route/device” folder:

/**
 * Route hooks allow you to use routes as child routes on a ViewContext. If used with a context
 * the particular data is resolved automatically and the page is extended by a tab. Contexts
 * are currently Application, Device, Group, Tenant and User. Note: All components used here
 * needs to be used as EntryComponent!
 * This example will add a device tab with all the context information as well as a randomly
 * guarded context tab.
 *
 */
const routeHooks = [
  hookRoute([
    {
      path: 'context',
      context: ViewContext.Device,
      loadComponent: () =>
        import('./device/device-tab-context.component').then(m => m.DeviceTabContextComponent),
      label: 'Context',
      priority: 1000,
      icon: 'bell'
    },
    {
      path: 'info',
      context: ViewContext.Device,
      loadComponent: () =>
        import('./device/device-info.component').then(m => m.DeviceInfoComponent),
      label: 'Info',
      priority: 0,
      icon: 'info',
      /**
       * An example of an route guard which randomly activates
       * the child route. See Guards documentation from Angular
       * for more details.
       */
      canActivate: [RandomGuard]
    }
  ])
];

Regards,
Tristan

1 Like

Hi Tristan!

Thank you, the solution was to use ViewContext!
I’ve updated my appRoutes (used by hookRoute) to:

        {
            path: `config/tab`,
            context: ViewContext.Device,
            
            label: `→ ${tab.label}`,
            priority: tab.priority,
            component: TabBarComponent,
        }