Attaching modules to Microsoft Dynamics CRM Form Events

Question

I am using Typescript to write custom code to handle form events. For each form, I have a separate file and then I combine the files at compile time into one file that I then use across all forms. I am having trouble attaching events to the form - I get an error that my function name can't be found. Below is one of the requirejs modules that is in the compiled Javascript file. I have tried connecting the events using Evaluation.[function] , Forms/Evaluation.[function] , and EvaluationScripts.[function] without any luck. What naming structure should I be using to attach my form events?

tsc compile

define("Forms/Evaluation", ["require", "exports", "Global/Helpers", "Global/CCSEQ", "Global/Sync", "Global/Util", "Global/Query"], function (require, exports, Helpers, CCSEQ, Sync_4, Util_10, Query) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var EvaluationScripts = (function (_super) {
__extends(EvaluationScripts, _super);
function EvaluationScripts() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.EmployeeStaffLevelAsOfDateQuery = //query;
return _this;
}
EvaluationScripts.prototype.onLoad = function () {

};
EvaluationScripts.prototype.onSave = function (execObj) {

};
EvaluationScripts.prototype.ccseq_employeeid_onChange = function () {

};

return EvaluationScripts;
}(Helpers.FormLibrary));
exports.Evaluation = new EvaluationScripts();
});

Update

I have tried to use Webpack to compile my modules as well, but I am still getting an error when I connect the onLoad function to the onLoad event. Below is an example of my Webpack-compiled file.

Webpack-Compile

var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(6)], __WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports, EvaluationForm) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Evaluation = EvaluationForm;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));


/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(7), __webpack_require__(1), __webpack_require__(4), __webpack_require__(0), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports, Helpers, CCSEQ, Sync_1, Util_1, Query) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var evaluationPeriodDate;
    var EmployeeStaffLevelAsOfDateQuery = xml;
    function onLoad() {

    }
    exports.onLoad = onLoad;
    function onSave(execObj) {

    }
    exports.onSave = onSave;
    function onCreate() {

    }
    exports.onCreate = onCreate;
    function ccseq_employeeid_onChange() {

    }
    exports.ccseq_employeeid_onChange = ccseq_employeeid_onChange;

}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

Answer 1

The issue is not with webpack. The issue is the function is not being set to the global scope.

The simplest way to add the function globally is

window.Evaluation = new EvaluationScripts();

Answer 2

I think you may be slightly complicating thing trying to use WebPack.
I use TypeScript for all my CRM JavaScript and the pattern I use is to create a ts file for every entity that looks like:

/// <reference path="../type definations/xrm.d.ts" />
/// <reference path="../type definations/jquery.d.ts" />

namespace xrm.entities.contact {

    class FormScripts {
        constructor() {
            //
        }

        private _onLoad() {

        }


        public OnLoad() {
            this._onLoad();
        }
    };

    //Expose the same js interface as the legacy code
    export var code;
    code = new FormScripts();
}

My OnLoad handler in CRM for the contact entity then looks like:

xrm.entities.contact.code.OnLoad

We use gulp to merge all the referenced libraries in to a single javascript file that can be uploaded to CRM as a single webresource

Answer 3

In the end, I ended up creating a new file that imported all of the Form files. This, along with rexkenley's suggestion allowed me to connect the form events successfully using CCSEQ.[FormName] .

Library.ts

import {Test as TestForm} from './path/to/form';

(<any>window).CCSEQ = {};

(<any>window).CCSEQ.Test = TestForm;