Building A Time Tracking System With The Power Platform: 2026 Update Guide

What's Changed Since This Session

How to Build This Today

The original session by Paul Stork showed you how to manually construct complex architectures to achieve a functional time tracking system. Here is how you would build that same thing today.

The Microsoft Power Platform has undergone a profound architectural shift since 2024. The introduction of Fluent 2 design language natively into the canvas app authoring experience eliminates the need for extensive manual styling. The implementation of Grid Containers fundamentally rewrites the rules for responsive design. The integration of Copilot and Microsoft Syntex drastically reduces the reliance on complex formulas and third-party connector workarounds.

Demo 1: Build a fully responsive menu component

The session showed you a custom-built, fully responsive menu component. The speaker created a complex reusable component utilizing individual icons alongside descriptive text for each menu item. To accommodate smaller screens, the speaker wrote extensive conditional formulas to dynamically hide the icons, and on mobile device widths, hide the text entirely to rely exclusively on a manual hamburger menu configuration. This custom component was then manually inserted across multiple duplicated screens.

Here is how you would build that same thing today.

Today, constructing custom navigation components is an outdated practice. The platform provides Modern Controls that natively handle navigation, responsiveness, and application branding without requiring a single conditional visibility formula.

Step-by-Step 2026 Build Instructions:

First, enable the modern authoring experience. Open the canvas app within the(https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/power-apps-studio). Navigate to the command bar and select the Settings gear icon.

Within the settings panel, select the Updates tab. Toggle on the feature explicitly named Modern controls and themes. Close the settings panel to allow the authoring menu to refresh.

Next, establish the global design language. Navigate to the Themes pane located on the left authoring menu. Select one of the six default Fluent 2 themes. This action instantly applies a cohesive, accessible color scheme across all modern controls in the application.

Instead of building a manual component, utilize the modern Header control. Select Insert, navigate to the Modern category, and select Header.

Position this control at the top of the application screen. The Header control natively adapts to the width of the parent container without complex mathematical formulas.

Configure the specific properties of the Header control. Locate the Title property in the right-hand properties pane. Set the value to App.ActiveScreen.Name to ensure the header dynamically reflects the current user context.

Enable the native user profile integration. Set the IsProfilePictureVisible property to true. This natively retrieves and displays the Microsoft Entra ID avatar of the current authenticated user.

To recreate the sidebar navigation, insert the modern Tab list control. Select Insert, navigate to the Modern category, and select Tab list. Position this control vertically along the left side of the screen.

Bind the navigation data to the Tab list. Select the Items property and input a simple collection or table defining the screen names and corresponding internal navigation values.

Configure the responsive behavior natively. To ensure the sidebar collapses on mobile devices, select the container housing the Tab list. Set its Visible property to a simple breakpoint formula: If(App.Width < 600, false, true).

The modern Tab list control automatically manages focus states, hover states, and keyboard accessibility. This eliminates the need to manually configure separate color variables for OnHover or OnSelect actions, which was a significant burden in the original session's approach.

Quick Win: Do not build the navigation architecture from a blank screen. Navigate to the command bar, select New screen, and choose the Sidebar layout template. This immediately provisions a fully functional, auto-responsive screen utilizing modern Grid Containers, a dedicated header section, and a pre-configured left navigation pane.

AI and Copilot Simplification:

The generative AI capabilities integrated directly into the Power Apps Studio dramatically accelerate this process. The developer bypasses manual component insertion entirely by leveraging Copilot.

Navigate to the command bar and select + Add page. From the subsequent dropdown menu, select the Describe a page (Preview) option.

In the Copilot interaction panel, enter a natural language prompt. For example: "Create a responsive sidebar layout with navigation links for Time Entry, Project Dashboard, and Administrator Settings."

The AI agent analyzes the request, binds the necessary structural containers, and generates the complete interface within seconds. This eliminates the foundational UI drafting phase entirely.

Demo 2: Build responsive app UI

The session showed you a highly complex method for building a responsive application UI. The speaker duplicated the base screen four separate times to accommodate specific form factors (laptop, phone, iPad, and Android tablet). The layout relied entirely on legacy nested horizontal and vertical containers. The speaker manually configured settings to ensure full-screen coverage without letterboxing, utilizing exhaustive If statements tied to specific breakpoints. The architectural planning steps required locking the device orientation to simplify the development overhead.

Here is how you would build that same thing today.

The approach of duplicating screens for different devices is universally recognized as an anti-pattern in 2026. The introduction of the Grid container control completely overhauls the responsive design paradigm within canvas apps.

The Grid container shifts the development mindset from formula-driven responsiveness to structure-driven responsiveness. It natively manages layout stability, ensuring that adding new components does not break the entire screen architecture.

Step-by-Step 2026 Build Instructions:

First, configure the absolute application display settings. Open the app in the(https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/power-apps-studio). Navigate to the command bar and select Settings, then select Display.

