Timer interactions

Get Help
1

We are utilizing the Timer in our app, however documentation is limited. Can you help guide us with some of the options we have available?

  1. Can we change the Toast when a timer ends to read something different than the default message?
  2. Can we utilize form.load(Function) to change the time of the timer via JS vs the Builder
  3. We want to trigger the timer to start and stop based on other interactions is this possible?
2

Changing the Toast Message When a Timer Ends

Unfortunately, you can’t update an existing toast message, but you can show a new one. For example, the below code will show the user “message 1” and show “message 2” after 2 seconds.

Fliplet.UI.Toast('message 1');

setTimeout(function(){
  Fliplet.UI.Toast('message 2');
}, 2000);

Showing a new toast message hides all other messages currently visible. But if you just want to hide the toast message, you can use:

Fliplet.UI.Toast.dismiss()

You can find more examples in this documentation on our site: Fliplet.UI.Toast() | Fliplet Developers Documentation

Using form.load(Function) to Change the Timer

It’s not entirely clear from your question whether you are using standard JS functions such as setTimeout() and setInterval() or whether you are using an external library. So without more specific details about your application, it’s challenging to provide a definitive answer.
However, as form.load() returns a promise, by adding the .then() function after form.load(), you can attach a callback function to be executed after the form.load() operation is completed as it’s shown in the example below:

Fliplet.FormBuilder.get().then(function (form) {
    form.load(function () {
      return connection.findById(entryId);
    }).then(function(){
       //change your timer here
    });
  });

Starting and Stopping the Timer Based on Other Interactions

Yes, it is certainly possible to start and stop the timer based on other interactions. You would need to implement some code that listens for these interactions (such as button clicks or form submissions), and then starts or stops the timer based on these interactions. The specifics of how you would implement this would depend on how your timer is set up and what these interactions are. For more specific advice, please provide more details.

3

Regarding: Starting and Stopping the Timer Based on Other Interactions
We were able to manipulate the start & stop to a degree with the following, however, the reset button is also identified as btn-primary so when clicking the button identified below we are just cycling through the start, stop, reset over and over again. the reset in this sequence is a problem.

We would also be taking the button away and using a different trigger.

HTML:

<fl-form cid="9397817"></fl-form>
<button id="start_timer">Click Here</button>

Javascript:

$( "#start_timer" ).on( "click", function() {
  $('.fl-timer .btn-primary').click();
});
4

#### Changing the Toast Message When a Timer Ends

In short testing the following JS does not run after the countdown timer ends it run’s 2 sec after the page loads.

setTimeout(function(){
  Fliplet.UI.Toast('message 2');
}, 2000);
5
  1. At the moment it’s not possible to change the default toast message when a timer ends
  2. Changing the time of a timer is also not supported at the moment but will be improved in the future. It’s also not possible to catch the moment when the coundown timer ends.
  3. Here is an example how you can trigger the timer to start and stop:
//event listener to start the timer
$(document).on('click', '#start_timer', function(e) {
  e.preventDefault();
  $('.fl-timer .btn-primary:contains("Start")').trigger('click');
});

//event listener to stop the timer
$(document).on('click', '#stop_timer', function(e) {
  e.preventDefault();
  $('.fl-timer .btn-primary:contains("Stop")').trigger('click');
});
6

Hello :innocent:

As per my opinion, If you want to display a custom message when the timer ends instead of the default Toast, you’ll need to implement a callback function that triggers at the end of the timer.
and also you can modify the timer’s duration using JavaScript. The form.load(Function) method can be used to execute code when the form loads, allowing you to set or adjust the timer’s duration dynamically through JavaScript.

I hope this will be helpful for you. :heart_eyes:

Respected community member :blush:

7

Molly-
Thank you for your reply.
Unfortunately, we have not identified an event or listener with the timer toast that we can utilize for this process. In the same token we have not found the right identifiers to utilize form.load(Function) method when the page loads to change the timer.
Respectfully DBSwebDesigns