Building a Timeclock App

[Anonymous]

I am in the process of building a Timeclock App that will allow my employees to punch-in and punch-out for shift start/end and also lunch breaks. I am just not so sure on how get the punches on the same record. And also for days where maybe they work a half day when they punch-out, for the app to know it's not a lunch punch-out.

Is there any app samples already out there or anyone know a good place to start?

Thank you.

[mdevaney]

@Anonymous 

This is a popular question I see on the forums and I am interested in helping.  I want to understand your specific requirements a little better first though.

Can you please tell me how the current employee will be determined?  Is this a punch-clock people log into on their desktop computers and every user has their own computer?   If yes, we can rely on the user login to tell us who is currently using the app.

What punch types do you want?

• Clock-In (Start Shift)
• Clock-Out (Lunch)
• Clock-Out (End Shift)
• What others?

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[Anonymous]

@mdevaney 

All the users will be determined by their Office 365 login when they open the PowerApp. I have a SharePoint List that will populate when the user clicks on the appropriate button. I will have 4 buttons (Punch In, Lunch Out, Lunch In, Punch Out). So basically, they will click the button appropriate for their punch action. I am going to try and disable the buttons if that punch time has already been done.

[mdevaney]

@Anonymous 

Great, totally understand what you are saying.

What other information does the user need to see on the screen?  This is a question about features:

• Current status
• Current time elapsed in status
• Current day-history of check-in/out
• Undo button (undo any punch within 5 minutes of pressing the button)
• Totals: sum of all time clocked in for the day, sum of all breaks, etc.
• Add any other features you can think of (cool ideas welcome)

I'm toying with the idea of making a proof-of-concept app here and writing a blog article... so that's why I'm asking for so many ideas.  I want to make it true-to-life as possible.  With the features someone would actually need.

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[RandyHayes · Accepted solution]

@Anonymous 

So, I have a fairly quick solution for you.  I could provide this as an attached App, but instead I will present it as a "build it yourself kit".  Mostly because it relies on a SharePoint list and that's always problematic with sample shareable apps, and...people love to build stuff!

Step 1 - Create the SharePoint List:

Create a List in SharePoint - Call it TimeTracker

Leave the Title as is but Create 3 additional columns:

   1) ActivityType - Text Column

   2) ActivityDateTime - Text Column

   3) AcitivyDate - Date Column (include Time)

Step 2 - Create Your App:

Call it what you want.

   1) Connect to the datasource TimeTracker

   2) Create a New Screen (a scrollable screen).  Select the Canvas1 and resize it.  (that will kill the connection to the label on that screen), then Cut the Canvas1 from the screen.  Return to the Screen1 and paste the Canvas1 there.  You can now delete Screen2.  There is an interesting reason for doing this that will soon become obvious.

   3) On DataCard1 Update property, place the following formula:

With({lclUser:Lower(User().Email)},
    With({lclRecs:Filter(TimeTracker, Title=lclUser && StartsWith(ActivityDateTime, Text(Today(), "yyyymmdd")))},

    {CheckIn: LookUp(lclRecs, ActivityType="CheckIn", ActivityDate),
     CheckOut: LookUp(lclRecs, ActivityType="CheckOut", ActivityDate),
     LunchOut: LookUp(lclRecs, ActivityType="LunchOut", ActivityDate),
     LunchIn: LookUp(lclRecs, ActivityType="LunchIn", ActivityDate)
    }
   )
)

   4) In your DataCard1, place two buttons and 4 labels.  Button1, Button2, Label1, Label2, Label3, Label4
     Set the following properties for listed controls:

      Label1

           Text Property:  

                  Coalesce(Text(DataCard1.Update.CheckIn, ShortDateTime), "No Check In Time")

      Label2

            Text Property: 

                  Coalesce(Text(DataCard1.Update.CheckOut, ShortDateTime), "No Check Out Time")

      Label3

            Text Property: 

                  Coalesce(Text(DataCard1.Update.LunchOut, ShortDateTime), "No Lunch Out Time")

      Label4

            Text Property:  

                   Coalesce(Text(DataCard1.Update.LunchIn, ShortDateTime), "No Lunch In Time")

      Button1

            Text Property: 

                    "Check " & If(IsBlank(DataCard1.Update.CheckIn), "In", "Out")

            Visible Property: 

                    IsBlank(DataCard1.Update.CheckOut)

            OnSelect Action: 

                    Patch(TimeTracker, Defaults(TimeTracker), {Title:Lower(User().Email), ActivityType:"Check" & If("In" in Self.Text, "In", "Out"), ActivityDateTime:Text(Now(), "yyyymmddhhmm"), ActivityDate:Now()})

      Button2

            Text Property: 
                       "Lunch " & If(IsBlank(DataCard1.Update.LunchOut), "Out", "In")

            Visible Property: 

                       !IsBlank(DataCard1.Update.CheckIn) && IsBlank(DataCard1.Update.LunchIn) && IsBlank(DataCard1.Update.CheckOut)

            OnSelect Action: 

                       Patch(TimeTracker, Defaults(TimeTracker), {Title:Lower(User().Email), ActivityType:"Lunch" & If("In" in Self.Text, "In", "Out"), ActivityDateTime:Text(Now(), "yyyymmddhhmm"), ActivityDate:Now()})

Finally, for testing ability so you can do this over and over again, put a Trash Can Icon on your screen and set the OnSelect Action to:  With({lclUser:Lower(User().Email)}, RemoveIf(TimeTracker, Title=lclUser && StartsWith(ActivityDateTime, Text(Today(), "yyyymmdd"))))

Now play your app and click away!

[Anonymous]

@mdevaney 

This is what I have started

[Anonymous]

@RandyHayes 

Is there a specific reason for using a Scrollable Screen? The app doesn't really need to scroll since it will all fit on one screen nicely. Or can I remove the scrollbar?

[RandyHayes]

@Anonymous 

You're actually not using a scrollable screen.  You're just borrowing a "canvas" with a datacard from one.

You can size the canvas as large as the screen and set the datacard size to suit your needs and not scroll.

The long story on why we use this in the app...

If you learn one thing about my PowerApps style...I can't stand variables.  As a developer, they are so much different in PowerApps.

So, I typically rely on the actual properties of a control to determine the state of things rather than try to set variables when state changes so that I can then look at the Variable someplace else...to me it's a total waste of time.  Just look at the state of the control.  If the control changes because of a change in the underlying data, then I don't need to do anything else...I already have the value because it is in the control.

One limitation is that many times I need a Record of information, not just a single value.  I have found that a DataCard in a Canvas has an update property that can be anything I want.  And, there is no apparent use for that property anywhere else.  Once I discovered that, it became my go-to place for having a dynamically changing "variable".  Because, as you see in the app sample, I do not actually create a variable for the 4 different times.  Instead they all come from that Update property. And, it will automatically change on its own when the underlying data changes...I don't have to do another variable set.  Love it!!!

Don't let the canvas and datacard throw you though.  I only borrowed that (and you will notice I said to cut it from a scrollable screen, but it on your main and then delete the scrollable screen).  What I realized that I mentioned was to put the controls "IN" the datacard.  You actually don't need to do that.  Your datacard can me completely empty...we are just using the Update property on that datacard as no other control offers this type of functionality. 

You could empty out your datacard and put the controls on the main screen and then even set the canvas visible to false.  No more pesky screen interference!

I hope that all makes sense.

[RandyHayes]

@Anonymous 

By the way...I did a video on this concept.  Check it out!

[Anonymous]

@RandyHayes 

I am going to watch your video now. 

I subscribed to your YouTube page and also "Liked" the video.