@c8y/apps/tutorial/dashboard/service-dashboard.component.html

Cumulocity IoT applications

<c8y-title>Service dashboard</c8y-title>

<div class="card">
  <div class="card-block">
    <p>
      You can define your own service views. To do that just declare your component with the
      <code>HOOK_ROUTE</code> hook using the <code>ViewContext.Service</code>context. For example,
      you can use a dashboard component to allow for further customization of your service details
      view:
    </p>
    <pre ngNonBindable>
@NgModule(&#123;
    ...
    providers: [
       ...
        &#123;
        provide: HOOK_ROUTE,
        useValue: [
            &#123;
            path: 'info',
            context: ViewContext.Service,
            component: ServiceDashboardComponent,
            label: 'Service info',
            priority: 900,
            icon: 'rocket'
            &#125;
        ],
        multi: true
        &#125;
    ]
&#125;)
    </pre>
  </div>
</div>

<c8y-context-dashboard
  [name]="name"
  [defaultWidgets]="defaultWidgets"
  [context]="context"
  [canDelete]="false"
></c8y-context-dashboard>