Make A Power Apps Timesheets App – Part 1

Timesheets are a popular app to make in Power Apps. In this step-by-step tutorial, I’ll show you how to build your own timesheets app. We will begin by creating timesheet lines with ability to add, edit, delete them. Then we will add the ability to create new timesheets and submit them for approval. I know it’s possible to download a pre-made timesheets template. But I believe the best way to learn Power Apps is to build apps for yourself.

Table of Contents
• Introduction: The Timesheets App
• Setup The Timesheet Lines SharePoint List
• Add A New Screen With The Sidebar Layout
• Insert An App Title Label
• Create An Actions Bar
• Layout The Timesheet Lines Table Headings
• Configure The Pay Code Dropdown Menu
• Arrange The Time Entry Fields For Sunday To Saturday
• Calculate The Total Hours For Each Timesheet Line
• Delete A Timesheet Line
• Save The Timesheet Lines

Introduction: The Timesheets App

Employees at a company enter their weekly worked hours into a Power Apps Timesheets app. Each timesheet has one or more timesheet lines with a specific paycode (regular, overtime, sick, etc.). When the timesheet is completed the employee submits it to their manager for review.

Setup The Timesheet Lines SharePoint List

Create a new SharePoint list named Timesheet Lines with the following columns:

• PayCode (single-line text)
• Sunday (number)
• Monday (number)
• Tuesday (number)
• Wednesday (number)
• Thursday (number)
• Friday (number)
• Saturday (number)
• TotalHours (calculated number)
  

Go to the SharePoint list settings and edit the TotalHours column.

Change the calculated field formula to this formula.

=Sunday+Monday+Tuesday+Wednesday+Thursday+Friday+Saturday

Then open Power Apps Studio and create a new app from blank. Add the Timesheet Lines SharePoint list to the app using the Data menu.

Add A New Screen With The Sidebar Layout

In Power Apps Studio add a new screen to the app. Choose the sidebar layout.

The new screen will appear with several layout containers

• ScreenContainer
• SidebarContainer
• RightSideContainer
• HeaderContainer
• MainSectionContainer
  
  

Change the Fill property of the SidebarContainer container to dark blue.

RGBA(9, 33, 98, 1)

Insert An App Title Label

Create a new label in the the HeaderContainer with the word “Timesheet.”

Configure the HeaderContainer to have a bottom vertical alignment. This will cause the title label to also become bottom-aligned.

Then update the following properties in the title label.

Font: Font.'Lato Black'
Height: 40
PaddingLeft: 40
Size: 20

Create An Actions Bar

Underneath the HeaderContainer we will make an actions bar. The actions bar will give a user the ability to create new timesheet lines and save the timesheet. Later we will add more actions to submit the timesheet and delete the timesheet.

Copy and paste the HeaderContainer into the RightSideContainer. Delete the title label inside the container. Rename the new container ActionsContainer.

Change the vertical alignment of the Actions Container to middle.

Add an icon and a label the to the ActionsContainer for purpose of adding a new timesheet line.

Set the Icon property of the Icon to AddLibrary.

Icon.AddLibrary

Style the AddLibrary icon using this code.

Color: RGBA(0, 120, 212, 1)
Height: 32
Width: 32

Write this code in the OnSelect property of the icon to create a blank new timesheet line.

Collect(
    colTimesheetLines,
    Defaults('Timesheet Lines')
)

Layout The Timesheet Lines Table Headings

The timesheet lines will appear in a table-like format with the days Sunday to Saturday arranged from left to write. We need to create the table header. Insert a new horizontal container in the MainSectionContainer called TimesheetHeaderContainer.

Setup the TimesheetHeaderContainer properties with the following values.

Height: 40
LayoutGap: 20

Insert 9 new labels into the TimesheetHeaderContainer with the following text.

• PayCode
• Sun
• Mon
• Tues
• Weds
• Thurs
• Fri
• Sat
• Total
  
  

Configure The Pay Code Dropdown Menu

We want the app to allow multiple lines per timesheet for pay codes such as: regular, overtime, vacation, sick, etc. Insert a new vertical gallery into the app.

Use the Timesheet Lines collection in the Items property of the gallery.

colTimesheetLines

Make the gallery rows shorter by using these values in the TemplatePadding and TemplateSize properties.

TemplatePadding: 0
TemplateSize: 80

Place a new dropdown menu named drp_PayCode at left-side of the gallery.

Load the Items property of the dropdown menu with the following values.

