# Configure / Change UI of device-management

**URL:** <https://community.cumulocity.com/t/configure-change-ui-of-device-management/3487>\
**Category:** Forum\
**Tags:** device-connectivity, cumulocity\
**Created:** [July 20, 2022, 11:01am UTC](https://community.cumulocity.com/t/configure-change-ui-of-device-management/3487 "2022-07-20T11:01:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![strasser.manfred](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/strasser.manfred/32/32198_2.png) [@strasser.manfred](https://community.cumulocity.com/u/strasser.manfred)\
**Post date:** [July 20, 2022, 11:01am UTC](https://community.cumulocity.com/t/configure-change-ui-of-device-management/3487/1 "2022-07-20T11:01:30Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/5/c/5c3a6a0b199df352713bf38bccef316300002b69.png)

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](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/d/2/d26550d53a241dc5fb838da5a12a6e1b0e61eef2.png)

Any ideas … ?

Thanks in advance.  
BR Manfred

---

<div class="post-metadata">

**Author:** ![Christian\_Guether1](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christian_guether1/32/14848_2.png) [@Christian\_Guether1](https://community.cumulocity.com/u/Christian_Guether1)\
**Post date:** [July 21, 2022, 6:20am UTC](https://community.cumulocity.com/t/configure-change-ui-of-device-management/3487/2 "2022-07-21T06:20:26Z")

</div>

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.

```javascript
{
      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](https://community.cumulocity.com/t/add-custom-fragment-to-the-device-details/7088/7). 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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [October 19, 2022, 6:20am UTC](https://community.cumulocity.com/t/configure-change-ui-of-device-management/3487/3 "2022-10-19T06:20:35Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.