CSBL - Library functions for dashboard interaction


Warning message

You can't delete this newsletter because it has not been sent to all its subscribers.



7. Library functions for dashboard interaction

It is assumed that you need to create a system of interfaces (dashboard) that allow the following interaction:

Following an event launched by a widget in dashboard A, dashboard B opens and is given the parameters necessary for a widget in dashboard B to retrieve data and display it.

For example, we could have a menu dashboard, with a table that will list certain devices (e.g., vehicles, batteries, users, etc.) and a card dashboard in which a set of widgets (time trends, bar plots, pie charts, etc.) ) will show the data collected for a specific device – see figure.
By clicking on a row of the table in the dashboard menu, the dashboard card will open and each widget will independently retrieve the data to be displayed.

To allow this interaction, the following two library functions have been implemented:

Note: Functions are automatically included in widgets, except for externalContent. In that case you need to explicitly specify the source js file to include, e.g.,


<script type='text/javascript' src='https://www.snap4city.org/dashboardSmartCity/js/widgetsCommonFunctions.js'>


taking care to specify the absolute path.


Function: openNewDashboard

The function, to be specified in the CK Editor of the More Option panel of a widget, has the following definition


function openNewDashboard(url, target){


     let a = document.createElement('a');

     a.target = target;

     a.href = url;





  • url: url of the dashboard to open, any parameters to be transmitted can be added in the queue as GET, for example, if we wanted to send the ServiceUri and the model of a device we would use

https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MzY3NA==&suri=' + <serviceUri> + '&model=' + <model>

  • target: how to open a new dashboard, e.g. _parent, _blank, etc.

Outputs: none

Effect: Opens a new page using the specified url and target

Function: getParams
The function, to be specified in the CK Editor of the More Option panel of a widget, has the following definition


function getParams(isIFrame = false){

     let queryString = null;


         queryString = window.parent.location.search;


         queryString = window.location.search;


     out_obj = {};

     const urlParams = new URLSearchParams(queryString);

     const entries = urlParams.entries();

     for(const entry of entries) {

         console.log(`${entry[0]}: ${entry[1]}`);

         out_obj[entry[0]] = entry[1];



     return JSON.stringify(out_obj);




  • isIFrame (default false): specifies whether the widget implementing the function is loaded in the dashboard as an I-Frame (e.g., externalContent) or not.


  • A JSON string containing the GET parameters retrieved from the url of the same dashboard


Example interaction
Supposing to have

By clicking on the button in dashboard A, dashboard B will open and the pie-chart will retrieve the data of a specified device and then display them

Code for actuator (e.g. impulse button)

function execute() {

   let suri = 'http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/prettoTestBattery03';

   let device = 'prettoBatteryTest03';

   let url = 'https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MzY3NA==&suri=' + suri + '&device=' + device;

   let target = '_blank';

   openNewDashboard(url, target);


Note: openNewDashboard must be included in the execute function as it must be invoked when an event is triggered by the actuating widget (e.g. the click on the button, or the selection of a row in the widgetDeviceTable, etc.)

When the button on dashboard A is clicked, dashboard B will open with the following url


Then, on dashboard B, a pie-chart will run the following code to fetch the data of the selected device and then display it.

Receiver code (e.g. pie-chart)


let params = JSON.parse(getParams());

let suri = params.suri;

let device = params.device;


passedData= [


         "metricId": 'http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/' + device,

         "metricHighLevelType": 'Sensor',

         "metricName": 'A',


         "serviceUri": suri,



         "metricId": 'http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/' + device,

         "metricHighLevelType": 'Sensor',

         "metricName": 'B',

         "metricType": 'energyNotAvailable',

         "serviceUri": suri,



         "metricId": 'http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/' + device,

         "metricHighLevelType": 'Sensor',

         "metricName": 'C',

         "metricType": 'energy discharged',

         "serviceUri": suri,




setTimeout(function() {


         type: "showPieChartFromExternalContent_w_AggregationSeries_3674_widgetPieChart35154",

         eventGenerator: $(this),

         targetWidget: "w_AggregationSeries_3674_widgetPieChart35154",

         passedData: passedData


}, 5000);


Note: to allow the widget to load data, you need to impose a delay on $('body').trigger() using for example setTimeout(). Otherwise the widget will hang and fail to load the data.