Hi @Prasanth S ,

You can check this component: CountDown Timer Reactive Library

Hi @Prasanth S

When the user clicks the button for the first time, change its visibility through a client variable to false and execute a javascript SetTimeout with 600ms calling a function that changes the button's visibility again, setting the client variable to True.

Hi @Prasanth S ,

Can you try the below JavaScript on your button action:

function startResendOtpTimer() {

    var button = document.getElementById("resendOtpButton");//button id

    var timerLabel = document.getElementById("timerLabel");// your timer label id

    var countdown = 60;

    // Initially hide the button and show the countdown

    button.style.display = "none";

    timerLabel.style.display = "block";

    var interval = setInterval(function () {

        timerLabel.innerText = "You can resend OTP in " + countdown + "s";

        countdown--;

        if (countdown < 0) {

            clearInterval(interval);

            timerLabel.style.display = "none";

            button.innerText = "RESEND OTP";

            button.style.display = "block";

        }

    }, 1000);

}

Hope this helps,

Regards,

Manish Jawla

Hi 
you can create a client function and add the below code to JS node and call that function after send OTP action

$(document).ready(function(){

  varcounter=60;varinterval=setInterval(function(){

    if(counter>0){

      $('#" +$parameters.CountdownText_ID + "').text('Resend available in '+counter+'s');counter--;

    }else{

      clearInterval(interval);
$('#" + $parameters.CountdownText_ID + "').hide();
$('#" + $parameters.ResendOTPButton_ID + "').show();

    }

  },

  1000);

});

Hi @Prasanth S ,

I have created a forge component for this problem, because I believe other might also need such kind of functionality in future.

https://www.outsystems.com/forge/component-overview/21967/loading-button-with-timer-o11 

Please have a look.

Hope this helps.

Regards,

Manish Jawla