(Mobile) Triggering an event after everything on the screen is fully rendered


I'm having a problem regarding the manipulation of the DOM with Javascript/JQuery on Outsystems Mobile.

I have a screen with a block inside, from which i want to remove some HTML.

The reason for this is the Outsystems Mobile checkbox apparently gets rendered in the HTML with a <span> tag around it. This is inconvenient because the CSS currently implemented on the project is not prepared for this.

I have the piece of code required for removing the HTML from the DOM and it works since I used the remote devices debugging tool on Chrome and when I run the code on the browser console it indeed removes the desired HTML.

What I assume is happening is that I'm trigerring the event in the wrong place before the page is fully loaded and so it doesn't do anything.

Can someone tell me as to where you would need to run the JS in order to be able to catch the already rendered HTML inside the block?

One would assume it would be on the OnRender Event of the Block since it triggers on the OnAfterFetch of the screen queries so the data would already be on the screen.

Thank you very much in advance!

Hi Joao, 

You can run your javascript on Screen OnReady() event. 

You can create a Client Action on OnReady() which will run a javascript to remove unwanted HTML. 

See the image below: 

Palak Patel

Hello, I have a similar problem. Instead of a javascript flow element I want to load javascript via a required script in a mobile app. It is important that the code is only run after the screen has been rendered. So how can I run required scripts after rendering? By default required scripts are loaded during the rendering process.

Why not using javascript flow elements?

I discovered that variables declared inside a javascript flow element can only be shared to other pieces of code by input/output parameters of javascript flow elements. When loading javascript through the required scripts of a screen or a block the global variables are approachable within other javascript code (that may be required script or javascript flow element). 

Passing data through input/output parameters might help to use javascript flow elements, however this cannot be easily done with javascript objects because OutSystems variables do not support that type. Converting a javascript object to JSON might be a solution for this, but this seems too cumbersome to me.

Please correct me if my statements are not correct and share your ideas to solve this in OutSystems.

Hi Joao,

A few months ago I had this same problem and I was able to find a solution. I know this post is over a year old but let me know if you still have this problem. Maybe I can help you.

Best regards.

Hi João,

First of all, I would advise not to use JQuery in a mobile application. Try to do the DOM manipulation using vanilla javascript. This saves the loading of the JQuery library which on mobile devices tends to be slower than in a windows browser.

Second, DOM manipulations should be done in the OnRender event of your screen or block.