["Regular", "Overtime", "Double-Time", "Vacation", "Sick", "Bereavement", "Personal"]

Use this value in the Default property of the dropdown. Once we build a feature to save the timesheet line values to SharePoint it will display the saved pay code.

ThisItem.PayCode

Arrange The Time Entry Fields For Sunday To Saturday

The app user will enter their time for each day into a text input. Create 7 new text inputs and place them inside the the gallery.

We want to ensure the text input fields stay aligned with the table headers. Use the following code inside the X property of the respective text input fields.

lbl_SundayHeader.X
lbl_MondayHeader.X
lbl_TuesdayHeader.X
lbl_WednesdayHeader.X
lbl_ThursdayHeader.X
lbl_FridayHeader.X
lbl_SaturdayHeader.X

And use these values in the text inputs Width property to make them the same width as the table headers.

lbl_SundayHeader.Width
lbl_MondayHeader.Width
lbl_TuesdayHeader.Width
lbl_WednesdayHeader.Width
lbl_ThursdayHeader.Width
lbl_FridayHeader.Width
lbl_SaturdayHeader.Width

The user should only be able to write a number into the text input. Update the TextFormat property of all text inputs to the number type.

TextFormat.Number

To show the saved number of hours for each day use this value in the Default property of the respective text input.

ThisItem.Sunday
ThisItem.Monday
ThisItem.Tuesday
ThisItem.Wednesday
ThisItem.Thursday
ThisItem.Friday
Thistem.Saturday

Calculate The Total Hours For Each Timesheet Line

The SharePoint list uses a calculated field to determine the total number of hours on a timesheet line. But we also need to calculate this value in the app for unsaved timesheet lines.

Add a new label to the gallery.

Set the X position of the label and the Width to the same position as the TotalHours header.

Width: lbl_TotalHoursHeader.Width
X: lbl_TotalHoursHeader.X

Calculate the total of the timesheet line as the sum of the text inputs for Sunday to Saturday and show 0 when they are all blank. Write this code in the text property of the label.

Coalesce(
    Sum(
        Value(txt_Sunday.Text),
        Value(txt_Monday.Text),
        Value(txt_Tuesday.Text),
        Value(txt_Wednesday.Text),
        Value(txt_Thursday.Text),
        Value(txt_Friday.Text),
        Value(txt_Saturday.Text)
    ),
    0
)

Delete A Timesheet Line

A user has the ability to remove a timesheet line from the timesheet. Insert a Trash icon into the gallery after the total hours label.

Use this code in the OnSelect property of the Trash icon to remove the timesheet line from the colTimsheetLines collection. If the timesheet line ID is not blank, it means the timesheet line exists in the SharePoint list and must be deleted there as well.

Remove(
    colTimesheetLines,
    ThisItem
);
If(
    !IsBlank(ThisItem.ID),
    Collect(
        colDeleteTimesheetLines,
        ThisItem
    );
)

Save The Timesheet Lines

Once the timesheet is completed the user saves the updated timesheet lines. Insert a Save icon into the ActionsContainer.

Write this code in the OnSelect property of the gallery to store all of the timesheet lines in collection and patch them to the SharePoint list with new values.

// collection to update timesheet lines
ClearCollect(
    colUpdateTimesheetLines,
    ForAll(
        gal_TimesheetLines.AllItems,
        'Timesheet Lines'@{
            ID: ID,
            PayCode: drp_PayCode.Selected.Value,
            Sunday: Value(txt_Sunday.Text),
            Monday: Value(txt_Monday.Text),
            Tuesday: Value(txt_Tuesday.Text),
            Wednesday: Value(txt_Wednesday.Text),
            Thursday: Value(txt_Thursday.Text),
            Friday: Value(txt_Friday.Text),
            Saturday: Value(txt_Saturday.Text)
        }
    )
);

// update timesheet lines and store the results
ClearCollect(
    colTimesheetLines,
    Patch(
        'Timesheet Lines',
        gal_TimesheetLines.AllItems,
        colUpdateTimesheetLines
    )
);

// delete timesheet lines
ForAll(
    colDeleteTimesheetLines,
    Remove(
        'Timesheet Lines',
        ThisRecord
    )
);
Clear(colDeleteTimesheetLines);

Ready For Part 2 Of This Tutorial?

In Make A Power Apps Timesheets App – Part 2 we will add the ability to create new timesheets and submit them for approval. Click here to continue the tutorial.

Questions?

If you have any questions or feedback about Make A Power Apps Timesheets App – Part 1 please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.