Javascript Timer in Outsystems
Application Type
Mobile

Hi! Following this guidance in another post here on the forum:

https://www.outsystems.com/forums/discussion/68700/is-there-a-timer-component-like-in-vb-net/


I'm trying to use javascript to run an event on the mobile app from time to time. But, I have 2 doubts:


1) How would I go about setting the content of an existing label or text on my Outsystems screen? I was unable, via javascript, to interact with the existing components on my screen.


1) In the case of this alert that I used in the example, it fires every 3 seconds. How could he not "stop" the flow? For example, continue to issue an alert every 3 seconds, instead of stopping and waiting for the user to click ok.


mvp_badge
MVP
Solution

Got some time to make it working for you in the way I described before, see attached.

In OnReady from your screen:

The screen, with instead of a value an expression in the label

PlaygroundReactive.oap

mvp_badge
MVP

Hi,

Regarding point 1) you can call a screen action in your javascript via $actions.<yourscreenaction> that can handle the change of variables you show on your screen.

Regarding 2) you didn't share your JS code that sets the timer, so hard to say what is wrong.

Regards,

Daniel

Thanks  Daniël Kuhlmann!


Here a image:



mvp_badge
MVP

Create and screen action SetLabel with an input parameter.

on the comment line do write the following 2 javascript lines:

$actions.SetLabel(i);

$resolve();

>> Create and screen action SetLabel with an input parameter


OK. But in this action will I be able to assign the value of my variable "i"?


See that inside setInterval, I would increase the value of the variable and would like to display it in a text and a label, for example.


I can't access the screen component directly through javascript? Something like:

txtNumber.value = i.ToString ();

labelNumber.caption = "Number:" + i.toString ();

mvp_badge
MVP

The DOM is rendered by ReactJS, so you should not manipulate the DOM elements directly.

mvp_badge
MVP

Use an expression styled as a label, you just change the local variable value used in the expression. That should do the trick.

mvp_badge
MVP
Solution

Got some time to make it working for you in the way I described before, see attached.

In OnReady from your screen:

The screen, with instead of a value an expression in the label

PlaygroundReactive.oap

Very good. Good job!


I'm coming from traditional IDEs and desktop programming. I still haven't got the low-code and Outsystems way of thinking, mainly.


I am more used to writing functions and indicating each line of code to do what I need.


Thanks for listening. If you have any more tips or recommendations for those, like me, coming from another software development paradigm, I will be even more grateful.

mvp_badge
MVP

Your welcome. If you didn't do already, I strongly advise you to follow the Becoming a reactive web developer guided path. Its free and a fun way to learn at your own pace how to build reactive web applications with OutSystems. Once you master this, the next step to create mobile apps is a breeze as it's the same concept added with local storage, plugins, etc.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.