Locate the Scale to fit setting. It is imperative to toggle this setting to Off. Disabling this feature prevents the application from merely stretching controls unnaturally and promotes true, natural layout adaptation to various screen sizes.

Locate the Lock aspect ratio and Lock orientation settings. Ensure both are toggled to Off. This configuration allows the application's layout to effectively respond to different screen sizes and orientations, maintaining a consistent interface whether the device is in portrait or landscape mode. Close the settings dialog.

Next, implement the structural foundation. From the left-hand Insert pane, navigate to the Layout tab and select Grid container.

Configure the Grid container to serve as the master wrapper for the screen. Set its precise dimensional properties: X = 0, Y = 0, Width = Parent.Width, and Height = Parent.Height. This ensures the grid dynamically occupies the maximum available device real estate.

Define the structural grid matrix. In the right-hand properties pane, locate the grid configuration section. Define the explicit number of Rows and Columns required for the core application layout. For a standard time tracking dashboard, define three rows and three columns.

Insert the child UI components. Add modern controls such as Text input, Combobox, and Button directly inside the Grid container.

Assign the precise spatial positioning for each child component. Select a child component within the grid. In the properties pane, locate the grid placement properties.

Set the Column Start / Column End values to define horizontal span. Set the Row Start / Row End values to define vertical span.

The Grid container automatically distributes the available space to its child components based on these explicit settings. This completely eliminates the need to ever manually set X or Y coordinates for a component inside the container.

To achieve multi-device responsiveness without duplicating screens, utilize the App.Width property to dynamically adjust the Grid container's column definitions.

Select the Grid container's Columns property. Enter a logical conditional statement. For example: If(App.Width < 600, , 3). This dictates that on a mobile device, the grid restructures into a single stacked column, whereas on a desktop monitor, it utilizes a wide three-column display.

For highly complex data entry forms, utilize nested grids. Place a secondary Grid container inside a specific cell of the primary Grid container. This strategy breaks complex screens into smaller, highly manageable sections with isolated alignment rules.

This localized approach results in a remarkably clean application architecture. It vastly improves long-term maintainability compared to the legacy approach of tracking countless absolute positioning formulas.

Quick Win: Do not rely solely on pixel-width breakpoints to dictate layout changes. Leverage the application's built-in spatial awareness. Use the formula If(App.Height > App.Width, "Portrait", "Landscape") to instantly detect how the user is holding their physical device. Bind this output to your Grid container properties to seamlessly reflow the layout when a tablet is rotated.

AI and Copilot Simplification:

Generative AI reduces the manual burden of defining exhaustive grid placement properties. The developer can define the entire structural matrix via conversational prompts.

Select the newly inserted Grid container. Open the inline Copilot prompt panel.

Enter the exact structural requirements: "Configure this grid for a standard enterprise dashboard. Create a top header row spanning all columns. Create a narrow left navigation column. Create a wide main content area occupying the remaining space."

The AI agent automatically calculates the optimal fractional width allocations. It automatically assigns the correct Column Start and Row Start properties for all nested child containers. This establishes a production-ready responsive framework in absolute record time.

Demo 3: Implement time tracking system

The session showed you how to wire up controls and actions on the responsive screens to physically track time for specific projects and tasks. The architecture utilized a basic SharePoint list as the backend database. The speaker focused heavily on configuring the UI for mobile-friendly data entry. Finally, the session integrated Power Automate to auto-generate official invoices from the tracked time data. This legacy integration required building an arduous flow that converted raw HTML strings into a PDF document—a process known for formatting errors and high maintenance overhead.

Here is how you would build that same thing today.

The foundational data architecture remains rooted in SharePoint lists, which continue to be highly supported and efficient for standard enterprise applications. However, the data entry mechanisms and backend automation layers have been completely revolutionized.

The modern Edit form control provides an intrinsically accessible, Fluent 2 compliant interface for robust data entry without manual styling.

For the critical document generation phase, the highly fragile HTML-to-PDF workflows have been entirely deprecated in modern development. They are replaced by the Microsoft Syntex "Generate document" native action available directly within Power Automate.

Step-by-Step 2026 Build Instructions (Data Entry):

First, provision the backend database rapidly using natural language. Navigate to the Microsoft 365 Copilot interface.

Enter the prompt: "Create a SharePoint list for Time Tracking. Include mandatory columns for Employee Name, Entry Date, Project Code, Billable Hours, and Task Description".24 The system provisions the list instantaneously.

Return to the Power Apps Studio. Navigate to the Data pane located on the left sidebar authoring menu. Select Add data. Search for the SharePoint connector and establish a connection to the newly created Time Tracking list.

Navigate to the main content area of your designated data entry screen. Select Insert, navigate to the Data category, and select the modern Edit form control.

