How to plugin a new feature in custom cockpit

1

Product/components used and version/fix level:

1018

Detailed explanation of the problem:

I have a custom cockpit application and I would like to plugin new feature to it. My goal is to develop one independent use case and integrate it in to the existing cockpit by adding one menu item under the side menu.
When this newly added menu item is clicked by the user it should navigate to the newly created independent use case. Do we have any reference or example for this use case ?

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

Production

Regards
Mohan

2

Hi @Mohan_Pathapataa,

This is pretty much standard functionality, which is showcased multiple times in the tutorial application. Have you checked it?

Regards,
Tristan

3

Yes, @Tristan_Bastian I have gone through the tutorial app by creating it with c8ycli I could see only how c8y/ngx-components being used. But here I got one example.

Regards
Mohan

4

The 1019+ versions of the Web SDK should cover this in detail, maybe you’ve checked a lower version?

Regards,
Tristan

5

Oh, may be here i missed it. I have checked with version 1015.0.249.

Regards
Mohan

6

@Tristan_Bastian I am not able to select the 1019 version here. How to create tutorial app with 1019 + to validate the feature ?

image

Do I need to create in this way ? instead of widget plugin i need to select tutorial ?

Regards
Mohan

7

You can find instructions for 1019+ over here:

8

Thanks for the reference @Tristan_Bastian
I have created one plugin for custom cockpit by setting application options and by help of feature module. This plugin has multiple pages like Create, Edit & view but not child components.

Feature Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { listreports } from './listreports.component';
import { createReport} from './createReport.component';
import { editReport } from './editReport.compnent';
import { viewReport } from './viewReport.component';
import { CoreModule, hookNavigator, hookRoute } from '@c8y/ngx-components';
import { NavigationFactory } from './reportconfig-manager.factory';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: 'my-reports',
    component: listreports
  },
  {
    path: "create",
    component: createReport
  },
  {
    path: "edit/:id",
    component: editReport
  },
  {
    path: "view/:id",
    component: viewReport
  }
];
@NgModule({
  imports: [
    CoreModule,
    CommonModule,
    RouterModule.forChild(routes)],
  exports: [],
  declarations: [AutomatedReportComponent, CreateReportComponent, EditReportComponent, ViewReportComponent],
  providers: [
    hookNavigator(NavigationFactory),
    hookRoute({
      path: 'my-reports',
      component: listreports
    }),
  ],
})
export class AutomatedReportModule { }

Navigation Factory file

import { Injectable } from '@angular/core';
import { NavigatorNode, NavigatorNodeFactory } from '@c8y/ngx-components';

@Injectable()
export class NavigationFactory implements NavigatorNodeFactory {
  constructor() { }

  private readonly FAVORITES_LIST_NAVIGATOR_NODE = new NavigatorNode({
    label: 'My Reports',
    path: 'my-reports',
    icon: 'email-document',
    priority: 2000,
    routerLinkExact: false,
  });

  get() {
    return this.FAVORITES_LIST_NAVIGATOR_NODE;
  }
}

Whenever I go my-reports path I can see that My Reports node is active under the side menu. when I navigate to other paths like createReport or Edit My Reports node is not in active state I tried by setting

routerLinkExact: false,

Version: 1018.0.240

Is there any other way to set that node active ?

Regards
Mohan

9

Hi @Mohan_Pathapataa,

you would usually structure your routes a bit different, e.g. like this:

const routes: Routes = [
  {
    path: 'my-reports',
    component: listreports,
    children: [
      {
        path: "create",
        component: createReport
      },
      {
        path: "edit/:id",
        component: editReport
      },
      {
        path: "view/:id",
        component: viewReport
      }
    ]
  }
];

or like this:

const routes: Routes = [
  {
    path: 'my-reports',
    children: [
      {
        path: '',
        component: listreports,
        pathMatch: 'full'
      },
      {
        path: 'create',
        component: createReport
      },
      {
        path: 'edit/:id',
        component: editReport
      },
      {
        path: 'view/:id',
        component: viewReport
      }
    ]
  }
];

Then the NavigatorNode with routerLinkExact: false, should work fine.

Regards,
Tristan

10

The reason behind I maintain separate routes is those are not exactly child routes to the parent one.

Those are individual pages if i mark it as children I should use router-outlet to render. In that case in the view will see both parent and child pages.

routerLinkExact: false is working if change router configuration to child routes. I will adjust my logic. Thanks @Tristan_Bastian

Regards
Mohan