Enable button with timer

vFlow
1

Is there any way to enable the button after a particular time interval. like enabling the resend OTP button after 1 min. and also can we display the countdown?

3 Likes
2

There is a Timer element to achieve this requirement.

For Fieldset Component:

  1. Navigate to the Component tab and click on the Add Component button to open the component list.
  2. Select the Fieldset component from the list.
  3. Select the appropriate properties and submit the component.
  4. Navigate to the Element tab and click on Add Elements button to open the Elements list.
  5. Select Timer Element.
  6. Enter basic details and under properties section, uncheck the Is Visible and Is Enable checkboxes, enter Timer value (which will contain the time in seconds for which the countdown timer will run eg. 10, 30), select Timer type as Button or Hyperlink (Button will show timer in button and Hyperlink will show timer in a hyperlink format) and click on Submit button.
  7. To start the timer on a button or icon click, add a new element, select Button/ Icon element of your choice.
  8. Navigate to the task group tab and select the Control Visible task from the list and select Timer Element in it. (You may also create a Control Disable task in the same task group to disable the button/icon on 1st click).
  9. Bind this task group to an OnClick event, and further bind the event to the button/ icon element.
  10. To disable the timer element, navigate to the task group tab and select Control Disable task and mention Timer element in it. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  11. To start the Timer without button/ icon click, check the Is Visible checkbox in Timer Element and follow above point no. 6 and 10

For FV Component:

  1. Navigate to the Component tab and click on the Add Component button to open the component list.
  2. Select the FV component from the list.
  3. Select the appropriate properties and submit the component.
  4. Navigate to the Element tab and click on Add Elements button to open the Element list.
  5. Select Timer Element.
  6. Enter basic details and under properties section, uncheck the Is Enable checkbox, enter Timer value (which will contain the time in seconds for which the countdown timer will run eg. 10, 30), select Timer type as Button or Hyperlink (Button will show timer in button and Hyperlink will show timer in a hyperlink format) and click on Submit button.
  7. Navigate to the task group tab and select the Control Disable task from the list and select Timer Element in it. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  8. If you want to start the timer on a button or icon click, add a new button/ icon element in the same component.
  9. Navigate to the task group tab and select the Control Visible task from the list and mention Timer Element in it. Add Control disable task to disable the Timer element. And lastly add an invoke entity task and select the FV component in it. Bind this task group to an OnClick event, and further bind the event to the button/ icon element.
  10. In the timer element, uncheck the Is Visible checkbox.

For Header Section:

  1. Navigate to the Header tab and click on the Add Header button to open the header component.
  2. Enter the basic details and click on submit.
  3. Navigate to the Element tab and click on Add Elements button to open the Elements list.
  4. Select the Timer element from the list.
  5. Uncheck the Is Enable checkbox, enter Timer value (which will contain the time in seconds for which the countdown timer will run eg. 10, 30), select Timer type as Button or Hyperlink (Button will show timer in button and Hyperlink will show timer in a hyperlink format) and click on Submit button.
  6. Navigate to the task group tab and select the Control Disable task from the list and select Timer Element in it. Add a new Invoke entity task and select the timer element. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  7. Alternative to point no 6, navigate to the task group tab and select the Invoke Entity task from the list and check the Current Page refresh checkbox. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  8. If you want to start the timer on a button or icon click, Add a new button/ icon element.
  9. Navigate to the task group tab and select the Control Visible task from the list and mention Timer Element in it. Bind this task group to an OnClick event, and further bind the event to the button/ icon element.
  10. In the timer element, uncheck the Is Visible checkbox.

For Footer Section:

  1. Navigate to the Footer tab and click on the Add Footer button to open the footer component.
  2. Enter the basic details and click on submit.
  3. Navigate to the Element tab and click on the Add Elements button.
  4. Select type as Timer, uncheck the Is Enable checkbox, enter Timer value (which will contain the time in seconds for which the countdown timer will run eg. 10, 30), select Timer type as Button or Hyperlink (Button will show timer in button and Hyperlink will show timer in a hyperlink format) and click on Submit button.
  5. Navigate to the task group tab and select the Control Disable task from the list and select Timer Element in it. Add a new Invoke entity task and select the timer element. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  6. Alternative to point no 5, navigate to the task group tab and select the Invoke Entity task from the list and check the Current Page refresh checkbox. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  7. Bind this task group to an OnClick event, and further bind the event to the Timer element.
  8. If you want to start the timer on a button or icon click, Add a new button/ icon element.
  9. Navigate to the task group tab and select the Control Visible task from the list and mention Timer Element in it. Bind this task group to an OnClick event, and further bind the event to the button/ icon element.
  10. In the timer element, uncheck the Is Visible checkbox.
20 Likes
3

Thanks for the detailed answer :+1:

1 Like