Hi,
I want to embed already developed “Add dashboard” action bar functionality into the application I am developing.
What I have based on is “tutorial application” which is created by angular cli. I have changed the navigator nodes and now I need to create default dashboards in each section. However, I can not find a way to do it. Here is my app.module.ts :
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule as ngRouterModule, Routes } from '@angular/router';
import { ExampleBreadcrumbFactory } from './factories/Breadcrumb';
import { ExampleNavigationFactory } from './factories/Navigation';
import { PerakendeComponent } from './src/perakende/perakende.component';
import { SadeComponent } from './src/sade/sade.component';
import { VolsoftComponent } from './src/volsoft/volsoft.component';
import { SaglikComponent } from './src/saglik/saglik.component';
import { LojistikComponent } from './src/lojistik/lojistik.component';
import { EnerjiComponent } from './src/enerji/enerji.component';
import { UretimComponent } from './src/uretim/uretim.component';
import { YonetimlerComponent } from './src/yonetimler/yonetimler.component';
import { FinansComponent } from './src/finans/finans.component';
import {
CoreModule,
RouterModule,
HOOK_BREADCRUMB,
HOOK_NAVIGATOR_NODES,
BootstrapComponent
} from '@c8y/ngx-components';
/**
* Angular Routes.
* Within this array at least path (url) and components are linked.
*/
const appRoutes: Routes = [
{
path: 'merkezi_yerel_yonetimler',
component: YonetimlerComponent
},
{
path: 'perakende',
component: PerakendeComponent
},
{
path: 'enerji',
component: EnerjiComponent
},
{
path: 'finans',
component: FinansComponent
},
{
path: 'saglik',
component: SaglikComponent
},
{
path: 'perakende/sade',
component: SadeComponent
},
{
path: 'perakende/volsoft',
component: VolsoftComponent
},
{
path: 'lojistik',
component: LojistikComponent
},
{
path: 'uretim',
component: UretimComponent
},
{
path: '',
redirectTo: 'perakende',
pathMatch: 'full'
}
];
@NgModule({
declarations: [
PerakendeComponent,
SadeComponent,
VolsoftComponent,
SaglikComponent,
LojistikComponent,
EnerjiComponent,
UretimComponent,
YonetimlerComponent,
FinansComponent
],
imports: [
BrowserAnimationsModule,
ngRouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true }),
RouterModule.forRoot(),
// Import the CoreModule to allow use of the `c8y-` prefixed components
CoreModule.forRoot(),
],
/**
* Use our predefined InjectionTokens and provide your own classes to extend behaviour
* and functionality of existing ones. Implement your own NavigationNodes, Tabs, Actions and Breadcrumbs
*/
providers: [
{ provide: HOOK_NAVIGATOR_NODES, useClass: ExampleNavigationFactory, multi: true},
{ provide: HOOK_BREADCRUMB, useClass: ExampleBreadcrumbFactory, multi: true}
],
/**
* Bootstrap your application with the BootstrapComponent which will use the `<c8y-bootstrap>`
* component to initialize the root application. Alternatively you can bootstrap
* a component of your choice and include that tag into its template or only reuse the given components
*/
bootstrap: [BootstrapComponent]
})
export class AppModule { }If I go with hybrid application approach using cockpit application extension, I am getting “Add dashboard” written on the top but it is not enabled for my custom navigator nodes. It is available for groups or devices, but altough it is seen in action bar when I click on my custom navigator node, it is not enabled. Here is my app.module.ts and ng1.ts files:
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule as ngRouterModule, Routes } from '@angular/router';
import { UpgradeModule, HybridAppModule, UPGRADE_ROUTES } from '@c8y/ngx-components/upgrade';
import { UpgradeModule as NgUpgradeModule } from '@angular/upgrade/static';
import { ExampleBreadcrumbFactory } from './factories/Breadcrumb';
import { ExampleNavigationFactory } from './factories/Navigation';
import { PerakendeComponent } from './src/perakende/perakende.component';
import { SadeComponent } from './src/sade/sade.component';
import { VolsoftComponent } from './src/volsoft/volsoft.component';
import { SaglikComponent } from './src/saglik/saglik.component';
import { LojistikComponent } from './src/lojistik/lojistik.component';
import { EnerjiComponent } from './src/enerji/enerji.component';
import { UretimComponent } from './src/uretim/uretim.component';
import { YonetimlerComponent } from './src/yonetimler/yonetimler.component';
import { FinansComponent } from './src/finans/finans.component';
import {
CoreModule,
RouterModule,
HOOK_BREADCRUMB,
HOOK_NAVIGATOR_NODES,
BootstrapComponent
} from '@c8y/ngx-components';
/**
* Angular Routes.
* Within this array at least path (url) and components are linked.
*/
const appRoutes: Routes = [
{
path: 'merkezi_yerel_yonetimler',
component: YonetimlerComponent
},
{
path: 'perakende',
component: PerakendeComponent
},
{
path: 'enerji',
component: EnerjiComponent
},
{
path: 'finans',
component: FinansComponent
},
{
path: 'saglik',
component: SaglikComponent
},
{
path: 'perakende/sade',
component: SadeComponent
},
{
path: 'perakende/volsoft',
component: VolsoftComponent
},
{
path: 'lojistik',
component: LojistikComponent
},
{
path: 'uretim',
component: UretimComponent
},
{
path: '',
redirectTo: 'perakende',
pathMatch: 'full'
}
];
@NgModule({
declarations: [
PerakendeComponent,
SadeComponent,
VolsoftComponent,
SaglikComponent,
LojistikComponent,
EnerjiComponent,
UretimComponent,
YonetimlerComponent,
FinansComponent
],
imports: [
BrowserAnimationsModule,
ngRouterModule.forRoot([...UPGRADE_ROUTES, ...appRoutes], { enableTracing: false, useHash: true }),
RouterModule.forRoot(),
// Import the CoreModule to allow use of the `c8y-` prefixed components
CoreModule.forRoot(),
NgUpgradeModule,
UpgradeModule
],
/**
* Use our predefined InjectionTokens and provide your own classes to extend behaviour
* and functionality of existing ones. Implement your own NavigationNodes, Tabs, Actions and Breadcrumbs
*/
providers: [
{ provide: HOOK_NAVIGATOR_NODES, useClass: ExampleNavigationFactory, multi: true},
{ provide: HOOK_BREADCRUMB, useClass: ExampleBreadcrumbFactory, multi: true}
],
})
export class AppModule extends HybridAppModule {
constructor(protected upgrade: NgUpgradeModule) {
super();
}
}import '@c8y/ng1-modules/core';
import '@c8y/ng1-modules/groupsHierarchy/cumulocity.json';
import '@c8y/ng1-modules/imageWidget/cumulocity.json';
import '@c8y/ng1-modules/assetPropertyWidget/cumulocity.json';
import '@c8y/ng1-modules/devicePropertyWidget/cumulocity.json';
import '@c8y/ng1-modules/imageWidget/cumulocity.json';
import '@c8y/ng1-modules/htmlWidget/cumulocity.json';
import '@c8y/ng1-modules/assetTable/cumulocity.json';
import '@c8y/ng1-modules/modbusWidget4/cumulocity.json';
import '@c8y/ng1-modules/scada/cumulocity.json';
import '@c8y/ng1-modules/dashboard2/cumulocity.json';
import '@c8y/ng1-modules/dashboardUI/cumulocity.json';
import '@c8y/ng1-modules/trafficLightWidget/cumulocity.json';
import '@c8y/ng1-modules/infoGauge/cumulocity.json';
import '@c8y/ng1-modules/dataPointTable/cumulocity.json';
import '@c8y/ng1-modules/eventList/cumulocity.json';