How to Setup a Start/Stop Timer Guide

In this article, you'll learn how to use date/time fields and equation fields to create a solution to track the duration of an event.

This article contains the following sections:

• Overview

• Step 1: Add Date/Time Fields for Start and End Times

• Step 2: Create Equation Fields to Capture Start and End Times

• Step 3: Calculate the Elapsed Time

• Step 4: Add Start and Stop Buttons

• Step 5: Set Display Rules for the Start and Stop Buttons

---

Overview

This article walks you through setting up a start/stop timer in Knack, which will act as a stopwatch by recording the start and end times and calculating the elapsed time in minutes. You’ll use date/time fields, equation fields, and display rules to make this happen.

Step 1: Add Date/Time Fields for Start and End Times

Create "Start" and "End" Date/Time Fields:

• In your data table, create two date/time fields: You can name them "Start Time" and "End Time".
• Ensure both fields have their default values set to "None". This will allow us to later detect if the timer has not been started.

Step 2: Create Equation Fields to Capture Start and End Times

1. Add an Equation Field for End Time in UNIX Format:

• Create an equation field called "Start Time (UNIX)".
• Configure it to display the "Start Time" in seconds: 
  

2. Add an Equation Field for End Time in UNIX Format

• Create another equation field called "End Time (UNIX)" and configure it similarly, using the "End Time" field:

Step 3: Calculate the Elapsed Time

1. Create another Equation Field to Calculate Time Difference

• • Add a new equation field called "Elapsed Time (Seconds)".
  • Set this field to subtract "Start Time (UNIX)" from "End Time (UNIX)." This gives the difference in seconds between the two times:
    

2. Convert Seconds to Minutes

You can either:

• Update the above equation field to divide by 60, or
• Create a new equation field that divides "Elapsed Time (Seconds)" by 60:

 

Step 4: Add Start and Stop Buttons

In your app, you can create a details view for the specific event or utilize a grid view that includes two buttons. One button will set the current time as the "Start Time'" while the other will record the "End Time" as the current time.

Create Buttons to Set Start and End Times:

In your app's details view or grid view, add two action link buttons:

• "Start Timer": Sets the "Start Time" field to the current time (date).
• "Stop Timer": Sets the "End Time" field to the current time (date).
• In a grid/details view, these buttons are called "action links" and are found under the "Actions" section when adding a column to your view:

Step 5: Set Display Rules for the Start and Stop Buttons

Configure Display Rules:

Lastly, you can then implement display rules that will hide the "End Time" button when the Start Time field is empty, and similarly, hide the "Start Timer"  button when the End Time field is populated. This approach ensures that only the relevant button is visible at any given time, providing clear control over the timer's operation.

You can locate the display rules for the columns by navigating to the Column Properties section under with the action links you added in the previous step:

---