Creating Custom Widgets In Stream Processor Dashboard — Part 1

sandalu kalpanee

Hey there!!!

Today I will be giving you some idea on creating custom widgets in the Stream Processor Dashboard. But before heading towards the main topic, I want you guys to study about the WSO2 Stream Processor product ( Mainly about its dashboard profile. ) since we are going to work on it. —

( Impt. — I will be using short form ‘SP’ for Stream Processor )

Let’s Start

In this article, I’m taking an example from the API Manager Analytics dashboard. API Manager Analytics dashboard widgets fetch data from two databases namely WSO2AM_DB and WSO2_STATS_DB. ( No need to worry about the databases mentioned here, just get the idea of how the data fetching process going on so that you can use the procedure to fetch data from any data source. )


To start the Dashboard Portal, run one of the following commands from the <SP_HOME>/bin directory:

  • On Windows: dashboard.bat — run
  • On Linux/Mac OS: sh

( APIM Analytics Pack is a cutdown version of SP. So, if your requirement is to create or modify the APIM Analytics dashboards, please use APIM Analytics Pack. )

Once the server has started, use one of the following URLs to access the Dashboard Portal:

Now you will be prompted for a login to the dashboard. Use your own credentials or use the default admin login credentials (username: admin password: admin)

You will get the main UI of the portal with the set of existing dashboards.

Click ⊕ to open the Create a Dashboard page. Next click Create Dashboard to open the Dashboard Designer wizard.

[ Main UI Of Portal]

In the Create a Dashboard page, enter information as follows:

Click Add to save the dashboard. The dashboard is created and now you are redirected to the home page of the dashboard.

This will be the dashboard which we gonna fill by using our custom widgets. (Please note we can also use the widgets comes in default pack and the widgets we create using the widget generation wizard)

The Directory Structure

I have taken the example widget as TopAPICreators. This widget will list down the API Creators who have created the highest number of APIs and their created API count. The directory structure of TopAPICreators widget should be as below.


The syntax of the file is in JSON format where the key is the name of the package and the value is the version of the package to be used.

I have added the following dependencies. But this may differ according to the package libraries you are going to use.

Impt. — if you use ~ in front of the version number it means to install the version given or the latest patch version. If you use ^ in front of the version it means to install the version given or the latest minor or patch version.

~ 3.0.2 ➜ install version 3.0.2 or the latest patch version such as 3.0.4.

^ 3.0.2 ➜ install version 3.0.2 or the latest minor or patch version such as 3.1.0.



Webpack won’t require you to use a configuration file. However, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production. Therefore, you have to extend this functionality, for this, you have to create a webpack.config.js file in the root folder and Webpack will automatically use it.

The directory structure of TopAPICreators widget after the build should be as below.



This is the file which carries the meta information of the widget. When building the widget this file gets copied into the final widget directory. The file holds the widget ID, widget name and the configurations.

I have included two main configs for my widget as;

  • “pubsub” — To mention whether the widget is a publisher/subscriber in the publisher-subscriber concept.
  • “providerConfig” — To mention the data source and the query from which the information is fetched. We have the ability to write many queries here and select the specific query in the runtime. And also we can use query templates in the default query and assemble it in the runtime.

I have used another config named “options” in which I have provided the header removing facility to the widget. So, the user has the option to go with the header or remove it.


Now we have finished most of the Custom widget coding. In the next article, I will share you how to do the rest of the “TopAPICreators” custom widget code. Look forward to seeing you there!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade