Make A Power Apps Timesheets App - Part 1

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/make-a-power-apps-timesheets-app-part-1/. Author: Matthew Devaney.

Make A Power Apps Timesheets App – Part 1 Posted by - Matthew Devaney on - April 2, 2023 81 Comments

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 Code language: HTTP ( http ) 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 Code language: CSS ( css )

Style the AddLibrary icon using this code. Color : RGBA(0, 120, 212, 1) Height : 32 Width : 32 Code language: HTTP ( http )

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

Collect( colTimesheetLines, Defaults( 'Timesheet Lines' ) ) Code language: JavaScript ( javascript )

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 Code language: HTTP ( http )

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 Code language: HTTP ( http )

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" ] Code language: JSON / JSON with Comments ( json )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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 ) Code language: CSS ( css ) 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 ); ) Code language: CSS ( css ) 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); Code language: JavaScript ( javascript ) 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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps