Best Practices on How to Integrate JS components with OutSystems

Hi all,

I was searching for this topic and couldn't a Topic on this, so I decided to create one. If there is a topic already on the subject, please add it to the comments.

Having this out of the way, my motivation to create this was to create a discussion where people with all sorts of experience can share a bit on how to this on OutSystems.

I'm fascinated by integrating JS components with OutSystems but for me, the biggest roadblock that I face is when the component needs to interact with the server and then the server needs to get back to the component, especially, in Traditional Web Apps.

The approach I usually go for is having the screen to trigger an Event through this, having the Server do its work, and then call a JS function to change the JS component by using the RunJavaScript, but there's a missing piece, which is, having a callback between the server and the component, instead of having this async behavior.

I usually run away from implementations where the Server side is in a REST API because that approach adds a layer of complexity to the developer who might implement the component with Outsystems when the point is the opposite.

If you usually do things differently, have some knowledge you could share with all, please do. 

Happy Coding,

João Franco

Rank: #171

Hi João,

This is a great question!
When I had this type of scenario in my traditional web apps mainly in OutSystems 10 when we didn't had events,I usually used more than one hided button or links.

For example,

If I had to first call a server action that was going to return some sort of input for the next action, first I called it then in the end I called another runJavascript to do whatever I needed, even using RunJS to click in other button if needed.

Another thing that came in my mind is that you may use some default OutSystems objects for this, for example, if you go to your console and type OS you will see a lot of OS objects:

One of them is the osajaxbackend, that has several funciton including BindAfterAjaxRefresh which let you set some function that will run every time you do an ajax refresh:

This action if used will run every time, so you would have to find a way to identify if the caller was the button or link you wanted for instance.

This is just some sort of Brain Storm, I never used this type of approach.... But it may also help you to think in some other thing.

The last thing I think is using callbacks on the JS functions to start another function maybe...

Just ideias :)