Adding jQuery UI Components or Effects to Your Oracle JET Application

The Oracle JET distribution includes only the jQuery UI modules needed by the Oracle JET framework, but you can add additional modules manually to your application if you use RequireJS.

To add a jQuery UI component or effect to your existing Oracle JET application, download the additional jQuery UI module that contains the jQuery UI component or effect and add it to the Oracle JET folder containing the existing jQuery UI modules.

  1. To add the debug version of the new jQuery UI module to your application, do the following:

    1. Download the module that contains the component or effect you need at: https://github.com/jquery/jquery-ui/tree/1.12.0/ui.

    2. Place the downloaded module in the Oracle JET jQuery UI debug folder: js/libs/jquery/jqueryui-amd-1.12.0.

  2. To add the minified version of the new jQuery UI module to your application, do the following:

    1. On your local system, install jQuery UI using bower, a package management tool:

      bower -V install jquery-ui
      

      For details about downloading bower and using it with jQuery UI, see http://learn.jquery.com/jquery-ui/environments/bower/.

      To configure Bower, create a text file in your home directory named .bowerrc, and set values for Bower’s configuration variables as needed.

      For example, to configure a proxy server, add the URLs for your HTTP and HTTPS proxy servers to .bowerrc following the format shown at http:/bower.io/docs/config/.
      {
        "proxy": "http://http-proxy-server-URL:port-number",
        "https-proxy": "http://https-proxy-server-URL:port-number"
      }   
      

      Tip:

      To locate your home directory, enter one of the following commands at the command prompt, depending upon your development platform:
      • Linux, Macintosh, other UNIX: echo $HOME

      • Windows: echo %USERPROFILE%

    2. From the location that contains your bower files, copy the desired module to the Oracle JET jQuery UI minified folder: js/libs/jquery/jqueryui-amd-1.12.0.min.

    3. Rename the module to remove .min from the name.

      For example, if you copied autocomplete.min.js to the minified folder, rename it to autocomplete.js.

      Using the same name for both the debug and minified versions of the module enables you to change the path mapping in your RequireJS bootstrap file to switch between debug and minified versions.

  3. Add the new module to your RequireJS bootstrap file, typically main.js.

    For example, add the highlighted code below to your bootstrap file to use the autocomplete jQuery UI module.

    require(['ojs/ojcore', 'knockout', 'jquery', 'jqueryui-amd/autocomplete'],
      function(oj, ko, $) // this callback gets executed when all required modules are loaded
      {
          // add any startup code that you want here
      }
    );
    

    For additional information about using RequireJS to manage your application's modules, see Using RequireJS for Modular Development.

Note:

This process is provided as a convenience for Oracle JET developers. Oracle JET will not support the additional modules and cannot guarantee that the additional modules will work correctly with other Oracle JET components or framework features.