Problem with templates after SDK update from 1005.7.19 to 1011.0.38

Product/components used and version/fix level:

Cumulocity device management application, web-sdk 1005.7.19

Detailed explanation of the problem:

We are using a customized (hybrid) device management application with components written in AngularJS and Angular. The application has a dashboard which uses some widgets written in Angular. The dashboard itself is a plugin which is created within the AngularJS part:

  "name": "Cockpit Home",
  "ngModules": [
  "category": "",
  "icon": "dashboard",
  "color": "#F03F0F",
  "description": "This plugin is a device operations dashboard.",
  "js": [
  "folderName": "home",
  "appsInclude": [


(function () {
  'use strict';

  const MODULE_NAME = 'dmg.c8y.deviceOperationsDashboard';

  angular.module(MODULE_NAME, [])

  /* @ngInject */
  function configBlock(
  ) {
    const DASHBOARD_TEMPLATE = '<!-- Workaround to make Widget tranparent START--><style>.panel-content-transparent {background-color: rgba(0,0,0,0);box-shadow:none;}</style><!-- Workaround to make Widget tranparent END--><c8y-dashboard-gridstack set-page-title="true" name="{{vm.dashboardName}}" default-children="vm.children" set-global="vm.isGlobal"></c8y-dashboard-gridstack>';
    const DASHBOARD_NAME = 'deviceOperationsDashboard';
    const DASHBOARD_IS_GLOBAL = true;
          "col": 6,
          "configTemplateUrl": "widget-template-config-devicesOnlineHistory.widget.html",
          "name": "devicesOnlineHistory.widget",
          "_x": 4,
          "_y": 1,
          "position": 4,
          "title": "Online History",
          "config": {
              "showNumberOfDaysAgo": 60,
              "selectedView": {
                  "displayName": "Bar chart of device online history",
                  "name": "barchart"
          "_width": 4,
          "_height": 4,
          "templateUrl": "widget-template-devicesOnlineHistory.widget.html"

    /* @ngInject */
    function DeviceOperationsDashboardController() {
      this.dashboardName = externalConfig().dashboardName || DASHBOARD_NAME;
      this.children = externalConfig().dashboardChildren || DASHBOARD_CHILDREN;
      this.isGlobal = DASHBOARD_IS_GLOBAL;

    function externalConfig() {
      return c8yConfig[MODULE_NAME] || {};

      priority: 10000,
      name: gettext('Operations Dashboard'),
      icon: 'cogs',
      path: '/deviceOperationsDashboard'

    c8yTitleProvider.addTitle('deviceOperationsDashboard', {
      data: { title: 'Device Operations Dashboard' }

    $routeProvider.when('/deviceOperationsDashboard', {
      template: DASHBOARD_TEMPLATE,
      controller: DeviceOperationsDashboardController,
      controllerAs: 'vm',
      resolve: {
        wait: () =>

The (angular) widgets used by the dashboard are imported in the app.module.ts and registered as provider:

providers: [
      provide: HOOK_COMPONENTS,                         // 2.
      multi: true,
      useValue: {
        id: 'devicesOnlineHistory.widget',                        // 3.
        label: 'Devices Online History Widget',
        description: 'Shows a bar chart of online devices for the last days.',
        component: DevicesOnlineHistoryWidgetComponent,                         // 4.
        configComponent: DevicesOnlineHistoryWidgetConfigComponent,
        data: {
          ng1: {
            options: {
              noDeviceTarget: true,

We now try to update the web-sdk version to 1011.0.38. After the update the dashboard is not working anymore since it complains about missing template files.
When I check the debugger of the browser I can see that those files are not requested at all as long as we use the old web-sdk.

Error messages

Does anybody know where these template errors come from and how to solve it? I guess it is somehow related to the update of the angular version which was increased to 11.2.2 as part of the websdk update.

1 Like

Hi Christoph,

with the 1006.6.0 release the dashboard functionality was migrated from angularJS to angular (1006.6.0 release notes). The current way of how you are adding your dashboard is still implemented in angularJS and as far as I know you won’t be able to use an angular widget on an angularJS dashboard.

You may want to look into the examples of the tutorial application on how to add a dashboard using angular.

Also consider upgrading to a version that is still officially supported as 1011.0.38 is out of support.


Hi Tristan,

thanks for your feedback. Do you have a link where I can find the info for

You may want to look into the examples of the tutorial application on how to add a dashboard using angular.

You can scaffold the tutorial application in a similar way like you do it for e.g. cockpit:

c8ycli new tutorial tutorial -a @c8y/apps@1011.0.38

This is also covered in multiple places over here: Tutorials - Cumulocity IoT Guides

Hi Tristan,

I added now the CockpitDashboardModule to my app.module.ts and also our custom widgets. Finally I get a “Home” Menu with the standard dashboard and I can also add our custom widgets. Therefore I guess they are added correct now.
Where do I need to add the dashboard configuration which configures the layout of our dashboard? It was previously defined in our AngularJS code.
Can you help me at this point?


Hi Christoph,

I’ve attached a zip file with an adjusted cockpit application which adds a “Device Operations Dashboard” in the angular way. (357.3 KB)


Hi Tristan,

thank you very much! This helped me a lot.
One hopefully final question: Do you know how to change the default grid column count of a dashboard? Currently it’s set to 12 and I want to change it to 10.

Thanks and best regards,

Hi Tristan,

one other question since I was not able to find it out from the tutorial app:
The navigation menu shows the “HOME” entry since I need to add the DashboardUpgradeModule and CockpitDashboardModule to the app.module.ts.
Do you know how I can remove this “HOME” menu entry again?


Hi Christoph,

1011 does not offer an option to set the number of columns for the ContextDashboardComponent.
You could set the number of columns using the DashboardComponent’s columns input, but that is just meant to be used for static, non-configurable dashboards.

The home dashboard is part of the CockpitDashboardModule if you remove it, the dashboard should be gone.