Model Driven App Timer ,Build One in Power Apps

Creating a Model Driven App Timer in Power Apps lets you track start, stop, and elapsed times directly within your app. In this guide, we’ll explore how to build a custom timer using JavaScript commands for full control and accuracy.

In this guide, you’ll learn how to build a Model Driven App Timer using JavaScript commands  allowing you to start, stop, and track elapsed time accurately, even when users navigate between tabs or close their browser.

Understanding the Built-In Timer Control

The native timer control in model-driven apps can count days or time past a due date, but it’s limited. When users switch between tabs, the timer resets or stops running  making it unreliable for continuous timing.

That’s why this solution uses JavaScript commands instead of the built-in timer component. It gives you complete control over when a timer starts, stops, and how elapsed time is stored.

 Setting Up the Timer with JavaScript

The foundation of this custom timer lies in four JavaScript functions:

• Start Timer – Captures the start time and stores it locally.
• Stop Timer – Stops the timer and calculates elapsed time in milliseconds.
• Check Timer – Verifies if a timer is already active for the current record.
• Create Record – Logs the timing information in Dataverse.

The script stores data in the browser’s local storage (PU_Timer_Storage), so even if users switch tabs, reload the page, or restart their computer, the timer continues running until manually stopped.

Creating the Start Timer Command

1. Open the modern command designer for your target table (for example, Contacts).
2. Click Edit Command Bar → Main Form.
3. Choose Add Command → JavaScript.
4. Select your web resource library (e.g., timerCommandsPlus.js).
5. Set the function name to startTimer.
6. Pass in the PrimaryControl parameter  this represents the current form context.
7. Add an icon and publish your changes.

Once saved and published, your new Begin Timer button will appear on the form’s ribbon.

Adding the Stop Timer Command

Next, duplicate the first command:

1. Rename it Stop Timer.
2. Change the function name from startTimer to endTimer.
3. Optionally, choose a different icon (like a close or stop symbol).
4. Save and publish again.

Now, your app can start and stop timers seamlessly  even across tabs and sessions.

Calculating Total Elapsed Time

To display elapsed time in minutes or seconds:

• Add a field, e.g., Total Elapsed (Minutes).
• Extend your script to sum elapsed times from related time entry records.
• Use simple math to round values down or up, depending on your reporting needs.

Example logic:

totalMinutes = Math.floor(totalMilliseconds / 60000);

This ensures that rounding happens only after full minutes have passed.

Advanced Enhancements

If you’re ready to extend functionality, try adding:

• Pause and Resume capabilities.
• Cancel Timer actions.
• Visual notifications when a timer starts or stops.

These can be implemented by adding conditions to the existing JavaScript logic.

Learn & Build More

If you want to sharpen your Power Apps and JavaScript skills or get personalized help creating advanced solutions like this, check out Data Bear’s Power BI and Power Platform training.

Their expert-led sessions help you design smarter business apps, automate processes, and get the most from Microsoft’s ecosystem.

Conclusion

Building a Model Driven App Timer using JavaScript gives you flexibility beyond the standard timer control. With persistent state management and precise millisecond tracking, your users can record accurate elapsed time across sessions  all without losing data.