Using jQuery UI effects within Oracle JET

I recently encountered an issue when trying to use the jQuery UI module ‘effect’. My use case was that I wanted to include a shake effect on a button when a form failed vailidation.

Eventhough jQuery UI is included within your JET install, it took a little bit of digging to find out how to actually use the shake effect within the application.

node_modules/jquery-ui/ui/effects

The issue lies with the way that the Oracle tooling imports jQuery UI. It misses off the node_modules/jquery-ui/ui/effects folder when building. So in order to include the files, you have to manually make some changes to your oraclejet-build.js file (which is located within scripts/grunt/config). We want to copy over the missing folder to our staging folder during build.

Within this file, uncomment the copyCustomLibsToStaging block, and add the following to your fileList, so it looks like the one below:

copyCustomLibsToStaging: {
  fileList: [
      {
         cwd: 'node_modules/jquery-ui/ui/effects',
         src: '*.js',
         dest:'web/js/libs/jquery/jqueryui-amd-1.12.0/effects'
      }
  ]
},

Now if you run your application, you will see the effects folder present within your web directory:

web/js/libs/jquery/jquery-amd-1.12.0/effects

You then want to define the new effect within your viewModel:

(Note: I am only defining the effect that I am using, you can change ‘effect-shake’ with the effect you want to use, or define multiple effects)

define(['ojs/ojcore', 'knockout', 'jquery', 'jqueryui-amd/effects/effect-shake']

And thats it! By following those two simple steps you will be able to bind jQuery UI effects to components in your JET applications.

— DC