Tutorial for the plugin can be found here


  1. Widget
  2. Datasource

Use cases

  1. When a custom datasource is necessary
  2. When a custom widget is called for in a separate portal - a plugin can be used to reuse the same widget across multiple portals. Note: the HTML widget is a custom widget but it is not automatically available in portals other than the original

Hosting a plugin

A plugin must be hosted on a website that will return the correct ‘Content-Type’ headers when the resource is requested. e.g., RawGit


key type required description
type_name string true Unique ID for this plugin
plugin boolean true
display_name string true The name of the plugin as it will show up in the list of widgets
settings [setting] true List of configurable settings
class function true Reference to a function that is responsible for rendering the widget
group string false Add this plugin to a specific group of widgets, defaults to ‘Other’


A setting is an object with the following fields -

key type required description
name string true Unique name for the setting
display_name string true Used in the widget settings modal
type string true Refer to setting type for possible values
default_value setting type false
group string false Allows for grouping settings into sections
description string false Description for the setting
required boolean false If true, this setting must be given a value in order to save the widgets settings

Advanced Settings

Advanced settings are settings that contain additional fields that allow for more customization


This field is generally used to hook a widget setting up to a datasource

key type required description
expected_format string false Used to remind users of the format that this setting expects
incoming_parser boolean false If true, this widget setting will respond to changes in a datasource
outgoing_parser boolean false If true, this widget setting will be able to send values to a datasource

A DATA_SETTING_TYPE can be one of the following:



key type required description
objectShape [setting] true Describes the fields available and their types


key type required description
options [{}] true Used by the ‘option’ setting type to give the user a list of possible choices

Setting Types

name type example
text string Hello
number number 42
boolean boolean true
color string #fff
option [{}] bottom
DATA_SETTING_TYPE {} {“dataType”: “DYNAMIC_DATA_TYPE”, “value”: “return this.datasource;”}
MULTI_OBJECT_SETTING_TYPE [{}] [{“orientation”: “left”, “value”: 42, “color”: “red”}]