How to create a custom widget and integrate it into our existing environment

Hi Samanyu,

with the release of Cumulocity 10.16. the UI-Plugins feature will be introduced, which allows you to easily extend default applications such as the Cockpit application with your own custom plugins. @Stefan_Witschel already linked to the official documentation. There is also this article The power of micro frontends – How to dynamically extend Cumulocity IoT Frontends, which provides a first introduction to this topic. I’m currently working on the 5th part of the tutorial series, which is about providing a widget as a UI-plugin.

At the moment, to extend the Cockpit with your custom widget, you need to create a copy of the Cockpit application:

npx @c8y/cli@next new cockpit

and scaffold form the cockpit application:

image

In your cloned Cockpit application, you need to copy your widget and add a reference to the module of your widget in the app.module. Once you build and deploy the clone of the Cockpit application, it will override the existing Cockpit application including the widget.

Best regards
Christian

1 Like