Keeping track of time spent on projects is a critical task for many businesses. Detailed time tracking provides insights into where efforts are being focused and helps measure productivity. But recording time manually can be a pain for employees. To make time tracking easy and even mobile, you can create a full-featured app using PowerApps and SharePoint.
In this in-depth post, I'll walk through how to build a powerful time tracking application from start to finish. We'll cover:
- Creating the SharePoint backend to store data
- Building out the app interface and controls in PowerApps
- Connecting the app to SharePoint
- Adding start and end button logic
- Implementing a live timer
- Enhancing the user experience
- Possibilities for taking this further
If you prefer to watch a demonstration showing how this is built, then check out the video above.
Creating the SharePoint Time Tracking List
The first step is setting up somewhere to store all the time tracking data entered by users. For this, we can leverage a SharePoint list within any SharePoint site.
To get started, navigate to your desired SharePoint site and select "New" and then "List" from the menu. Choose to create a blank custom list. Name this list something like "Project Time Records" to reflect that it will contain all time entries.
This SharePoint list will become the backend for our PowerApp. Within the list, we need to create columns to capture all the important time tracking details:
- Start Time - Date/time when timer was started
- End Time - Date/time when timer was stopped
- Time Spent - The calculated duration between start and end
- Project - Dropdown to select the project worked on
- Active Session - Yes/No status if timer is currently running
The start and end times will record exactly when a time entry was started and ended. Storing both allows us to calculate the total time spent.
Time spent will be a calculated field based on the start and end times. This will show the duration in minutes or hours.
The project column will let users select which project they are logging time for from a predefined list. This allows reporting later on time spent on each project.
Finally, the active session status will track whether a timer is currently in progress. This will be used to control button states later.
Those cover the essential columns. But we may also want to include:
- Title - Stores the username for reference
- ID - Unique identifier for each record
With all the necessary columns added, our SharePoint time tracking list is ready! Now we can start developing the app interface using PowerApps.
Building the App Interface in PowerApps
Next up is creating the app itself in PowerApps. This will provide the UI for users to enter time and view data.
We want our app to have:
- Start and end buttons
- A project dropdown
- Display of current elapsed time
- Controls sized appropriately for mobile
So in PowerApps, create a new blank phone app. Name it something like "Time Tracker" to match its purpose.
On the first screen, we'll add our key elements:
- Two large buttons for starting and stopping time
- A dropdown control populated from the SharePoint list
- Text labels showing the current elapsed time
For the project dropdown, insert a form control set to our SharePoint list. Then remove all fields except the project selector.
The text labels will display the current timer value, updated dynamically through the app. Make these bold and large for high visibility.
With those components in place, we have the basic building blocks for our time tracking interface. It allows users to record time against projects and view current elapsed duration.
Let's tweak the styling to polish things up:
- Increase button sizes
- Color start button green and end red
- Add a title like "Time Tracker"
Now we have a clean, mobile-friendly app interface for time tracking. It's ready to be wired up!
Connecting the PowerApp to SharePoint
The next step is establishing a connection between the PowerApp and the SharePoint list we created. This allows the app to securely access data from the list.
Within PowerApps, select the "Data Sources" section on the left. Choose "Add data" and select the "SharePoint" option. Authenticate and choose the specific site where our time tracking list is stored. That's it - our app is now connected to the backend data.
With the link established, we can work on adding the logic to make the app actually function.
Implementing the Start Button Logic
When a user presses the Start button, our app should:
- Create a new item in the SharePoint list
- Populate start time, project, user, and initial active status
- Disable the start button to prevent multiple clicks
This will initiate a new time entry recording.
To insert new records, we'll use the PowerApps Patch function. For the start button OnSelect property, add:
Patch(ProjectTimeRecords, Defaults(ProjectTimeRecords), {Title: User().Email,Project: Dropdown1.Selected,StartTime: Now(),ActiveSession: true});
This patches a new row into our SharePoint list "ProjectTimeRecords". It populates the title with the user email, project from the dropdown selection, start time as now, and sets active session to true. This creates the time entry item!
To prevent multiple time entries being created, we'll also disable the start button by setting its DisplayMode property to Disabled while a session is active.
Implementing the End Button Logic
When the end button is pressed, we need to:
- Lookup the existing time entry record
- Update the end time and duration
- Set active session to false
- Re-enable the start button
This will stop an active time recording.
First, we need to find the correct record to update. We'll store the ID of the created item in a collection on start, then lookup that ID on end button press.
The Patch to stop time looks like:
Patch(ProjectTimeRecords, LookUp(ProjectTimeRecords, ID = LastCreatedID), {EndTime: Now(),TimeSpent: DateDiff(StartTime, Now(), Minutes),ActiveSession: false});
DateDiff calculates duration between start and end times. We update the record found by the Lookup. Finally, toggle the start button back to enabled via its DisplayMode property.
Implementing a Live Elapsed Timer
Having a visible live timer on screen provides great user feedback on their current session duration. To add this:
- Insert a timer control (set Duration property)
- Create variable to store if timer is active
- Start/reset the timer based on button clicks
- Display current value in a label control
The start and end button logic will set the timer active variable appropriately. Their Reset property can then reset or continue the timer as needed.
For display, the Text property of a label can be set to Timer.Duration to fetch the live value. Styling as large and bold will make this prominent on screen.
Enhancing the User Experience
With the major functionality implemented, we can add some final touches to create a seamless user experience.
Disabling buttons not currently available helps guide the user flow. We already disabling starting during an active session.
We can also automatically send the user back to the project selection immediately after ending a session. This prepares for the next time entry.
Lastly, visual cues like color can indicate status. We could highlight the project dropdown red while timing is in progress as a reminder.
Little enhancements like these polish up the app and make it intuitive to use.
Taking This Further
And that covers building a basic time tracking app with PowerApps and SharePoint! But many possibilities exist to expand on this foundation.
A few potential next steps:
- Syncing data to Power BI for reporting and analytics
- Adding a dashboard for managers to overview team time
- Enabling photo upload for evidence of work
- Integrating with payroll systems
- Adding user access management and security
The core components are there for recording time against projects. Build on top of that foundation to create a production-grade business application tailored to your unique needs.
Wrapping Up
In this post we walked through constructing a time tracking application from the ground up using PowerApps and SharePoint. Key takeaways:
- SharePoint provides the backend list for storing data
- PowerApps enables building a great UI for entering records
- Major functionality comes from SharePoint integration and formulas
- Many possibilities exist for enhancing real-world usage
Time tracking is a must for many businesses. But generic solutions may not fit your specific requirements. By combining tools like PowerApps and SharePoint, you can create exactly the system needed for your situation.
Want to build your own clock in/out solution in Power Apps? Check out the Power Apps Success Path!