icon-arrow icon-check icon-mail icon-phone icon-facebook icon-linkedin icon-youtube icon-twitter icon-cheveron icon-download icon-instagram play close close icon-arrow-uturn icon-calendar icon-clock icon-search icon-chevron-process icon-skills icon-knowledge icon-kite icon-education icon-languages icon-tools icon-experience icon-coffee-cup
Werken bij Integration & Application Talents
Blog 21/02/2019

Using JavaScript Libraries in OutSystems

Stacked books

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).

Adding a the library to an OutSystems page

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);"

Running JavaScript in OutSystems

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!

Geen reacties

Geef jouw mening

Reactie plaatsen

Reactie toevoegen

Jouw e-mailadres wordt niet openbaar gemaakt.


  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.

Wil je deel uitmaken van een groep gedreven en ambitieuze experts? Stuur ons jouw cv!