Dynamic Widget Scripts

[edselv]

Download: GitHub Link

Version: 1.0.0

Introduction:

This article explains how to install the plug-in and how to interact with the js and configuration file.

Purpose/Benefits:

This plug-in will add or change change the current script applied to widgets on a dashboard to a script specified by the user. The user can also specify different scripts to apply to a widget depending on the user's group.

How To Install and Configure the Plug-In

Step 1 - Add The Plugin:

You can download the plug-in using the link above. Once dowloaded, unzip the file. Within the Admin tab, navigate to System Management >> File Management >> plugins and upload the 'DynamicWidgetScripts' folder into the directory.

Step 2 - Decide if You Will Use Dynamic Group Functionality:
This plug-in allows for dynamic functionality to apply different scripts based on a user's group. This functionality is ON by default. If you would like to use this functionality please proceed to step 3. If you do not want to enable this feature, within the plug-in folder, in the  'changescripts_allwidgets.6.js' file, set the 'useGroups' variable to false.

Step 3 - Setup the Config File:

Within the plug-in folder ('DynamicWidgetScripts') open the 'config.js' file. Set the group name(s) to be effected by the plug-in under the 'groupName' variable as a string (do not include the [ ] characters). You may create and add multiple config objects into the config file, depending on the number of groups.

Step 4 - Setup the Widget Script:
If you ARE using Dynamic Groups

In the 'config.js' file, within the 'defaultConfig' object, under 'wScript', specify the script to be applied to the widgets.

If you ARE NOT using Dynamic Groups

In the 'config.js' file, under the 'wScript' variable NOT within the 'defaultConfig' object, specify the script to be applied to the widgets.

Example Script:
The config file comes with a default script that will be applied to your widgets.

e.result.plotOptions.series.dataLabels.style.color = 'green'; //change data label color
e.result.plotOptions.series.dataLabels.style.fontSize = '12px'; //change data label size
e.result.plotOptions.series.dataLabels.style.fontWeight = 'bold'; //bold data labels
e.result.plotOptions.series.dataLabels.allowOverlap = true; //allow data label overlap​

Additional widget settings can be changed apart from what is listed here. For reference as to what settings can be adjusted, please see HighCharts API documentation here: https://api.highcharts.com/highcharts/.

Step 4 - Apply the changes

You can apply the changes by simply refreshing your add-ons page within the admin tab and then refreshing the dashboard.

In-Action Example:

Group 1 View:

Group 2 View: 

Notes (Version 1.0.0):

You can add multiple groups and scripts (one per group).

Release Notes:

23-December-2021: Initial Release