Using JavaScript Libraries in OutSystems

I sometimes find myself daydreaming about the cool things JavaScript libraries can do for my projects. But is utilizing those libraries in OutSystems a challenge or a breeze? Let's pick parallax.js to experiment with and find out.

I love parallax effects, and I adore mouse parallax effects in particular. There's something about the dreamy, seemingly interactive way the page moves that invokes a sense of complexity and maybe even wonder. So as soon as I got my OutSystems basics down, I started trying to implement Matthew Wagerfield's and Claudio Guglieri's parallax.js.

The documentation on GitHub is really clear about its' use. Either put the (compiled) parallax.min.js file in the project resources (which would mean the Resources folder found in the Data tab in our case), install the library through npm (which is not really available to us), or import the file via the hosted CDN instead. We'll use the latter because it's the easiest option.

We'll have to import the library via the header for our code to be able to reference it, and OutSystems won't put it there on its' own. To do so, we can use the AddJavaScriptTag Server Action from the HTTPRequestHandler module. Add the Server Action to the Screen Preparation, and enter the CDN link into the appropriate field (as shown below).

The parallax effect is imported and ready to use! The GitHub documentation is really clear (and helpful) about how to use it.

The parallax effect needs a container to happen inside of; the GitHub example gives that container an ID called 'scene'. All child elements of that container that have a 'data-depth="x.x"' property will become moving elements (however, an element with attribute data-depth="0.0" is an unmoving element, too).

The following code can then be used to initiate the parallax effect:

var scene = document.getElementById('scene');

var parallaxInstance = new Parallax(scene);

We'll modify that code a bit to work with the variable IDs OutSystems gives to its' elements, and add it to our page via the RunJavaScript Server Action. (The RunJavaScript Action is available through the HTTPRequestHandler module.) We'll put this Action in the Screen Preparation, after the AddJavaScriptTag Action.

I called my own Parallax container 'jsscene'.

"var scene = document.getElementById(""" + jsscene.Id + """);

var parallax = new Parallax(scene);"

Now fill up your scene with some items, add some data-depth, and there you go! The parallax page of your dreams is here. I'd say it was a breeze!

This example was inspired by Tatsuya Azegami's CodePen.

Thanks for reading and see you in the next post!