To add custom JavaScript to a widget you must create a JavaScript file under the <extension-name>/widget/<widget-type>/js directory. The name of the JavaScript file must match the value of the javascript property in the widget.json file, minus the .js extension. The convention is to use the widget-type as the JavaScript file name, without the .js suffix.

Custom JavaScript for a widget assumes that the file will perform some custom logic and return an object with extensions to the widget’s view model. The JavaScript file should implement the following format using RequireJS. See http://requirejs.org/docs/api.HTML#defdep.

Note: The module must be defined anonymously, in other words, have no package name defined in the module, as shown below.

define(
  // Dependencies
  ['jquery', 'knockout'],

  // Module Implementation
  function($,ko) {
     // We recommend enabling strict checking mode
     'use strict';

     // Private variables and functions can be defined here...
     var SOME_CONSTANT = 1024;

     var privateMethod = function () {
       // ...
     };

     return {
      // Widget JS
      // Some member variables...
      textInput: ko.observable(),
      // Some public methods...
      doSomethingWithInput: function () {
        //...
      }
    }
});

The define statement above can be modified to include widget-specific libraries or other JavaScript files, if required. When a widget is instantiated all properties returned from the JavaScript file specified will be copied into that instance of the widget’s view model. This allows you to define properties, make Web API calls, or handle UI events.