How do I build a time tracking module?

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.

The action buttons will include options to start, stop, and complete the time tracking for each job. We'll set up action rules to update the job status based on the button clicked. Additionally, we'll create display rules to show or hide buttons based on the current job status. For example, the "start" button will only be visible when the job status is "to do," and the "stop" button will only be visible when the job status is "started."

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.

Features Discussed:

1. List Component (Time: 3:36)
   Learn how to effectively use the list component to display and manage data in a user-friendly list format.
2. Layouts (Time: 3:56)
   Learn how to design and manage layouts to enhance the visual structure and user experience.
3. Action Link (Time: 5:05)
   Learn how to create action links that trigger actions or navigate to specific pages when clicked.
4. Display Rules (Time: 10:00)
   Learn how to use display rules to dynamically show or hide elements based on user interactions or data conditions.
5. Action Rule (Time: 17:15)
   Understand how to configure action rules to automate tasks based on specific conditions within your application.

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:

1. How to Organize Columns in a list component effectively.
2. Utilizing Action Links within a List Component for better interactivity.
3. Applying Record Rules to dynamically update Job Status.
4. Hiding Column Headings in a list component for a cleaner layout.
5. Styling Action Links as buttons for a more engaging user experience.
6. Conditional Display of Action Links based on job status.
7. Creating a Log to keep track of specific actions and updates.
8. Calculating Differences between two date fields for insightful data.
9. Summarizing Time Spent with a Sum field to get a total view.
10. 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:

1. Changing the layout to one column.
2. Adding fields: job name, job description, job status, completed on.
3. 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:

• Start button: Update job status to "started."
• Stop button: Update job status to "stopped."
• Complete button: Update job status to "complete."

Display Rules

We'll set display rules for the buttons based on job status:

• Start button: Visible only when job status is "to do."
• Stop button: Visible only when job status is "started."
• Complete button: Visible only when job status is "stopped."

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!