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.

...

Clone the WSO2 carbon-dashboards repository to your machine.
Copy the HelloWorld widget you created to the carbon-dashboards/samples/widgets directory.

To import the channel manager to access the database, you need to use the WidgetChannelManager. To do this, create a separate file named ExtendedWidget as shown below.

Code Block

import React from 'react';
import Widget from '@wso2-dashboards/widget';
import WidgetChannelManager from '../../../../components/dashboards-web-component/src/utils/dashboard-channel/WidgetChannelManager';

let widgetChannelManager = null;

export default class ExtendedWidget extends Widget {

    constructor(props) {
        super(props);
    }

    getWidgetChannelManager() {
        if(!widgetChannelManager) {
            widgetChannelManager=new WidgetChannelManager();
        }

        return widgetChannelManager;
    }

}

Update the HelloWorld.jsx file as shown below.

Info

The react-vizgrammar module is a library that is used to create the charts in the widget named ExtendedWidget that you previously created. To add the config, metadata and data fields of the table, you can find the required instructions in react-vizgrammar - Table Chart Samples.
Here, console.info is the action of the row click. You can use the required function that is related to the second widget as the handleData function in your implementation.

Code Block

import React, { Component } from 'react';
import ExtendedWidget from './ExtendedWidget';
import VizG from 'react-vizgrammar';

class HelloWorld extends ExtendedWidget {
    constructor(props) {
         super(props);


         this.tableConfig = {
             //add table configues 
         };

         this.metadata = {
             //add meta data
         };

         this.data = [
             //add table data here
         ];

         this.handleData = this.handleData.bind(this);
    }

    render() {
        return (
            <VizG config={this.tableConfig} data={this.data} metadata={this.metadata} onClick={this.handleData} />
        );
    }

    handleData(row) {
        console.info(row);
    }
}

global.dashboard.registerWidget('HelloWorld', HelloWorld); //(widgetId,reactComponent)

If you consider the publisher-subscriber concept, the widget with the table is a publisher and the widget that triggers the table action with a row click is a subscriber. To define this:
- Open the widgetConf.json file of the publisher widget and change the pubsub type to publisher as shown below.
  Code Block
  { "name": "HelloWorld", "id": "HelloWorld", "thumbnailURL": "", "configs": { "pubsub": { "types": ["publisher"] } } }
- Similarly open the widgetConf.json file of the subscriber widget and change the pubsub type to subscriber.
Navigate to the <WIDGET_ROOT> directory and issue the following command to build the widget.
npm run buildOnce the build is successful, the widget is created in the <WIDGET_ROOT>/dist directory.
Copy the <WIDGET_ROOT>/dist/HelloWorld directory and place it in the <SP_HOME>/wso2/dashboards/deployment/web-ui-apps/portal/extensions/widgets directory.

...

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 19

New Version 20

Key