How to install Extension Packages in Cumulocity IoT UI Applications?

Introduction

Extension Packages empower the loading of features at runtime, enabling the extension of any Web SDK-based web application without the necessity of rebuilding the entire application.

Extension Packages consist of two types of applications:

  1. Plugins, such as widgets, facilitate the extension of existing applications without requiring rebuilding.
  2. Blueprints, which are collections of multiple UI functionalities hosted by the platform, allowing the construction of new applications from scratch.

This approach leads to improved modularity, reusability, and scalability, providing a more flexible and efficient environment for Cumulocity IoT.

Available Extensions

At the time of writing this article, the Cumulocity community offers over 40+ extensions that can be installed in Cockpit, Device Management, and other areas, allowing users to enhance the functionalities of their applications.

For example, Bookmark Widget allows you to bookmark devices to the navigator to access them quickly.

Many widgets created by Global Presales for Application Builder have also been released as UI Plugins.

How to Install

From 10.16 onwards, you can view a list of available plugins in administration. Follow these steps

  1. Navigate to Cumulocity > Administration > Ecosystem > Applications > Packages.
  2. Browse through the list of available extension packages and click on the extension name
  3. Check the list of available plugins within the package
  4. Click on “Install” to add the plugin to your custom application (cloned cockpit or any other custom app).

Here is a short GIF showcasing how to install as well as uninstall a plugin:
How to install plugin

An alternate way of installing the plugins is to directly go to the custom application and install it via the plugins section as highlighted in the below screenshot.

Some Cool Things Extension Packages Can Do​

Extensions are versatile and can extend beyond widgets. They find utility in various UI functionalities, and here are some examples:

  • Device Replacement Wizard​: An extension for Device Management app that allows to replace devices via a wizard.​
  • Dynamic MQTT Mapping Service​: Coupled with microservice, use it to connect to any MQTT broker and map any JSON-based payload dynamically to C8Y IoT Domain Model in a graphical way.​
  • Weather Forecast Widget: Displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI

These examples showcase the power and flexibility of extensions, enabling developers to create rich and dynamic UI experiences in their applications.

Useful links | Relevant resources

Tech Community Event with Recording: Microfrontends for Cumulocity IoT: Extending solutions with the power of UI plugins|

Other Tech Community Article
The power of micro frontends – How to dynamically extend Cumulocity IoT Frontends

How to install a Microfrontend Plugin on a tenant and use it in an app?|

Relevant IoT Guides
Tutorial: Add a Custom Widget with Plugin

10.16 IoT Guides for Extension packages

2 Likes

If you’re looking for the Merry Christmas Extension, proceed to your Cumulocity Tenant > Administration > Ecosystem > Extensions. Locate the extension named “Merry Christmas” and try installing it into any custom or cloned application.

1 Like