Powering up your OutSystems Applications - Part 1- Integrating Web APIs to OutSystems

Here I am again to encourage all of you to give Javascript a try and improve your OutSystems Applications. So, let’s start with something simple.

Have you heard about Web APIs? You might have not heard anything about that, but you probably have already used it somehow.

What are Web APIs?

Web APIs are out-of-the-box functionalities in Javascript. It means that when you are developing a Javascript code, you can use a lot of reusable libraries that would accelerate your development.

You can find a list of the available built-in Web APIs at Mozilla’s documentation.

How to make use of Web APIs in your OutSystems applications?

In this article, I show you how to implement the Page Visibility API, as an example of using Web APIs in your applications.

The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.

What are the use cases for the Page Visibility API?

For example, a lot of developers complain that Google Chrome consumes a lot of memory. Let me tell you something, Google Chrome is not the only one to blame.

Many applications consume a lot of memory, showing animations, running ajax calls to keep the data up-to-date, heavy global objects and so on. If you keep 5 or 10 tabs using this kind of application, you would have memory problems.

This is one use case in which the Page Visibility API helps the developer and improves the user experience. By using the Page Visibility API you can trigger when the user has switched to another tab and minimized the window and stop doing those heavy tasks.

How to implement the Page Visibility API in OutSystems?

In this example, I have created a new traditional web application module and added a block called "PageVisibility".

After that, I have added the following code to the WebBlock’s Javascript property:

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        // the page has lost focus
    } else {
        // the page got focused
    }
});

This code is adding a new listener to the DOM, this listener is called "visibilitychange". After the definition of the trigger, you can specify what action should the listener perform when it gets triggered.

In this example, I am checking if the page is hidden or not. In the Page Visibility API you have access to two properties:

• Document.hidden (Boolean)
• Document.visibilityState (Four possible values: visible, hidden, prerender or unloaded)

For this demo, I have also created a Web Screen that contains two containers representing the following.

<video id="videoElement" style="width:400px;">
<source id="SourceTag" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>

This is how you translate it to OutSystems:

• Video Tag

• Source tag inside the video tag:

This is possible because of the OSTagName extended property. You can find more about this property in the documentation. And it looks better than having an expression with the HTML code inside of it.

Now you need to define what your listener should do when it gets fired. The code to make it play or pause a video based on the visibility of the current window should be like this:

function handleVisibilityChange() {
var videoElement = document.getElementsByClassName("videoElement")[0];
  if (document["hidden"]) {
    videoElement.pause();
    document.title = "Paused";
  } else {
    videoElement.play();
    document.title = "Playing";}
}document.addEventListener('visibilitychange', function () {
    handleVisibilityChange();    
});

So, first, this code gets the video element in the DOM based on the class name that we gave to it. And then checks the hidden property of it.

If the page is hidden, it calls the function pause of the video element otherwise, the page is active and it will play the video.

It also changes the title of the tab to make it easier to see when the video gets paused or played.

After inserting this code in the WebBlock, this is how it looks like:

Now that we have a working Javascript code, we can drag the Web Block to the screen, right after the tags that we have inserted there and publish your module.

Finally, you can test the application and see that when you play the video and switch to another tab the video will be paused.

This is a simple example of how you can improve your OutSystems applications by adding some cool and easy implementation stuff.