Creating Custom Widgets

Developing Custom Widgets is the way to go to quickly customize a the web client. It allows to provide widgets that will be configured and used in one or more Views or Dashboards. The generated projects contain a sample widget that is mentioned in this documentation, under the following folder:

my-project/web/src/app/modules/sample-widget

Platform widgets are developed using Angular framework and Clarity HTML/CSS framework. If you are not familiar with Angular development here are some useful links:

The Platform allows you to configure your application by creating and organizing Dashboard and Custom Views. Dashboard and Custom Views are configured to use Custom Widgets.

The Platform Web Client Library makes easy developing and integrating a Custom Widget by providing a set of APIs. For more details, please refer to Section Understanding the Web Client Library APIs.

The following diagram exposes the available Interfaces and Classes to implement Custom Widgets.

Interfaces and Classes Diagram

This documentation examples show how to address different use cases with the Platform APIs implementing a sample widget. The following topics are mentioned with this sample widget example.

  • Create a Custom Widget using Angular Component.

  • Packaging an Angular Module with a Custom Widget.

  • Custom Widget configurations.

  • Custom Widget model and data loading.

  • Usage Scenario API to fetch and store scenario metadata.

  • Usage of Data API to query scenario data.

  • Available Platform APIs.

In any case, to create a Custom Widget, you need a few things:

  • One Angular Component that implements GeneWidget Interface

  • One Manifest describing the Custom Widget

  • Package and Register the component through an Angular Module