Like what you see? Have a play with our trial version.

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Added link to Resource page.

Table of Contents
maxLevel3
classcontents
Anchor
top
top

Implement

...

JavaScript

...

JavaScript Entry Point

This is the JavaScript file that is defined by the AbstractCodeTemplate.getJavascriptMainPath(). This is the first JavaScript file that will be loaded by Yellowfin when the code widget is loaded onto a piece of content, and Yellowfin will pass a number of options to it. 

...

ItemDescriptionJavaScript example
API

An object that will contain the following: 

  • DashboardAPI
  • WidgetAPI
  • CanvasAPI
  • Filters

constructor(options) {

options.apis.dashboards.name;

options.apis.filters;

}

Element

This is the DOM element that Yellowfin has generated for the code widget to be rendered into. Any HTML you generate should be appended to this element.

constructor(options) {

options.element.innerHTML = ‘Hello World’;

}

ResourceLoader

This is a helper class that can be used to load extra resources from the code widget definition. This allows you to load other items from your code widget definition or any third-party libraries you may need after the initial code widget load. 

Note: Any resources you define in AbstractCodeTemplate.setupResources that aren’t defined as isLibrary will be loaded when the CodeWidget is initialised. This is done to reduce the number of requests that are made when loading a code widget. 

options.resourceLoader.load(‘my_second_file.js’, function(MySecondFile) {

//Do something with MySecondFile

));

Messenger

This is an object that contains some helpful functions and flags to get the status of the canvas and save options. 

For example:

edit

A flag to define if the canvas that this code widget is included on, is in edit mode. This can be used to create a custom interface for your widget. 

getOptionValue(optionName)

Returns a value that has been defined for this widget.

setOptionValue(optionName, optionValue)

Saves the passed optionValue against the passed optionName, which can be retrieved later. This can be used for custom setup. If this is called while the canvas is not in edit mode, the call will be ignored.

edit

if(options.messenger.edit) {

    //Custom Edit Code

} else {

    //Published Code

}

getOptionValue(optionName)

console.log(options.messenger.getOptionValue(‘myOption’));

setOptionValue(optionName, optionValue)

options.messenger.setOptionValue(‘myOption’, ‘myOptionValue’);

console.log(options.messenger.getOptionValue(‘myOption’)); //Value will be ‘myOptionValue’

...