Configure / Change UI of device-management

, , ,
#1

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

image
image941Ă—545 24.1 KB

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…

image
image1608Ă—913 102 KB

Any ideas … ?

Thanks in advance.
BR Manfred

#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