How to Use EasytimerJS (3rd party JS) Properly in Outsystems

How to Use EasytimerJS (3rd party JS) Properly in Outsystems

  

This is what I have in my screen using a webBlock

This is my PREPARATION:

Bootstrap: "

"https://code.jquery.com/jquery-3.3.1.min.js"

EasytimerJS:

"/easytimer.min.js"

CSS:

"/examples.min.css"

WEBLOCK Im Using:

JS CODE:

SyntaxEditor Code Snippet

"
       var timer = new Timer();
  
      
        $('#chronoExample .startButton').click(function () {
            timer.start();
        });
        $('#chronoExample .pauseButton').click(function () {
            timer.pause();
        });
        $('#chronoExample .stopButton').click(function () {
            timer.stop();
        });
        $('#chronoExample .resetButton').click(function () {
            timer.reset();
        });
        timer.addEventListener('secondsUpdated', function (e) {
            $('#chronoExample .values').html(timer.getTimeValues().toString());
        });
        timer.addEventListener('started', function (e) {
            $('#chronoExample .values').html(timer.getTimeValues().toString());
        });
        timer.addEventListener('reset', function (e) {
            $('#chronoExample .values').html(timer.getTimeValues().toString());
        });          
"

HTML CODE:

SyntaxEditor Code Snippet

"
  <div id=""chronoExample"">
          <div class=""values"">00:00:00</div>
          <div>
              <button class=""startButton btn btn-success btn-lg"">Start</button>
              <button class=""pauseButton btn btn-primary btn-lg"" >Pause</button>
              <button class=""stopButton btn btn-danger btn-lg"">Stop</button>
              <button class=""resetButton btn btn-warning btn-lg"">Reset</button>
          </div>
      </div>
"
    

Im at a loss now how to make this SIMPLE TIMER work.  Outsystems was suppose to make this development easy right? hahahaha.  This was easily working in my Visual Code.  I want it that when I press start, it starts like when I run it in my VS Code, and so forth.

The plan is to fetch time and store it in an Outsystem variable and do something with that data.





Hi Rey,

You are getting any error on the browser/console or Outsystems log? Want to share the espace so I can test it on my environment?

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Rey,

You are getting any error on the browser/console or Outsystems log? Want to share the espace so I can test it on my environment?

Regards,

Marcelo

Thanks Marcelo, here you go. Im currently using Outsystems 10.

Solution

Hi Rey,

Attached the solution to your problem. I created a new screen WebScreen1 and there is working with html and JS. In webblock is working with outsystems and js.

Regards,

Marcelo

Solution

Marcelo Ferreira wrote:

Hi Rey,

Attached the solution to your problem. I created a new screen WebScreen1 and there is working with html and JS. In webblock is working with outsystems and js.

Regards,

Marcelo

Thanks for this. I managed to made it work earlier but your implementation opened views on where to place HTML and JS blocks (directly on the Web Screen). Do you know how to pass the data from JS (for example the elapsed time) to an Outsystems local variable so I can use it? Im currently using FakeNotifyWidget.


Hi Rey,

Already someone discuss that here https://www.outsystems.com/forums/discussion/12218/calling-feedback-message-from-javascript/

Regards,

Marcelo