Page Comparison

In addition to creating a widget using widget generation wizard, you can implement your own custom widgets and use them within the Dashboard portal.

Tip

If you want to refer the source of a sample widget to develop your custom widget, you can find the available sample widgets herein the WSO2 Stackblitz account.

For instructions to create your custom widget by editing a sample widget, see Using Sample Widgets to Create Custom Widgets.

This section explains:

How to write a custom widget for the Dashboard portal
The features that are provided for widget developers in the Dashboard portal

...

Copy following content to package.json and webpack.config.js respectively. Webpack is required for building a widget.

Code Block

language	js
firstline	1
title	package.json
collapse	true

{
    "name": "hello-world-widget",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "react": "^16.1.1",
        "react-dom": "^16.1.1"
    },
    "scripts": {
        "build": "webpack -p"
    },
    "devDependencies": {
        "webpack": "^3.5.6",
        "ajv": "^5.2.2",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-register": "^6.26.0",
        "copy-webpack-plugin": "^4.2.0",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6"
    }
}

Code Block

language	js
firstline	1
title	webpack.config.js
collapse	true

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        index: './HelloWorld.jsx'
    },
    output: {
        path: path.resolve(__dirname, './dist/HelloWorld/'),
        filename: 'HelloWorld.js'
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                use: [{loader: 'html-loader'}]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015', 'react']
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
                use: ['url-loader']
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}]
            }

        ]
    },
    plugins: [
        new CopyWebpackPlugin([
            {from: path.resolve(__dirname, './src/resources/')}
        ])
    ],
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.scss']
    }
};

Now copy the following content into HelloWorld.jsx under src directory. This contains all the logic for our widget.

Code Block

language	js
firstline	1
title	HelloWorld.jsx
collapse	true

import React, { Component } from 'react';

class HelloWorld extends Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

global.dashboard.registerWidget('HelloWorld', HelloWorld);

Info

Note that we have registered the react component as a widget in the Dashboard portal by calling the registerWidget function where the first argument is the ID you want to register your widget, and the second argument is the react component.

global.dashboard.registerWidget('HelloWorld', HelloWorld);

Dashboard portal requires few meta information regarding the widget in order to identify it. <WIDGET_ROOT>/src/resources/widgetConf.json file contains this meta information. When building the widget this configuration file gets copied into the final widget directory. Add the following content into the widgetConf.json file.
Code Block
language js
firstline 1
title widgetConf.json
{ "name": "HelloWorld", "id": "HelloWorld", "thumbnailURL": "", "configs": {} }
Now the source of the widget is complete. To install the dependencies required to to build your widget, navigate to the <WIDGET_ROOT> directory and issue the following command.
Code Block
language bash
npm install
Go to the <WIDGET_ROOT> directory and issue the following command to build the widget.
Code Block
language bash
npm run build
Once the build is successful the final widget directory is created in the <WIDGET_ROOT>/dist directory. Copy the <WIDGET_ROOT>/dist/HelloWorld directory into the <SP_HOME>/wso2/dashboards/deployment/web-ui-apps/portal/extensions/widgets directory.
Restart WSO2 Stream Processor.
Now log in to the Dashboard portal and create a new dashboard .
Info
For instructions to access the Dashboard Portal, see Visualizing Data.
For instructions to create a new dashboard, see Creating New Dashboards.

You can view the newly created HelloWorld widget in the widget listing panel of the Dashboard Designer.

...

Access the data provider configurations in <SP_HOME>/deploment/web-ui-apps/portal/extensions/widgets/<WIDGET_NAME>/widgetConf.json file as specified in Accessing Widget Configuration.

Use the base widget API to create the WebSocket connection. For this, you can use the following APIs:

Subscribe to the endpoint

API Syntax	`super.getWidgetChannelManager( ).subscribeWidget(<Widget id>, <Call back method to handle data>, <data provider configs>)`
Example	`super.getWidgetChannelManager()` `.subscribeWidget(this.props.id , this.handleDataReceived , dataProviderConfigs));`

Unsubscribe from the endpoint

API Syntax	`super. getWidgetChannelManager(). unsubscribeWidget(<Widget ID>);`
Example	super.getWidgetChannelManager().unsubscribeWidget(this.props.id);

Versions Compared

Old Version 22

New Version Current

Key