Home > Forum > Rules, JS, SQL > Stopwatch JavaScript, HTML, CSS

Stopwatch JavaScript, HTML, CSS
0

Hello community.
In my application, I would like to have stopwatch.
• Stopwatch should starts and run when the form field with stopwatch is visible and stop when not visible. It should be visible through few steps. When not visible, it will reset. When visible again, it will start again.

Alternatively,
• JavaScript, HTML, CSS stopwatch with buttons (Start, Reset are enough).

Are these requirements feasible to be done in WEBCON?

I know, in WEBCON:
• There are an HTML form fields, even supporting some JavaScript functions.
• There are a Form Rules with JavaScript mode

But, where to put what (JS, HTML, CSS) and how to combine/address/relate parts to functional stopwatches?

Hi,

To meet your requirements, the best approach would be to create your stopwatch by implementing the FormField Extension JS.

You can find the relevant documentation and examples at the following links:
https://developer.webcon.com/docs/form-field-extension-js
https://github.com/WEBCON-BPS/develop-docs/tree/main/WebCon.BpsExt.Examples/WebCon.BpsExt.AdvancedExamples/FormFieldExtensions/PhoneNumber/PhoneNumberJS

If you have any further questions or need additional assistance, feel free to reach out.

Best regards,
Łukasz

MVP

Hi Ondrej,

I agree with Lukasz, that you will need the FormFieldExtensionJS.

The main reason for this is that it needs to stop when the form field is no longer visible.
It would be possible to do so with vanilla JS but it would be a pain to implement.

Here's another example:
https://daniels-notes.de/posts/2023/password-field


Maybe you can share what you want to achieve with this because I see some issues. Like:
- The user goes to lunch
- Navigates away without saving
- Is displayed in preview window
- Get's checked out for some reason
- Substitutions?

I'm wondering where you are aware of these and if these may be an alternative.
https://docs.webcon.com/docs/2025R1/Studio/Workflow/Step/Step_Stats
https://docs.webcon.com/docs/2025R1/Studio/Action/PerformanceIndicators/

Best regards,
Daniel

In reply to: Daniel Krüger (Cosmo Consult)

Hi Ondrej,

I agree with Lukasz, that you will need the FormFieldExtensionJS.

The main reason for this is that it needs to stop when the form field is no longer visible.
It would be possible to do so with vanilla JS but it would be a pain to implement.

Here's another example:
https://daniels-notes.de/posts/2023/password-field


Maybe you can share what you want to achieve with this because I see some issues. Like:
- The user goes to lunch
- Navigates away without saving
- Is displayed in preview window
- Get's checked out for some reason
- Substitutions?

I'm wondering where you are aware of these and if these may be an alternative.
https://docs.webcon.com/docs/2025R1/Studio/Workflow/Step/Step_Stats
https://docs.webcon.com/docs/2025R1/Studio/Action/PerformanceIndicators/

Best regards,
Daniel

Hi,

1. You have to create a tech field where you will save a time state
2. You have to create a js rule

let timer;
let seconds = 0;

function start() {
seconds = 0;
timer = setInterval(updateTimer, 1000);
}

function stop() {
clearInterval(timer);
}

function reset() {
seconds = 0;
updateTimer();
}

function updateTimer() {
const currentValue = GetValue("#{FLD:1094}#");
const newValue = currentValue + seconds;
SetValue("#{FLD:1094}#", seconds);
}
3. Implement logic to manage stopwatch for example check if element exists or on page load start count or when a field change you can execute start / stop / reset

if you have any question let me know

In reply to: Bartosz Kusiak

Hi,

1. You have to create a tech field where you will save a time state
2. You have to create a js rule

let timer;
let seconds = 0;

function start() {
seconds = 0;
timer = setInterval(updateTimer, 1000);
}

function stop() {
clearInterval(timer);
}

function reset() {
seconds = 0;
updateTimer();
}

function updateTimer() {
const currentValue = GetValue("#{FLD:1094}#");
const newValue = currentValue + seconds;
SetValue("#{FLD:1094}#", seconds);
}
3. Implement logic to manage stopwatch for example check if element exists or on page load start count or when a field change you can execute start / stop / reset

if you have any question let me know

Hello Lukasz, Daniel, Bartosz,
Thank you for your fast responses and broadening the horizon of what I don’t know about WEBCON yet 😊.
First two replies will require kind of quantum leap in my knowledge as I am more less citizen developer. So one day maybe... Third reply may be feasible for me if there are some additional information (ideally with screenshots from implementation).
Daniel asked about use case. It resembles “planning poker”. All is happening on meeting. There is a central screen with (re)voting results, where I would like to have stopwatch as form fields. The meeting has packed agenda and some discussions are lasting too long. With ticking time, seen by everybody, we can stick more on schedule.
The best would be to have Stopwatch (or timer) blended to the WEBCON screens. Nevertheless, there are other software possibilities (not as nice).
Thank you one more time.
Ondrej

MVP
Did you know that with WEBCON you can automate virtually any process? Even baking cookies 🍪
 
Speaking of cookies: we use the ones that are essential for our website to function properly, as well as additional ones that help us customize our content to your preferences. If you don’t mind cookies, click Accept. If you want to learn more, explore settings.
Settings