Select the newly inserted form control. In the properties pane, set its DataSource property explicitly to the connected Time Tracking SharePoint list. The form natively auto-generates the necessary input fields utilizing modern Fluent 2 controls (such as the modern Date picker and Text input).

Insert a submission trigger. Select Insert > Modern > Button. Position this button below the form.

Configure the data submission logic. Select the button and locate the OnSelect property. Input the standard submission formula: SubmitForm(Form1). This action seamlessly commits the tracked time directly to the SharePoint list backend with full validation handling.

The application now reliably captures and stores the time entries. The next critical step is automating the invoice generation process based exclusively on these new entries.

Step-by-Step 2026 Build Instructions (Invoice Generation):

First, prepare the document template. Create a standard Microsoft Word document (.docx) designed as a professional invoice. Insert specific text placeholders (e.g., [ClientName], ``) where dynamic data will reside. Save this template to a designated SharePoint Document Library.

Navigate to the Power Automate portal. Select My flows in the left navigation pane. Select New flow, and choose Automated cloud flow.

Provide a descriptive name for the flow. Under the trigger selection, search for the SharePoint connector and select the When an item is created trigger. Click Create.

Configure the trigger constraints. Input the exact SharePoint Site Address and select the specific Time Tracking List Name from the dropdown menu. This ensures the flow only executes when a new time entry is physically logged.

Add the document generation action. Select New step. Search the connector repository for SharePoint. Select the specific action named Generate document using Microsoft Syntex.

Configure the Syntex action parameters. Provide the target Site Address. Select the specific Document Library that houses the modern Word invoice template created earlier.

Map the dynamic data. Once the template is selected, the Syntex action automatically parses the Word document and exposes the defined placeholder fields directly within the flow interface.

Map these exposed template fields directly to the dynamic content outputs from the SharePoint trigger. For example, map the template's 'TotalHours' field explicitly to the list's 'Billable Hours' column data.

Define the desired output format. In the Syntex action properties, specify the output file name. Critically, append the .pdf extension to this file name. The Syntex engine automatically processes the data merge and converts the generated Word document into a high-fidelity PDF format natively, requiring no third-party conversion tools.

Add a final distribution action. Select New step and add an action such as Send an email (V2). Configure the email recipient and attach the newly generated PDF invoice directly from the Syntex output payload.

This modern implementation provides enterprise-grade document generation using standardized Word templates directly mapped to list data. It entirely circumvents the complex HTML string manipulation that plagued legacy workflows.

Quick Win: Do not attempt to build complex mathematical data mapping logic directly inside the Word template structure. The Syntex action does not support native computational data mapping within the template itself. Ensure that all necessary calculated values (such as 'Total Cost' = 'Billable Hours' * 'Hourly Rate') are explicitly computed either within the Power App prior to submission, or within a dedicated Power Automate 'Compose' action prior to calling the Syntex document generation step.

AI and Copilot Simplification:

For advanced enterprise scenarios, the standard linear Power Automate flow is frequently upgraded to a Copilot Studio Agent Flow.

Standard cloud flows execute static, rule-based paths. If the invoice generation process requires complex, cognitive decision-making—such as validating the tracked time against specific, nuanced vendor contracts or fluid company compliance policies before issuing an invoice—an Agent Flow is the required architecture.

Navigate to the Copilot Studio interface. Select the option to create a new Agent Flow.

Utilize natural language to define the complex orchestration logic: "Create an agent flow that triggers when a new time entry is added to the SharePoint list. Use generative AI to validate the submitted hours against the master client contract document stored in SharePoint. If the hours are fully compliant, proceed to generate the invoice via Syntex. If the hours are flagged for any discrepancy, route an approval request to the designated project manager".29

Copilot Studio interprets this complex intent and generates the flow instantly. The Agent Flow provides deterministic, end-to-end process execution while simultaneously leveraging advanced AI to handle the cognitive validation logic. This ensures that official invoices are strictly generated only for fully compliant, verified time entries, drastically reducing administrative oversight.

Licensing Quick Reference

Deploying this highly modernized, AI-driven architecture requires specific, updated licensing considerations. The shift from legacy functionality to Copilot-integrated document generation and responsive controls requires standardization on premium platform capabilities.

The table below outlines the specific Microsoft Power Platform licenses required to implement the recommended April 2026 architecture.

Organizations currently utilizing legacy seeded AI Builder credits from existing Power Apps Premium or Dynamics 365 licenses must transition their licensing models. Microsoft has enacted a hard deprecation timeline. As of November, 2026, all seeded AI Builder credits are definitively and permanently removed from all premium licenses.

If sufficient Copilot Credits are unavailable after this strict cutoff date, any advanced AI processing or Copilot Studio Agent flow execution within the application architecture will be immediately blocked by the platform. System administrators must proactively review the newly consolidated licensing capacity reports within the Power Platform admin center to procure sufficient Copilot Credit packs based on actual peak monthly utilization metrics.