Configure / Change UI of device-management

Hi Community,
please see my following doubts.

What product/components do you use and which version/fix level?

Cumulocity
Backend: 1011.0.12
UI: 1010.0.24

Are you using a free trial or a product with a customer license?

License

What are trying to achieve? Please describe in detail.

We want to display some device information on the device-management page.
See this example

We will transfer all information via SmartREST to the platform and it will be stored in the device-object.

Question 1:
Using the top-most field (html enabled) to activate links - is there any drawback when I do it? Are there any future problems I don’t see?

Question 2:
Is it somehow possible to configure the setup of the device-manager UI?
e.g.

  • remove the green marked symbol, I would like it to disapear
  • Show map only if device has a location information

Basically, I would like to remove all red stuff and resize/position the green one.
I could also imagine an image for the device somewhere instead of the other elements…

Any ideas … ?

Thanks in advance.
BR Manfred

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