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