LibraryTimesheet
PROproductivity
Timesheet
The Timesheet is a ready-made weekly time-entry screen for Power Apps: one row per project, hours across Monday to Friday and an automatically summed weekly total — all rendered as a single data-driven SVG Image from one collection. It is the grid every time-tracking and project app needs, with no PCF or premium connectors.
Timesheet — this week
PROJECTMTWTF
Website43201
Mobile app24352
Tooling10223
YAML source
Preview — full code with PRO# Timesheet — PowerBlocks (PRO Screen)
# A weekly timesheet grid rendered as a single data-driven Power Fx SVG Image:
# one row per project, hours per weekday and an auto-summed total.
#
# STEP 1 — In Screen.OnVisible (or App.OnStart):
# ClearCollect(
# colTimesheet,
# { Project: "Website redesign", Mon: 4, Tue: 3, Wed: 2, Thu: 0, Fri: 1 },
# { Project: "Mobile app", Mon: 2, Tue: 4, Wed: 3, Thu: 5, Fri: 2 },
# { Project: "Internal tooling", Mon: 1, Tue: 0, Wed: 2, Thu: 2, Fri: 3 }
# );
# STEP 2 — Paste onto a blank screen. STEP 3 — Swap colTimesheet for your data.
- Timesheet:
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Time tracking
Let users log hours per project across the week with an instant total.
Project staffing
Show how time is split across projects at a glance.
Approval input
Display submitted weeks for a manager to review.
How to use Timesheet in Power Apps
- 1Add the colTimesheet collection to Screen.OnVisible (see the YAML header).
- 2Choose your locale (EN or FR) and click "Copy YAML".
- 3Paste the control onto a blank screen.
- 4Swap colTimesheet for your data — totals recompute automatically.
Tip — For editable entry, overlay native text inputs on each cell and Patch back to colTimesheet; the SVG handles the read-only summary view.