DEV Community

Tech Community for Software AG Tech Community

Posted on • Originally published at tech.forums.softwareag.com on

Cumulocity IoT Ecosystem enriched with new UI Extensions

New UI Plugins

In the last year more and more UI Plugins have been developed and released as part of the UI Extensions feature, which has been introduced with Cumulocity 10.16.0. UI Plugins are an important factor to expanding the platform’s self-service capabilities and making it more adaptable to the users. This article aims to spotlight several of these innovative UI Plugins, each build to extend Cumulocity’s capabilities and to streamline user experience. As we delve into the specifics of these plugins, we’ll uncover how they are transforming Cumulocity into a more flexible and user-centric IoT platform.

Tenant Option Management Plugin

Using the Tenant Option Management Plugin users can easily create, edit and delete tenant options. An option can be configured as encrypted and its value can either set to the type JSON or simple text. You can only see, edit and delete options you created using this plugin. All options created using this plugin are displayed in a list. Users can search, sort and filter for tenant options in this list.

List of Tenant Options in the Tenant Options Management Plugin

GitHub logo SoftwareAG / cumulocity-tenant-option-management-plugin

Easily create, edit and delete tenant options. You can configure an option as encrypted and can decided between text or JSON input.

Cumulocity IoT Tenant Option Management plugin

Easily create, edit and delete tenant options. You can configure an option as encrypted and can decided between text or JSON input.

Sample images

List all tenant options that were created on the tenant. You can search through, sort and filter all columns alt Tenant options grid example

Easily create text or JSON options. You can also encrypt the content of an option. alt Create tenant option example

JSON editor example alt Update of a tenant option with JSOn value example

Limitations

You can only see, edit and delete options you created using the plugin. (You can add existing tenant options using the import button.)

Features to come

  • (Bulk) Import and export of all options/ specific categories
  • Import by Template o dynamically show creation forms for c8y specific tenant options using formly o will ship with example template for Analytics Builder options

Versions

1.0.x - compatible with UI v. 1017 In the future: 2.0.x - compatible with UI v. 1018

How to start Change…

Favorites Manager Plugin

The Favorite Manager allows you to quickly access your favorite assets by adding them to your personal favorites list. You can mark any device, group or Digital Twin Manager asset as your favorite. No special permissions are needed to use this plugin, as the list of favorites is managed per account in the current user object. Therefore, favorites are independent of individual sessions and the browser being used for a session.

GitHub logo SoftwareAG / cumulocity-favorites-manager-plugin

Mark any asset or device as a favorite to quickly access these in your personal favorites list

Favorites Manager UI Plugin

General

Access your favorite assets quickly by them to the your personal favorites list. You can mark any device, group or Digital Twin Manager asset as your favorite. No special permissions are needed to use this plugin, as the list of favorites is managed per account in the currentUser object. Therefore, favorites are independent of individual sessions and the browser being used for a session.

Important: This Favorites Manager plugin will not work for users, which are managed via SSO (e.g. Azure Active Directory). The corresponding user object of these SSO users is immutable and can't be updated. File an issue if you require this plugin for SSO users.

alt manage favorites

Filter your favorite list to easier find your favorites you are looking for.

alt filter favorites

Local development

Recommended version

  • node v 14.x
  • npm v 6.x

Plugin versions

  • Angular v 14.x
  • WebSDK v 1017.0.x

How to start Change the target…

Events Graph Plugin

Show event occurrence in a timeline chart, using echarts profiling example approach (see Examples - Apache ECharts). For the different texts a color can be chosen. (Currently only works in a device dashboard!)

Shows “duration” of every event by assuming that a state is finished once the next state starts - an event always ends with the submission of the next event (of the same type, but different text). The chart shows a view of the past x hours and helps visualizing the state changes for a specific event type.

  • choose color for different states
  • select timeframe (max. 24 hours in the past)
  • states can be deselected in the legend
  • chart is zoomable

GitHub logo SoftwareAG / iot-cumulocity-events-graph

The Event Graph Widget Plugin displays event occurrence in a timeline chart, using echarts profiling example approach. For the different texts a color can be chosen. (Currently only works in a device dashboard!)

IoT Cumulocity Events Graph package

Events Graph widget plugin

