JET Module Loading

Overview

JET classes and components are delivered via a set of asynchronous module definitions (AMDs or more informally, modules). JET applications typically use RequireJS to load the necessary modules and call API as required. The values returned from JET modules come in one of three forms:

No return value

Some modules may not return any value at all. The purpose of these modules is simply to load the associated JavaScript into memory, but the application typically does not directly interact with or instantiate this code. For example, modules that define JET Web Components typically would not have return values.

//Loading a JET component in your Typescript code

//To typecheck the element APIs, import as below.
import {ojAccordion} from "ojs/ojaccordion";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojaccordion";

One return value

Some modules directly return a single object or constructor function. Applications would typically call functions on the returned object or instantiate new objects via the constructor function. For example, the 'ojs/ojcontext' module has a single return value:

//Javascript example
define(['ojs/ojcontext'], function(Context) {
  var pageContext = Context.getPageContext();
})

//TypeScript example
import Context = require('ojs/ojcontext');
  let pageContext = Context.getPageContext();

Multiple return values

Some modules package several objects or constructor functions inside a single JavaScript object. Applications would typically retrieve the relevant object or constructor function via a documented property on this object and then either call functions or instantiate new objects as appropriate. For example, the 'ojs/ojattributegrouphandler' module has multiple return values.

//TypeScript example
import {ColorAttributeGroupHandler, ShapeAttributeGroupHandler} from "ojs/ojattributegrouphandler";
 let colorHandler = new ColorAttributeGroupHandler();
 let shapeHandler = new ShapeAttributeGroupHandler({'0-2 years': 'triangleDown',
                                                    '3-5 years': 'circle',
                                                    '6+ years': 'triangleUp'});
 var getLegendData = function(data, colorHandler) {
    var items = [];
    for (var i = 0; i < data.length; i++)
    {
      items.push({
        value: data[i].value,
        text: data[i].category,
        color: colorHandler.getValue(data[i].category),
      });
    }
    return [{items: items}];
  };

//Another example
import * as Logger from "ojs/ojlogger";
 Logger.log("Please enter a valid input");