How do I build a time tracking module?
Features Discussed:
Overview
In this episode of Build it with Tim, we will guide you through the process of building a time tracking module for your app. The module will allow users to track time for different projects or jobs. We will be using the list component action links and display rules to achieve this functionality.
Before we begin, let's provide an overview of what the finished app will look like. The app will feature a list of jobs, a form to add new jobs, and buttons to start, stop, and complete the time tracking for each job. Additionally, users will be able to view details such as the time spent on the job, who completed it, when it was completed, and the total time spent.
To start building the module, we'll need to create a table to track jobs. Each job will have a name, description, and status. The status can be "started," "stopped," or "complete." We'll also include a field to store the completion date.
In the page builder, we'll create a page for displaying the list of jobs. We'll use the list component and configure it to show the job name, description, status, and completion date. We'll customize the layout to split each list row into two columns: one for job information and the other for action buttons.
To enhance the module further, we'll add functionality to track who completed the job and the time spent on each job. We'll create a connection between the jobs table and the user table to store the user who completed the job. We'll also create a separate table called "time tracking" to store the start and end timestamps for each time tracking session. This approach allows us to maintain a history of time tracking sessions for each job.
Finally, we'll modify the display rules to show the completion date and calculate the total time spent on each job by summing the time tracking sessions.
By following these steps, you'll be able to build a comprehensive time tracking module for your app. It will provide users with the ability to track time for different projects or jobs, view job details, and track the progress of their work.
Final output
In the final output a user will be able to do the following:
- See jobs in a list view
- Use a form to add new jobs
- Start tracking time
- Stop tracking time
- Mark job as completed
- View details of who did this and total time
Key Concepts Covered:
- How to Organize Columns in a list component effectively.
- Utilizing Action Links within a List Component for better interactivity.
- Applying Record Rules to dynamically update Job Status.
- Hiding Column Headings in a list component for a cleaner layout.
- Styling Action Links as buttons for a more engaging user experience.
- Conditional Display of Action Links based on job status.
- Creating a Log to keep track of specific actions and updates.
- Calculating Differences between two date fields for insightful data.
- Summarizing Time Spent with a Sum field to get a total view.
- Adding a Details Page to view a comprehensive log of time spent on a project.
Template
You can install an updated version of this template by clicking here:
Transcript Summary
Introduction
Hey everybody, welcome back to Build It with Tim where I take community suggestions for apps and modules and build them live on the fly. Today's episode is going to be building a time tracking module.
In this module, we are going to give our users the ability to track time for different projects or jobs, whatever that may be in your specific app. We're going to do this using the list component, action links, and display rules.
Overview
The finished app is going to look like this:
- A list of jobs
- A form to add new jobs
- The ability to start tracking time
- Stop tracking time
- Complete a job
- On the details, be able to see the time spent on the job, who completed it, when it was completed, and the total time spent for the entire job
Initial Setup
We're in a blank app right now, but I did add a couple of users here to expedite this a little bit. So, I'm going to leave these users and start adding some tables.
Creating Jobs Table
For time tracking, we're going to track jobs. We can track anything actionable, but we're going to call this "jobs" to keep it simple. We'll create a table for jobs with the following fields:
- Job name
- Job description
- Job status (with options: to do, started, stopped, complete)
- Completed on (date)
Building Pages
Jobs Page
We're going to build a page called "jobs" using the list component and the jobs table.
Add Job Page
We'll add a page called "Add Job" with a form to add jobs. We'll set the job status to "to do" when a new job is submitted using form rules.
Customizing the List Component
We're going to customize the list component by:
- Changing the layout to one column.
- Adding fields: job name, job description, job status, completed on.
- Adding action links: start, stop, complete.
Formatting Action Links
We'll format the action links as buttons and add colors:
- Start: success (green)
- Stop: danger (red)
- Complete: primary color
Setting Action Rules
We'll set action rules for the buttons:
Display Rules
We'll set display rules for the buttons based on job status:
Additional Features
Tracking Completion
We'll add a "completed by" field in the jobs table to track who completed the job.
Tracking Time Spent
We'll add a time tracking table with fields:
- Connection to job
- Start date and time
- End date and time
We'll use action links to insert connected records into the time tracking table and update these records accordingly.
Calculating Total Time
We'll add fields to calculate the time spent:
- Time spent (date formula: end date - start date)
- Time spent in minutes (basic formula)
In the jobs table, we'll add a complex formula to sum the total time spent on each job from the connected time tracking records.
Final Steps
We'll add a details page to show all connected time tracking records for each job, and update the completed on date and completed by field when the job is marked as complete.
I think that just about does it for this week's episode of Build It with Tim. We learned how to build a time tracking module using the list component, action links, and display rules. We also covered equations and formulas to track total time. If anybody has any questions, please leave me a comment, and I'll be happy to answer any questions that you may have. See you next week. Take care everybody, thanks!