Using External JavaScript Libraries

You can use external JavaScript libraries in your portlets (i.e., anything but Metal.js or jQuery, which are included by default). If you’re the owner or hosting the external library, there are a few more requirements to load them with the JavaScript Loaders.

Follow these steps:

  1. If you’re the owner of the library, you should make sure that it supports UMD (Universal Module Definition). You can configure your code to support UMD with the template shown below:

    // Assuming your "module" will be exported as "mylibrary"
    (function (root, factory) {
        if (typeof Liferay.Loader.define === 'function' && Liferay.Loader.define.amd) {
            // AMD. Register as a "named" module.
            Liferay.Loader.define('mylibrary', [], factory);
        } else if (typeof module === 'object' && module.exports) {
            // Node. Does not work with strict CommonJS, but
            // only CommonJS-like environments that support module.exports,
            // like Node.
            module.exports = factory();
        } else {
            // Browser globals (root is window)
            root.mylibrary = factory();
    }(this, function () {
        // Your library code goes here
        return {};
  2. If you’re hosting the library (and not loading it from a CDN), you must hide the Liferay AMD Loader to use your Library. Open the Control Panel, navigate to ConfigurationSystem Settings.

  3. Click JavaScript Loader under PlatformInfrastructure.

  4. Uncheck the expose global option.

Great! Now you know how to adapt external libraries for Liferay’s JavaScript Loaders.

« Loading AMD Modules in LiferayLoading Modules with AUI Script »
Was this article helpful?
0 out of 0 found this helpful