Show event occurence in a timeline chart, using echarts profiling example approach (see https://echarts.apache.org/examples/en/editor.html?c=custom-profile). For the different texts a color can be chosen. (Currently only works in a device dashboard!)

Features

Shows "duration" of every event by assuming that a state is finished once the next state starts - an event always ends with the submission of the next event. The chart shows a view of the past x hours and helps visualizing the state changes for a specific event type.

  • choose color for different states
  • select timeframe (max. 24 hours in the past)
  • states can be deselected in the legend
  • chart is zoomable

Sample images

Easily check which events occured when alt Events graph example

The chart can be zoomed alt Show zoom capability

Interactive legend alt Show legend interaction

Limitations

  • only works for single devices
  • only works for single event type, visualising the different event texts as bars
  • no realtime

Note Widget Plugin

Use the Note Widget to easily manage notes for devices and assets. Users can add new notes or extend existing ones. These notes will be shared with all users who have access to the related device/asset and its dashboards. Each note update is stored as an event for the corresponding device/assets. Using the log section users can have a look at past notes.

GitHub logo SoftwareAG / cumulocity-note-widget-plugin

Easily manage and share notes for your device and asset

Cumulocity Note Widget Plugin

General

Use the Note Widget to easily manage notes for devices and assets. Users can add new notes or extend existing ones. These notes will be shared with all users, who have access to the related device/asset and its dashboards. Each note update is stored as an event for the corresponding device/assets. Using the log section users can have a look on past notes.

Important: Users need to have READ and ADMIN permission on the Events API, as notes and updates on notes are stored as events.

alt notes widget

Local development

Recommended version

  • node version >= 16.x
  • npm version 6.x

Plugin versions

  • Angular version 14.x
  • WebSDK version 1017.0.x

How to start Change the target tenant and application you want to run this plugin on in the package.json.

c8ycli server -u https://{{your-tenant}}.cumulocity.com/ --shell {{cockpit}}

Keep in mind that this plugin needs to have an app (e.g. cockpit) running…

Layered Map Widget Plugin

Differentiates from the existing map widget by providing the ability to create multiple layers, showing markers based on specific filters. The user can for example create a layer to show markers of devices having critical alarms. As the query can be created dynamically, the user is free to create various kinds of filters/ layers. Powerful queries can be created with a simple UI, which lets you create the query parameters for a layer. Only devices matching your query will be shown for that layer. Layers can be selected and deselected on the map later. You can also choose whether layers should be selected by default. The widget is designed to scale well with a higher number of devices.

image

image

GitHub logo SoftwareAG / cumulocity-layered-map-widget-plugin

Plugin containing the advanced map widget. Displays a map with position markers for selected devices. Support for configuration of additional layers and custom markers.

IoT Cumulocity Layered Map Widget plugin

Cumulocity module federation plugin containing the Layered Map widget. By installing this plugin to a cockpit application, the user can choose this widget from the catalog.

Displays a map with position markers for devices with c8y_Position fragments. The user can create multiple layers using different queries:

  • fragment and value layer, e.g. show all devices with type = c8y_MQTTDevice
  • inventory query layer, e.g. show all devices with critical alarm count greater 0 and having custom fragment xyz
  • alarm query layer, show all devices for that at least one alarm exists matching the alarm query you create
  • event query layer, show all devices for that at least one event exists matching the event query you create

The map widget is designed to scale well also with higher count of devices. Position updates and changes regarding the layers are polled using bulk requests Markers can be configured…

Translation Manager

Using the Translation Manager Plugin you can easily manage your dynamic translations in Cumulocity IoT for all supported languages. Translations can be added and updated using the Translation table. Translations are globally available in all Cumulocity applications running on the same Cumulocity tenant via the public-options application and its options.json file.

GitHub logo SoftwareAG / cumulocity-translation-manager

Dynamically manage your translations in Cumulocity using the Translation Manager UI Plugin

Translation UI Plugin

General

Manage your translations in Cumulocity IoT for all supported languages easily using the Translation UI Plugin. Translations can be added and updated using the Translation table. Translations are globally available in all Cumulocity applications running on the same Cumulocity tenant via the public-options application and its options.json file.

The Translation UI Plugin automatically register a new navigation entry in the left side navigation menu. The Translation Plugin can be accessed by navigating to Settings -> Localization.

Important: If the Plugin is used in an application it needs to check if the public-options application exists. The public-options application is used to store and share translations to the different applications. In case the application doesn't exist, it will automatically be created in the Cumulocity tenant via the Translation UI Plugin. Creating this application requires Admin permission on Application management. Therefore, make sure the plugin is initally…


For any questions reach out to christian.guether@softwareag.com and hendrik.naether@softwareag.com.

Read full topic

Top comments (0)