| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 62 |
| Technical Name |
timer_widget |
| License | LGPL-3 |
| Versions | 18.0 19.0 |
A reusable timer widget component for Odoo. This technical module provides a clean, standard OWL component that can be integrated into any Odoo module requiring real-time timer functionality.
Lightweight, framework-agnostic, and follows Odoo's official patterns.
- Real-time Updates: Timer updates every second (or every 10ms with milliseconds enabled).
- Configurable Format: Display as MM:SS or MM:SS.mmm with milliseconds.
- Clean & Neutral: No hardcoded styles - customize as needed in your module.
- OWL Component: Built with Odoo's OWL framework following official patterns.
Usage Guide
In your module's __manifest__.py, add timer_widget to dependencies:
{
'name': 'My Module',
'depends': ['base', 'timer_widget'],
...
}
Import the Timer component in your JavaScript file:
/** @odoo-module **/
import { Timer } from "@timer_widget/js/timer_widget";
class MyField extends Component {
static components = { Timer };
...
}
Add the Timer component to your XML template:
<!-- Basic usage (seconds only) --> <Timer value="duration" ongoing="isRunning" /> <!-- With milliseconds --> <Timer value="duration" ongoing="isRunning" showMilliseconds="true" />
- value (Number, required): Duration in seconds
- ongoing (Boolean, optional): Whether timer is running (default: false)
- showMilliseconds (Boolean, optional): Show milliseconds format (default: false)
Complete Example
Here's a complete example showing how to create a custom field widget using the Timer component:
duration = fields.Float('Duration (seconds)')
is_running = fields.Boolean('Running')
start_time = fields.Datetime('Start Time')
def get_duration(self):
"""Get current duration including running time"""
self.ensure_one()
duration = self.duration
if self.is_running and self.start_time:
delta = fields.Datetime.now() - self.start_time
duration += delta.total_seconds()
return int(duration)
import { Timer } from "@timer_widget/js/timer_widget";
class MyTimerField extends Component {
static components = { Timer };
setup() {
this.orm = useService("orm");
this.duration = 0;
useRecordObserver(async (record) => {
if (record.data.is_running) {
this.duration = await this.orm.call(
"my.model", "get_duration", [record.resId]
);
} else {
this.duration = Math.floor(record.data.duration);
}
});
}
get ongoing() {
return this.props.record.data.is_running;
}
}
<t t-name="my_module.MyTimerField">
<Timer value="duration" ongoing="ongoing" />
</t>
Our Additional Apps
Please log in to comment on this module