Configure / Change UI of device-management

, , ,
2

Hi Manfred,

the Device Management detail pages are rather static and preconfigured. There isn’t any easy solution to modify these pages.

  1. Option
    Use the Web SDK and the HOOK_ROUTE to register your custom Info tab in the device context, e.g.
{
      provide: HOOK_ROUTE,
      useValue: [
        {
          context: ViewContext.Device,
          path: 'device-info',
          component: DeviceInfoComponent,
          label: gettext('Info'),
          priority: 10000,
          icon: 'asterisk'
        }
      ],
      multi: true
    }

In the DeviceInfoComponent you could implement your own layout and information which should be displayed.

  1. Option
    You could patch the existing component. I have described the basic steps to create patches in this post. To update the AssetNotes component (remove the icon), you would have to look here .\node_modules\@c8y\ng1-modules\asset-notes (it’s still an AngularJS component). Modifying the overall dashboard for the device info section (.\node_modules\@c8y\ngx-components\context-dashboard\device-info-dashboard\device-info-dashboard.component.d.ts.map) will be too complicated. It’s based on a context dashboard and mixes ng1 and Angular widgets.

I would probably go for option 1 and implement something custom.

Regarding your first question, I don’t see any issues with this approach.

Best regards
Christian

2 Likes