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

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

Cumulocity

Is your question related to the free trial, or to a production (customer) instance?

Free Trial

What are you trying to achieve? Please describe it in detail.

Hi, I want to create a widget and integrate it to my existing environment. I don’t know if its possible so can you please let me know if I can create one widget and use it in my environment. Please point out me to some documentations for the same.

Best Regards,
Samanyu

Hi Samanyu,

there is tutorial series, which describes how to build your own custom widget: Cumulocity IoT Web Development Tutorial - Part 1: Start your journey.

Best regards
Christian

1 Like

Hi Christian,

I am following your series only and I have created my widget, but our widget runs on localhost. I know I can deploy my app on cumulocity but I want to know If I can integrate my widget into my existing cumulocity environment. Like if I want to add my custom widget into Cockpit of my xyz environment, so I would be able to do that. So, I just want to know if this functionality is available.

Regards,
Samanyu

There is documentation about that: Micro frontends - Cumulocity IoT Guides in addition to Christians Blog Series.

1 Like

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

Thank you guys for the docs and explanation.

Regards,
Samanyu

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