How to Use External JavaScript in Your OutSystems Web Application

UPDATE (09/08/2020):
The new version of this video has now been published, and you can find it here:

UPDATE (07/22/2020):
In the spirit of transparency, I wanted to share that a colleague brought to my attention that part of the technique shown in the video below (specifically, the use of the OnRender event to manipulate the DOM via the innerHTML property) doesn’t really properly take advantage of the React framework. I’m currently working on an updated version of the demo that uses the same JavaScript library, but in a manner more consistent with how React works. I’ll update this post with a link to that video once it’s complete.

The short version, for those who might be interested in just experimenting, is to remove the OnRender event from the screen, and instead create client actions that call the functions in the JavaScript library, and then each of the on-screen Expressions can call the client action, passing in the local variable that is bound to the input box on the screen. When done this way, the underlying React framework will automatically update the screen whenever the value of the input box changes.

Brief demonstration of using a simple JavaScript library, created in Visual Studio Code, in an OutSystems Reactive Web Application.

You May Also Like