Widget Development [WIP]

The basics

What is a widget

A widget is a modular, reusable piece of functionality that can be added to the page. It consists of an HTML fragment, JavaScript, CSS, i18n bundles and a configuration file.

Why use widgets?

Widgets are reusable, modular pieces of functionality that serve a specific function on the page. You can have multiple instances of a widget (e.g. embedding video). They are specialized which often keeps them small and easier to maintain.

How to use a widget?

Widgets can be used in 2 different ways:

• Building the page (e.g. show top and left hand navigation, display a content item, ...)
• Supporting the context of the page (e.g. edit permissions of content, add members to a research group, change your profile picture, ...)

The widget framework

Widget structure

manifest.js

manifest.js is the configuration file specific to the widget. It contains bundle definitions as well as triggers and a reference to the couple html page.

{
    "i18n": {
        "af_ZA": "bundles/af_ZA.properties",
        "ca_ES": "bundles/ca_ES.properties",
        "de_DE": "bundles/de_DE.properties",
        "default": "bundles/default.properties",
        "es_ES": "bundles/es_ES.properties",
        "fr_FR": "bundles/fr_FR.properties",
        "hi_IN": "bundles/hi_IN.properties",
        "nl_NL": "bundles/nl_NL.properties",
        "pl_PL": "bundles/pl_PL.properties",
        "pt_BR": "bundles/pt_BR.properties",
        "sv_SE": "bundles/sv_SE.properties",
        "tr_TR": "bundles/tr_TR.properties",
        "val_ES": "bundles/val_ES.properties",
        "zh_CN": "bundles/zh_CN.properties"
    },
    "trigger": {
        "selectors": [
            ".oae-trigger-upload"
        ],
        "events": [
            "oae.trigger.upload"
        ]
    },
    "src": "upload.html"
}
#### i18n
`i18n` specifies the translation files that are available inside of the widget's `bundles` folder relative to the manifest file. They are standard `.properties` files.
#### trigger
`trigger` defines how the widget can be triggered from within the page. This has as an added advantage that any widget can be lazy-loaded instead of included on page load. There are two different kinds of triggers:
- `selectors` are standard classes put on elements inside of the DOM. The widget framework automatically registers the click on these elements and loads the widget. Inside of your widget you will need to catch this click event (e.g. `$(document).on('click', '.oae-trigger-upload', function() {...});`
- `events`
#### src

widget.html

widget.css

widget.js

bundles.properties