How To: Create Custom Dashboard Widgets

Note: This article applies to version 11.2.x of the portal and higher

Adding a custom Dashboard Widget to Dashboard Pages

Add and define the widget in CustomSpace/custom.js. For this step you may want to create a separate file to contain the widget definition.
Define the Edit interface in an html file in CustomSpace [optional]. In order for the widget to have a configuration screen similar to the existing dashboard widgets, you will need to create an html file and pass the path in as the Edit interface parameter.
Add the widget to a dashboard page

Add and define the widget

To add a custom dashboard widget, register it with app.custom.dashboard via the add function like so (in custom.js):

app.custom.dashboard.add( WidgetName, WidgetTitle, WidgetDescription, widgetFunctionDefinition, path to edit interface .html)

WidgetName

The widget name should not contain spaces or punctuation. This name will be the widget type that is applied to the widget and will be a container for all the widget functionality on the dashboard page.

WidgetTitle

This is the title that will be displayed in the widget list when adding a new widget. This will also be the default title of a new instance of the custom widget.

WidgetDescription

This is the description of the widget that will be displayed in the widget list when adding a new widget.

WidgetFunctionDefinition

This is the function that will execute when the dashboard page is loaded or the widget configuration is changed. The function can receive a single parameter that will be the DOM element for the widget instance. For example:

function(widget) {
console.log(widget)
}

Edit Interface Path

This is the path to the html for the edit interface that is displayed when clicking the edit cog on an instance of the custom widget.

Widget Configuration

To save values, between the editor and the widget itself, you can access the widget's configuration from the edit file like this:

var config = $('.modal-body').data('$scope')['$parent'].definition.config;

And to access that configuration from the widget itself, use the following:

var widgetConfig = $(widget).data("$scope").definition.config;

The widget's global config should also be stored in the edit pages data scope using these lines:

var widget = app.custom.dashboard.getConfig('TestWidget');
var widgetContainer = $('.modal-body').data('$scope')['$parent']['$parent'];
widgetContainer.widget = widget;